Outiref

Code source de l'URL : https://www.mechuta.com/blog/west-erdre-festival-05-09-2026.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="purple">
    <link rel="manifest" href="/manifest.json">
    <title>West’Erdre festival 5 septembre 2026 la chapelle sur erdre</title>
    <meta name="description" content="8ème édition du festival West ERDRE de l'l'association chapelaine L'Amicale Laïque Gesvrine qui propose concets et danse sur une journée" >
      <meta name="author" content="Mechuta">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://www.mechuta.com/blog/west-erdre-festival-05-09-2026.html">
    <meta property="og:title" content="West'Erdre Festival  édition 2026">
    <meta property="og:description" content="Festival de musique West'Erdre : programmation live, et animations le samedi 6 septembre à la chapelle sur erdre">
    <meta property="og:url" content="https://www.mechuta.com/blog/festival-westerdre.html">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://www.mechuta.com/images/westerdre-2025.jpg">
<meta property="og:site_name" content="Mechuta duo basse batterie nantais">
    <meta property="og:locale" content="fr_FR">
<meta property="article:author" content="https://www.facebook.com/313998245134045">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="WestErdre festival 06.09.2025">
    <meta name="twitter:description" content="Festival de musique West Erdre : programmation live, et animations le samedi 6 septembre à la chapelle sur erdre">
    <meta name="twitter:image" content="https://www.mechuta.com/images/westerdre-2025.jpg">
    <meta name="twitter:site" content="@mechuta">
<meta name="twitter:creator" content="@mechuta">
<meta name="twitter:url" content="https://www.mechuta.com/blog/west-erdre-festival-05-09-2026.html">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="alternate" type="application/rss+xml" title="Mechuta Blog RSS Feed" href="https://www.mechuta.com/blog/rss.xml">
    <link rel="alternate" type="application/atom+xml" title="Mechuta Blog Atom Feed" href="https://www.mechuta.com/blog/atom.xml">
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">
 
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Anton&family=Permanent+Marker&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

        :root {
            --pourpre-fonce: #340034;
            --pourpre-clair: #993399;
            --gris-fonce: #333;
            --jaune-fluo: #FFFF00;
            --vert-lime-vif: #00FF00;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Manrope', sans-serif;
            color: #fff;
            background: linear-gradient(to bottom, var(--pourpre-fonce), var(--pourpre-clair));
            position: relative;
            min-height: 100vh;
            overflow-x: hidden;
        }
        canvas.background-canvas {
            position: absolute;
            z-index: -1;
            opacity: 0.3;
        }
        header {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://mechuta.com/mechuta-lachapelle.jpg');
            background-size: cover;
            height: 50vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
            position: relative;
            z-index: 1;
        }
        header h1 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 3rem;
            color: var(--vert-lime-vif);
            text-shadow: 2px 2px 4px var(--pourpre-fonce);
            letter-spacing: 2px;
        }
        header p {
            font-size: 1.2rem;
            margin: 15px 0;
            font-family: 'Manrope', sans-serif;
        }
        .btn {
            background-color: var(--jaune-fluo);
            color: var(--pourpre-fonce);
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: var(--pourpre-clair);
            color: #fff;
        }
        nav {
            background-color: #000;
            padding: 15px 20px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-family: 'Bebas Neue', sans-serif;
            font-size: 2rem;
            color: var(--jaune-fluo);
            text-shadow: 1px 1px 3px var(--pourpre-fonce);
        }
        .nav-menu {
            display: flex;
            list-style: none;
        }
        .nav-menu li { margin: 0 20px; }
        .nav-menu a {
            color: #fff;
            text-decoration: none;
            font-size: 1.2rem;
            transition: color 0.3s ease;
        }
        .nav-menu a:hover {
            color: var(--jaune-fluo);
            animation: slideUp 0.4s ease forwards;
        }
        @keyframes slideUp {
            0% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0); }
        }
        .burger { display: none; font-size: 2rem; cursor: pointer; color: #fff; }
        main {
            padding: 60px 20px;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        article h2 {
            font-family: 'Permanent Marker', cursive;
            font-size: 2.5rem;
            color: var(--jaune-fluo);
            text-shadow: 1px 1px 2px var(--pourpre-fonce);
            margin-bottom: 20px;
        }
        .meta {
            font-size: 0.9rem;
            color: #ccc;
            margin-bottom: 20px;
        }
        .tag {
            display: inline-block;
            background-color: var(--pourpre-clair);
            color: #fff;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8rem;
            margin-bottom: 20px;
        }
        article p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        article img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            margin: 20px 0;
        }
        article iframe {
            width: 100%;
            max-width: 560px;
            height: 315px;
            border: none;
            margin: 20px auto;
            display: block;
        }
        .share-buttons {
            display: flex;
            gap: 15px;
            margin: 20px 0;
            justify-content: center;
        }
        .share-buttons a {
            color: #fff;
            font-size: 1.5rem;
            transition: transform 0.3s ease;
        }
        .share-buttons a:hover {
            transform: scale(1.2);
            color: var(--jaune-fluo);
        }
        .comments-section {
            margin-top: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 20px;
            border-radius: 10px;
        }
        .comments-section h3 {
            font-family: 'Anton', sans-serif;
            font-size: 1.8rem;
            color: var(--vert-lime-vif);
            margin-bottom: 20px;
        }
        .comment-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .comment-form input,
        .comment-form textarea {
            padding: 10px;
            background-color: var(--pourpre-fonce);
            color: #fff;
            border: 1px solid var(--jaune-fluo);
            border-radius: 5px;
            font-size: 1rem;
        }
        .comment-form textarea {
            resize: vertical;
            min-height: 100px;
        }
        .comment-form button {
            align-self: flex-start;
            background-color: var(--jaune-fluo);
            color: var(--pourpre-fonce);
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .comment-form button:hover {
            background-color: var(--pourpre-clair);
            color: #fff;
        }
        .captcha {
            margin: 15px 0;
        }
        .captcha label {
            display: block;
            font-size: 1rem;
            color: var(--jaune-fluo);
            margin-bottom: 5px;
        }
        .captcha input[type="text"] {
            width: 100px;
        }
        .comment-form input:invalid,
        .comment-form textarea:invalid {
            border-color: red;
        }
        .comment-form .error {
            color: red;
            font-size: 0.9rem;
            margin-top: 5px;
        }
        .rating-field {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .rating-field label {
            font-size: 1rem;
            color: var(--jaune-fluo);
        }
        .rating-stars {
            display: flex;
            gap: 5px;
        }
        .rating-stars span {
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--jaune-fluo);
            transition: color 0.2s;
        }
        .rating-stars span.filled {
            color: var(--jaune-fluo);
        }
        .rating-stars span.empty {
            color: #ccc;
        }
        .rating-stars span:hover,
        .rating-stars span:hover ~ span {
            color: #ccc;
        }
        .comment-list {
            margin-top: 20px;
        }
        .comment {
            background-color: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        .comment .author {
            font-weight: bold;
            color: var(--jaune-fluo);
        }
        .comment .date {
            font-size: 0.8rem;
            color: #ccc;
        }
        .comment .rating {
            color: var(--jaune-fluo);
            font-size: 1rem;
            margin: 5px 0;
        }
        .related-articles {
            margin-top: 40px;
        }
        .related-articles h3 {
            font-family: 'Anton', sans-serif;
            font-size: 1.8rem;
            color: var(--vert-lime-vif);
            margin-bottom: 20px;
        }
        .related-articles ul {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        .related-articles li a {
            color: #fff;
            text-decoration: none;
            font-size: 1.1rem;
            transition: color 0.3s ease;
        }
        .related-articles li a:hover {
            color: var(--jaune-fluo);
        }
        .back-link {
            display: inline-block;
            margin-top: 20px;
            color: var(--jaune-fluo);
            text-decoration: none;
            font-size: 1.1rem;
        }
        .back-link:hover {
            color: var(--pourpre-clair);
        }
        footer {
            background-color: var(--gris-fonce);
            color: #fff;
            text-align: center;
            padding: 20px;
            position: relative;
            z-index: 1;
        }
        footer ul { display: flex; justify-content: center; list-style: none; }
        footer li { margin: 0 10px; }
        footer a { color: #fff; text-decoration: none; }
        footer a:hover { color: var(--pourpre-clair); }
        @media (max-width: 768px) {
            .burger { display: block; }
            .nav-menu {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 60px;
                left: 0;
                width: 100%;
                background-color: #000;
                padding: 20px 0;
            }
            .nav-menu.active { display: flex; }
            header h1 { font-size: 2rem; }
            article h2 { font-size: 2rem; }
            main { padding: 40px 15px; }
            .share-buttons { flex-wrap: wrap; }
            .related-articles ul { grid-template-columns: 1fr; }
        }


    </style>
<meta property="article:published_time" content="2025-09-06T09:24:38Z">
<meta property="article:modified_time" content="2025-09-06T17:28:00Z">
<meta property="article:section" content="Music">
</head>
<body>
  <!--  <?php
    session_start();
    // Fonctions PHP pour le formulaire
    function generateCsrfToken() {
        if (empty($_SESSION['csrf_token'])) {
            $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
        }
        return $_SESSION['csrf_token'];
    }
    function getCaptchaQuestion() {
        $questions = [
            ['question' => 'Combien font 2 + 3 ?', 'answer' => '5'],
            ['question' => 'Quelle est la capitale de la France ?', 'answer' => 'Paris'],
            ['question' => 'Combien de jours dans une semaine ?', 'answer' => '7']
        ];
        $index = array_rand($questions);
        $_SESSION['captcha_answer'] = $questions[$index]['answer'];
        return $questions[$index]['question'];
    }
    function getCaptchaAnswer() {
        return $_SESSION['captcha_answer'] ?? '';
    }
    ?> //-->
    <header>
        <h1>West’Erdre fest : une journée de concerts et danse</h1>
        <p>Le festival GRATUIT de la rentrée à ne pas manquer à la Chapelle sur Erdre</p>
 <!--       <a href="https://mechuta.bandcamp.com/track/wow" target="_blank" rel="noopener" aria-label="Page Bandcamp de Mechuta" class="btn">Écouter sur Bandcamp</a> -->
    </header>
    <nav>
        <div class="nav-container">
            <div class="logo">Mechuta</div>
            <div class="burger" onclick="toggleMenu()">☰</div>
            <ul class="nav-menu">
               <li><a href="https://www.mechuta.com/mechuta-a-propos.html">À propos</a></li>
                <li><a href="#music">Musique</a></li>
                <li><a href="#concerts">Concerts</a></li>
                <li><a href="https://www.mechuta.com/blog/mechuta-live-rooftop.html">Blog</a></li>
                <li><a href="https://www.mechuta.com/contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>
    <main>
        <article>
            <h2>Programmation musicale WestErdre 2026 (8ème édition)</h2>
            <div class="meta">
                <span>Publié: samedi 5 septembre 2026</span>
            </div>
            <span class="tag">LIVE</span>
            <p></p>
            <figure><img src="https://www.mechuta.com/images/westerdre.jpg" alt="WestErdre" loading="lazy"></figure>


<h3>La prog musicale :</h3>
<div style="overflow-x:auto;">
  <table style="width:100%; border-collapse: collapse; font-family: Arial, sans-serif;">
    <caption style="caption-side: top; text-align: left; font-weight: bold; padding: 10px;">Heures de passage des artistes</caption>
    <thead>
      <tr style="background-color: #333; color: #fff;">
        <th style="padding: 10px;">&#128337; Heure</th>
        <th style="padding: 10px;">&#127925; Style</th>
        <th style="padding: 10px;">&#127908; Groupe</th>
        <th style="padding: 10px;">&#128205; Ville</th>
        <th style="padding: 10px;">&#128241; Réseaux</th>
      </tr>
    </thead>
    <tbody>
      <tr style="background-color: #f9f9f9; color: #000;">
        <td style="padding: 10px;">15h30</td>
        <td style="padding: 10px; background-color: #ffe4e1;">&#127925; Reprises Rock</td>
        <td style="padding: 10px;"><strong>4ZEM</strong></td>
        <td style="padding: 10px;">Nantes</td>
        <td style="padding: 10px; text-align: center;">
 <a href="https://www.facebook.com/QUATREZEM/" target="_blank" title="Facebook" rel="noopener">&#128100;</a>
                       </td>
      </tr>
      <tr style="background-color: #f9f9f9; color: #000;">
        <td style="padding: 10px;">16h30</td>
        <td style="padding: 10px; background-color: #d0f0c0;">&#127757; Chanson</td>
        <td style="padding: 10px;"><strong>BABAKAR</strong></td>
        <td style="padding: 10px;">Nantes</td>
        <td style="padding: 10px; text-align: center;">
         <a href="https://www.facebook.com/babakar.officiel/" target="_blank" title="Facebook" rel="noopener">&#128100;</a>
                
        </td>
      </tr>
      <tr style="background-color: #f9f9f9; color: #000;">
        <td style="padding: 10px;">17h45</td>
        <td style="padding: 10px; background-color: #add8e6;">&#9889; Hard Rock FM</td>
        <td style="padding: 10px;"><strong>LEMON PUNCH</strong></td>
        <td style="padding: 10px;">Bordeaux</td>
        <td style="padding: 10px; text-align: center;">
          <a href="https://lemonpunch.fr/" target="_blank" title="Official website" rel="noopener">&#11088;</a>
 <a href="https://www.instagram.com/lemon_punch_off/" target="_blank" title="Instagram" rel="noopener">&#127748;</a>
             <a href="https://www.facebook.com/LemonPunchMusic/" target="_blank" title="Facebook" rel="noopener">&#128100;</a>
       <a href="https://www.youtube.com/@LEMONPUNCHOFF" target="_blank" title="YouTube" rel="noopener">&#127916;</a>
 <a href="https://open.spotify.com/intl-fr/artist/2S3xyCjHbAYcKt2pP6nwgR" target="_blank" title="Spotify" rel="noopener">&#127925;</a>

        </td>
      </tr>
      <tr style="background-color: #f9f9f9; color: #000;">
        <td style="padding: 10px;">19h00</td>
        <td style="padding: 10px; background-color: #ffeb99;">&#127881; Hip Hop</td>
        <td style="padding: 10px;"><strong>SHADEBLAUCK</strong></td>
        <td style="padding: 10px;">Nantes</td>
        <td style="padding: 10px; text-align: center;">
        <a href="https://shadeblauck.com/" target="_blank" title="site officiel" rel="noopener">&#11088;</a>
<a href="https://www.instagram.com/shadeblauck/" target="_blank" title="YouTube"  rel="noopener">&#127748;</a>
<a href="https://www.youtube.com/channel/UCzxNJAVSgpBdhJPfenDDluQ" target="_blank" title="YouTube" rel="noopener">&#127916;</a>
<a href="https://www.facebook.com/shadeblauck/" target="_blank" title="Facebook" rel="noopener">&#128100;</a>

                  </td>
      </tr>
      <tr style="background-color: #f9f9f9; color: #000;">
        <td style="padding: 10px;">21h15</td>
        <td style="padding: 10px; background-color: #ffa07a;">&#128293; Musique Mandingue du Mali</td>
        <td style="padding: 10px;"><strong>MALI BLUES</strong></td>
        <td style="padding: 10px;">Nantes</td>
        <td style="padding: 10px; text-align: center;">
          
<a href="https://maliblues.fr/" target="_blank" title="site officiel" rel="noopener">&#11088;</a>
<a href="https://www.facebook.com/maliblues44" target="_blank" title="YouTube" rel="noopener">&#127916;</a>


        </td>
      </tr>
      <tr style="background-color: #f9f9f9; color: #000;">
        <td style="padding: 10px;">22h45</td>
        <td style="padding: 10px; background-color: #d8bfd8;">&#127811; Ska</td>
        <td style="padding: 10px;"><strong>NAO</strong></td>
        <td style="padding: 10px;">Les Touches (44)</td>
        <td style="padding: 10px; text-align: center;">
          <a href="https://www.facebook.com/groupe.NAO44" target="_blank" title="Facebook" rel="noopener">&#128100;</a>
         <a href="https://www.youtube.com/channel/UCS_qHQC9ZzA1PB07fkQc4Xw" target="_blank" title="YouTube" rel="noopener">&#127916;</a>
<a href="https://naobzh.bandcamp.com/album/ska-contact" target="_blank" title="Bandcamp" rel="noopener">&#127925;</a>
<a href="https://open.spotify.com/intl-fr/artist/3b9OcOAFGLIGBE7xKMv2bA"  target="_blank" title="Spotify" rel="noopener">&#127925;</a>
<a href="https://www.deezer.com/fr/artist/14226777"  target="_blank" title="Deeze" rel="noopener">&#127925;</a>

        </td>
      </tr>

  <tr style="background-color: #f9f9f9; color: #000;">
        <td style="padding: 10px;">22h45</td>
        <td style="padding: 10px; background-color: #d8bfd8;">&#127811; Rap</td>
        <td style="padding: 10px;"><strong>TAYMON</strong></td>
        <td style="padding: 10px;">Nantes ?</td>
        <td style="padding: 10px; text-align: center;">&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>



<h3>Prog des animations</h3>
<div style="overflow-x:auto;">
  <table style="width:100%; border-collapse: collapse; font-family: Arial, sans-serif;">
    <caption style="caption-side: top; text-align: left; font-weight: bold; padding: 10px;">Animations artistiques</caption>
    <thead>
      <tr style="background-color: #333; color: #fff;">
        <th style="padding: 10px;">&#128337; Heure</th>
        <th style="padding: 10px;">&#128111; Type</th>
        <th style="padding: 10px;">&#127917; Groupe</th>
   <th style="padding: 10px;">Liens web</th>
       
      </tr>
    </thead>
    <tbody>
      <tr style="background-color: #f9f9f9; color: #000;">
        <td style="padding: 10px;">18h30</td>
        <td style="padding: 10px; background-color: #ffe4e1;">Spectacle de danse</td>
        <td style="padding: 10px;"><strong>COLLECTIF 7.8.3</strong></td>
 <td style="padding: 10px; text-align: center;">
<a href="https://www.783-nantes.com/" target="_blank" title="site officiel" rel="noopener">&#11088;</a>
<a href="https://www.facebook.com/collectif783/" target="_blank" title="Facebook" rel="noopener">&#128100;</a>
</td>
         </tr>
     
      <tr style="background-color: #f9f9f9; color: #000;">
        <td style="padding: 10px;">20h</td>
        <td style="padding: 10px; background-color: #ffeb99;">Danse</td>
        <td style="padding: 10px;"><strong>HESTIA</strong></td>

 <td style="padding: 10px; text-align: center;">
          <a href="https://www.instagram.com/hestiadanse/" target="_blank" title="YouTube"  rel="noopener">&#127748;</a>
         <a href="https://www.facebook.com/p/Atelier-Hestia-100068310097229/" target="_blank" title="Facebook" rel="noopener">&#128100;</a>
        </td>


      </tr>
    </tbody>
  </table>
</div>


<h3>Facilités sur site du fest</h3>
<p>Même si on peu pratiquement parler d’un “mini-festival” puisqu’il tient sur le green du Château de l’Hôpitau, il propose les commodités habituelles et incontournables : </p>
<h4>Restauration : grillades, frites, plats cuisinés et crêpes....</h4>
<h4>Bar : café, bière, soft drinks...</h4>
<p>Toilettes sèches</p>



  <section class="related-articles">
                <h3>Lire aussi</h3>
                <ul>
                    <li><a href="mechuta-chapelle-sur-erdre.html">Mechuta à La Chapelle sur Erdre</a></li>
                    <li><a href="mechuta-live-rooftop.html">Mechuta live sur le rooftop nantais</a></li>
                </ul>
            </section>

            <div class="share-buttons">
                <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.mechuta.com%2Fblog%2Flive-on-the-rooftop&text=Decouvrez%20le%20live%20explosif%20de%20Mechuta%20sur%20un%20rooftop%20nantais%20%21&via=mechuta" target="_blank" rel="noopener" aria-label="Partager sur Twitter"><i class="fab fa-twitter"></i></a>
                <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.mechuta.com/blog/live-on-the-rooftop" target="_blank" rel="noopener" aria-label="Partager sur Facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.mechuta.com%2Fblog%2Flive-on-the-rooftop&title=Live%20on%20the%20Rooftop%20-%20Mechuta&summary=Session%20live%20de%20Mechuta%20sur%20un%20rooftop%20nantais" target="_blank" rel="noopener" aria-label="Partager sur LinkedIn"><i class="fab fa-linkedin-in"></i></a>
            </div>
            <section class="comments-section">
                <h3>Commentaires</h3>
                <form class="comment-form" id="comment-form" action="submit-comment.php?article=live-on-the-rooftop" method="POST">
                    <input type="hidden" name="csrf_token" value="<!-- <?php echo generateCsrfToken(); ?> //-->">
                    <input type="text" name="name" placeholder="Votre nom" required maxlength="50" pattern="[A-Za-zÀ-ÿ\s\-']{2,50}" aria-label="Nom" title="Nom : 2 à 50 caractères, lettres et espaces uniquement">
                    <textarea name="comment" placeholder="Votre commentaire" required maxlength="500" minlength="10" aria-label="Commentaire" title="Commentaire : 10 à 500 caractères"></textarea>
                    <div class="rating-field">
                        <label>Évaluation :</label>
                        <div class="rating-stars" role="radiogroup" aria-label="Note de 1 à 5 étoiles">
                            <span class="empty" data-value="1" role="radio" aria-checked="false">☆</span>
                            <span class="empty" data-value="2" role="radio" aria-checked="false">☆</span>
                            <span class="empty" data-value="3" role="radio" aria-checked="false">☆</span>
                            <span class="empty" data-value="4" role="radio" aria-checked="false">☆</span>
                            <span class="empty" data-value="5" role="radio" aria-checked="false">☆</span>
                        </div>
                        <input type="hidden" name="rating" id="rating">
                    </div>
                    <div class="captcha">
                        <label for="captcha"><!-- <?php echo getCaptchaQuestion(); ?> //--></label>
                        <input type="text" name="captcha" id="captcha" required aria-label="Réponse au CAPTCHA" placeholder="Entrez la réponse">
                        <input type="hidden" name="captcha_answer" value="<!-- <?php echo getCaptchaAnswer(); ?> //-->">
                    </div>
                    <button type="submit">Envoyer</button>
                </form>
                <div class="comment-list" id="comment-list"></div>
            </section>
            <section class="related-articles">
                <h3>Lire aussi</h3>
                <ul>
                    <li><a href="https://www.mechuta.com/blog/mechuta-chapelle-sur-erdre.html">Concert à La Chapelle sur Erdre</a></li>
                    <li><a href="https://www.mechuta.com/blog/mechuta-aperos-musique-blesle-2025.html">Live aux Apéros Musique de Blesle</a></li>
                </ul>
            </section>
            <a href="https://www.mechuta.com/blog/" class="back-link">Retour au blog</a>
        </article>
    </main>
    <footer>
        <ul>
<li><a href="https://www.instagram.com/mechutaband/" target="_blank" rel="noopener" aria-label="Compte Instagram Mechuta"><i class="fab fa-instagram"></i><span class="visually-hidden">Mechuta Insta</span></a></li>
            <li><a href="https://www.youtube.com/@mechuta9832" target="_blank" rel="noopener" aria-label="Chaîne YouTube de Mechuta"><i class="fab fa-youtube"></i><span class="visually-hidden">Mechuta YouTube</span></a></li>
            <li><a href="https://mechuta.bandcamp.com" target="_blank" rel="noopener" aria-label="Page Bandcamp de Mechuta"><i class="fab fa-bandcamp"></i><span class="visually-hidden">Mechuta Bandcamp</span></a></li>
            <li><a href="https://www.facebook.com/people/Mechuta-Music-Band/61559448877428/" target="_blank" rel="noopener" aria-label="Page Facebook de Mechuta"><i class="fab fa-facebook-f"></i><span class="visually-hidden">Page Mechuta Facebook Music</span></a></li>
            <li><a href="https://x.com/mechuta" target="_blank" rel="noopener" aria-label="Profil Twitter de Mechuta"><i class="fab fa-twitter"></i><span class="visually-hidden">Mechuta Twitter</span></a></li>
            <li><a href="https://soundcloud.com/neran-mechuta" target="_blank" rel="noopener" aria-label="Profil SoundCloud de Mechuta"><i class="fab fa-soundcloud"></i><span class="visually-hidden">Mechuta SoundCloud</span></a></li>
            <li><a href="https://www.linkedin.com/posts/growthacking_mechuta-tv-%C3%A9pisode-2-jam-improvisation-activity-6782271349722349568-bWj2/" target="_blank" rel="noopener" aria-label="Profil LinkedIn de Mechuta"><i class="fab fa-linkedin-in"></i><span class="visually-hidden">LinkedIn</span></a></li>
            <li><a href="https://linkaband.com/mechuta" target="_blank" rel="noopener" aria-label="Profil Linkaband de Mechuta"><i class="fab fa-linkaband"></i><span class="visually-hidden">Mechuta Linkaband</span></a></li>
        </ul>
        <p>© 2025 Mechuta | <a href="https://www.mechuta.com/mechuta-mentions.html">Mentions légales</a> | <a href="#">Politique de confidentialité</a></p>
    </footer>
 
    <script>
        // Menu burger
        function toggleMenu() {
            document.querySelector('.nav-menu').classList.toggle('active');
        }

        // Canvas background
        window.addEventListener('load', () => {
            const body = document.body;
            const canvasCount = 15;
            const shapes = [
                { type: 'triangle', color: 'rgba(153, 51, 153, 0.5)' },
                { type: 'circle', color: 'rgba(204, 204, 204, 0.3)' },
                { type: 'rect', color: 'rgba(255, 255, 255, 0.2)' },
                { type: 'polygon', color: 'rgba(52, 0, 52, 0.5)' }
            ];

            for (let i = 0; i < canvasCount; i++) {
                const canvas = document.createElement('canvas');
                canvas.className = 'background-canvas';
                const ctx = canvas.getContext('2d');
                const size = Math.random() * 300 + 100;
                canvas.width = size;
                canvas.height = size;
                canvas.style.left = `${Math.random() * (window.innerWidth - size)}px`;
                canvas.style.top = `${Math.random() * (document.body.scrollHeight - size)}px`;
                const shape = shapes[Math.floor(Math.random() * shapes.length)];
                ctx.fillStyle = shape.color;

                if (shape.type === 'triangle') {
                    ctx.beginPath();
                    ctx.moveTo(size / 2, 0);
                    ctx.lineTo(size, size);
                    ctx.lineTo(0, size);
                    ctx.closePath();
                    ctx.fill();
                } else if (shape.type === 'circle') {
                    ctx.beginPath();
                    ctx.arc(size / 2, size / 2, size / 2 - 10, 0, Math.PI * 2);
                    ctx.fill();
                } else if (shape.type === 'rect') {
                    ctx.fillRect(10, 10, size - 20, size - 20);
                } else if (shape.type === 'polygon') {
                    ctx.beginPath();
                    ctx.moveTo(size / 2, 0);
                    ctx.lineTo(size, size / 3);
                    ctx.lineTo(size * 0.75, size);
                    ctx.lineTo(size / 4, size);
                    ctx.closePath();
                    ctx.fill();
                }
                body.appendChild(canvas);
            }

            // Lazy-load iframes
            const iframes = document.querySelectorAll('iframe[loading="lazy"]');
            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const iframe = entry.target;
                        iframe.src = iframe.dataset.src;
                        observer.unobserve(iframe);
                    }
                });
            }, { rootMargin: '100px' });
            iframes.forEach(iframe => observer.observe(iframe));

            // Load comments dynamically

/*
            fetch('comments-live-on-the-rooftop.json')
                .then(response => response.ok ? response.json() : [])
                .then(comments => {
                    const commentList = document.getElementById('comment-list');
                    comments.forEach(comment => {
                        const commentDiv = document.createElement('div');
                        commentDiv.className = 'comment';
                        commentDiv.innerHTML = `
                            <p class="author">${comment.name}</p>
                            <p class="date">${new Date(comment.date * 1000).toLocaleString('fr-FR', { dateStyle: 'medium', timeStyle: 'short' })}</p>
                            <p class="rating">${'★'.repeat(comment.rating)}${'☆'.repeat(5 - comment.rating)}</p>
                            <p>${comment.comment}</p>
                        `;
                        commentList.appendChild(commentDiv);
                    });
                })
                .catch(() => {}); // No comments if file doesn't exist
*/

            // Star rating system
            const stars = document.querySelectorAll('.rating-stars span');
            const ratingInput = document.getElementById('rating');
            stars.forEach(star => {
                star.addEventListener('click', () => {
                    const value = star.dataset.value;
                    ratingInput.value = value;
                    stars.forEach(s => {
                        s.classList.toggle('filled', s.dataset.value <= value);
                        s.classList.toggle('empty', s.dataset.value > value);
                        s.setAttribute('aria-checked', s.dataset.value <= value);
                    });
                });
            });
        });

        // Comment form validation
        document.getElementById('comment-form').addEventListener('submit', function(e) {
            const name = this.querySelector('input[name="name"]').value;
            const comment = this.querySelector('textarea[name="comment"]').value;
            const rating = this.querySelector('input[name="rating"]').value;
            const captcha = this.querySelector('input[name="captcha"]').value;
            const captchaAnswer = this.querySelector('input[name="captcha_answer"]').value;
            let error = '';

            if (!/^[A-Za-zÀ-ÿ\s\-']{2,50}$/.test(name)) {
                error = 'Le nom doit contenir 2 à 50 caractères (lettres, espaces, tirets, apostrophes).';
            } else if (comment.length < 10 || comment.length > 500) {
                error = 'Le commentaire doit contenir 10 à 500 caractères.';
            } else if (!rating || !['1', '2', '3', '4', '5'].includes(rating)) {
                error = 'Veuillez sélectionner une note en cliquant sur une étoile.';
            } else if (captcha.trim() !== captchaAnswer) {
                error = 'Réponse incorrecte au CAPTCHA.';
            }

            if (error) {
                e.preventDefault();
                let errorDiv = this.querySelector('.error');
                if (!errorDiv) {
                    errorDiv = document.createElement('div');
                    errorDiv.className = 'error';
                    this.appendChild(errorDiv);
                }
                errorDiv.textContent = error;
            } else {
                this.querySelector('.error')?.remove();
            }
        });

        // Service Worker

/*
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js');
            });
        } */
    </script>
</body>
</html>

A propos d'Outiref

Contact / Signaler un bug

FAQ

Crédits et Mentions Légales

Audit SEO par Abondance

Suivez nous sur...

Un site du Réseau Abondance

Agence SEO Neper
Formations SEO NEPER
Googlefight
Cabinet de conseil en IA - Neper AI
La météo du SEO
Klemo