```php
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Fonction pour gérer les sous-menus
    function setupDropdownMenus() {
        // Gestion des menus déroulants principaux
        document.querySelectorAll('.dropdown').forEach(function(dropdown) {
            dropdown.addEventListener('mouseenter', function() {
                this.querySelector('.dropdown-menu').classList.add('show');
            });
            
            dropdown.addEventListener('mouseleave', function() {
                this.querySelector('.dropdown-menu').classList.remove('show');
            });
        });
        
        // Gestion des sous-menus
        document.querySelectorAll('.dropdown-submenu').forEach(function(submenu) {
            submenu.addEventListener('mouseenter', function() {
                // Trouve le menu déroulant à l'intérieur de cet élément
                let dropdownMenu = this.querySelector('.dropdown-menu');
                if (dropdownMenu) {
                    dropdownMenu.classList.add('show');
                    
                    // Ajustement de la position si nécessaire
                    const rect = dropdownMenu.getBoundingClientRect();
                    if (rect.right > window.innerWidth) {
                        dropdownMenu.classList.add('dropdown-menu-end');
                    }
                }
            });
            
            submenu.addEventListener('mouseleave', function() {
                let dropdownMenu = this.querySelector('.dropdown-menu');
                if (dropdownMenu) {
                    dropdownMenu.classList.remove('show');
                }
            });
        });
        
        // Pour les appareils mobiles - toggle sur clic
        document.querySelectorAll('.dropdown-toggle').forEach(function(toggle) {
            toggle.addEventListener('click', function(e) {
                const isSubmenu = this.parentElement.classList.contains('dropdown-submenu');
                
                if (window.innerWidth < 992 || isSubmenu) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const dropdownMenu = this.nextElementSibling;
                    if (dropdownMenu && dropdownMenu.classList.contains('dropdown-menu')) {
                        const isOpen = dropdownMenu.classList.contains('show');
                        
                        // Ferme les autres sous-menus du même niveau
                        const siblings = Array.from(this.parentElement.parentElement.children);
                        siblings.forEach(sibling => {
                            if (sibling !== this.parentElement) {
                                const siblingMenu = sibling.querySelector('.dropdown-menu');
                                if (siblingMenu) siblingMenu.classList.remove('show');
                            }
                        });
                        
                        // Toggle ce menu
                        if (isOpen) {
                            dropdownMenu.classList.remove('show');
                        } else {
                            dropdownMenu.classList.add('show');
                        }
                    }
                }
            });
        });
    }
    
    // Initialisation des menus déroulants
    setupDropdownMenus();
    
    // Fermeture des menus lors du clic en dehors
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.dropdown')) {
            document.querySelectorAll('.dropdown-menu.show').forEach(function(menu) {
                menu.classList.remove('show');
            });
        }
    });
});
</script>
<!-- ?refresh= -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">Agenda des actions pour les victimes</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="/?t=date_debut" id="navbarDropdownDates" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dates</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownDates">
                        <li><a class="dropdown-item" href="/?t=date_debut">Tri par dates</a></li>
                        <li><a class="dropdown-item" href="/?t=recurrents">Actions toutes les semaines</a></li>
                        <li><a class="dropdown-item" href="/?tc=recents">Ajouts récents</a></li>
                                                <li><a class="dropdown-item" target="_blank" href="/listecsv.php">Export fichier Excel</a></li>
                    </ul>
                </li>
                
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="/?t=organisateur" id="navbarDropdownOrg" role="button" data-bs-toggle="dropdown" aria-expanded="false">Organisateurs</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownOrg">
                        <li><a class="dropdown-item" href="/?t=organisateur">Tous</a></li>
                        <li><a class='dropdown-item' href='/?o=Collectif+de+Sarreguemines+-+R%C3%A9sistants+VIAC'>Collectif de Sarreguemines - Résistants VIAC</a></li><li><a class='dropdown-item' href='/?o=CorseHumanis'>CorseHumanis</a></li><li><a class='dropdown-item' href='/?o=Eliane+CORTI+NOPASSAIX'>Eliane CORTI NOPASSAIX</a></li><li><a class='dropdown-item' href='/?o=Les+humains+Annecy-74+'>Les humains Annecy-74 </a></li><li><a class='dropdown-item' href='/?o=Les+Masques+Blancs+44'>Les Masques Blancs 44</a></li><li><a class='dropdown-item' href='/?o=Les+r%C3%A9sistants+VIAC+Luxembourgeois'>Les résistants VIAC Luxembourgeois</a></li>                    </ul>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="/?t=ville" id="navbarDropdownVilles" role="button" data-bs-toggle="dropdown" aria-expanded="false">Villes</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownVilles">
                        <li><a class="dropdown-item" href="/?t=ville">Toutes</a></li>
                        <li><a class="dropdown-item" href="/geolocalisation.php">Carte des villes géolocalisées</a></li>
                        <li><a class='dropdown-item' href='/?v=AIX+la+Rotonde'>AIX la Rotonde</a></li><li><a class='dropdown-item' href='/?v=Annecy'>Annecy</a></li><li><a class='dropdown-item' href='/?v=BASTIA'>BASTIA</a></li><li><a class='dropdown-item' href='/?v=Luxembourg'>Luxembourg</a></li><li><a class='dropdown-item' href='/?v=Nantes'>Nantes</a></li><li><a class='dropdown-item' href='/?v=Sarreguemines'>Sarreguemines</a></li>                    </ul>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="/?t=departement" id="navbarDropdownDepts" role="button" data-bs-toggle="dropdown" aria-expanded="false">Départements</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownDepts">
                        <li><a class="dropdown-item" href="/?t=departement">Tous</a></li>
                        <li><a class="dropdown-item" href="/geolocalisation.php">Carte géolocalisée</a></li>
                        <li><a class='dropdown-item' href='/?dp=13'>13</a></li><li><a class='dropdown-item' href='/?dp=2B'>2B</a></li><li><a class='dropdown-item' href='/?dp=44'>44</a></li><li><a class='dropdown-item' href='/?dp=57'>57</a></li><li><a class='dropdown-item' href='/?dp=74'>74</a></li>                    </ul>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="/?t=pays" id="navbarDropdownPays" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pays</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownPays">
                        <li><a class="dropdown-item" href="/?t=pays">Tous</a></li>
                        <li><a class="dropdown-item" href="/geolocalisation.php">Carte géolocalisée</a></li>
                        <li><a class='dropdown-item' href='/?p=France'>France</a></li><li><a class='dropdown-item' href='/?p=Luxembourg'>Luxembourg</a></li>                    </ul>
                </li>

                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="/?t=type_manifestation" id="navbarDropdownManif" role="button" data-bs-toggle="dropdown" aria-expanded="false">Manifestations</a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownManif">
                        <li><a class="dropdown-item" href="/?t=type_manifestation">Toutes</a></li>
                        <li><a class='dropdown-item' href='/?m=Exposition+Statique'>Exposition Statique</a></li><li><a class='dropdown-item' href='/?m=Manifestation+statique+ou+d%C3%A9ambulatoire'>Manifestation statique ou déambulatoire</a></li><li><a class='dropdown-item' href='/?m=Rassemblement+statique+-+Ap%C3%A9ro+citoyen'>Rassemblement statique - Apéro citoyen</a></li><li><a class='dropdown-item' href='/?m=Sitting-Expo+Statique'>Sitting-Expo Statique</a></li><li><a class='dropdown-item' href='/?m=Statique+avec+les+portraits+des+victimes%2C+'>Statique avec les portraits des victimes, </a></li>                    </ul>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="enregistrement.php">Ajout d'un événement</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="search.php">Rechercher un événement</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="email.php">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<style>

/* Style de base pour les menus déroulants */
.dropdown-menu {
    margin: 0;
    padding: 0.5rem 0;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Style pour les sous-menus */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -0.5rem;
    display: none;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu > .dropdown-toggle:active + .dropdown-menu,
.dropdown-submenu > .dropdown-menu.show {
    display: block;
}

/* Style pour le toggle des sous-menus */
.dropdown-submenu .dropdown-toggle::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 0.5rem;
    top: 50%;
    margin-top: -0.3em;
}

/* Ajustements pour les écrans mobiles */
@media (max-width: 991.98px) {
    .dropdown-submenu > .dropdown-menu {
        left: 0;
        margin-left: 1rem;
        width: calc(100% - 2rem);
        position: relative;
        box-shadow: none;
        border-left: 1px solid rgba(0, 0, 0, 0.125);
    }
    
    .dropdown-submenu .dropdown-toggle::after {
        transform: none;
    }
}

/* Évite que les longs textes ne débordent */
.dropdown-item {
    white-space: normal;
    word-wrap: break-word;
    padding-right: 2rem;
}

/* Correction pour les menus qui pourraient déborder à droite */
.dropdown-menu-end {
    right: 100%;
    left: auto !important;
}

/* Effet de survol */
.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: rgba(0, 123, 255, 0.1);
}
</style>
<div style="margin-top: 70px;"><!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- jQuery UI CSS -->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css">
  <title>Recherche d'Événements</title>
  <style>
    :root {
      /* Palette chaleureuse */
      --primary-color:   #D96E1E;  /* orange brûlé */
      --primary-hover:   #C25B00;  /* orange foncé */
      --item-hover-bg:   #FFE5B4;  /* pêche clair */
      --bg-body:         #FFF8F0;  /* ivoire très clair */
      --autocomplete-bg: #FFFCF5;  /* crème pour autocomplete */
    }

    body {
      background: var(--bg-body);
      padding: 2rem;
    }

    .form-label {
      font-weight: 500;
    }

    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 .2rem rgba(217,110,30,.25);
    }

    .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      transition: background-color .3s, border-color .3s;
    }
    .btn-primary:hover {
      background-color: var(--primary-hover);
      border-color: var(--primary-hover);
    }

    .ui-autocomplete {
      background: var(--autocomplete-bg);
      border: 1px solid #ccc;
      max-height: 200px;
      overflow-y: auto;
      z-index: 1051;
    }
    .ui-menu-item-wrapper:hover {
      background-color: var(--item-hover-bg);
    }

    /* Résultats */
    #results .list-group-item {
      cursor: pointer;
      transition: background-color .2s;
    }
    #results .list-group-item:hover {
      background-color: var(--item-hover-bg);
    }
    /* On désactive le lien pour laisser l'item gérer le clic */
    #results .list-group-item a {
      pointer-events: none;
      float: right;
    }

    /* Autre utilitaire */
    .hauteur-20px {
      height: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2 class="mb-4 text-center" style="color: var(--primary-color);">
      Rechercher un événement
    </h2>
    <form id="search-form" class="row gy-3 gx-2">
      <div class="col-md-4">
        <label for="date" class="form-label">Date</label>
        <input type="text" name="date" id="date" class="form-control"
               placeholder="YYYY-MM ou YYYY-MM-DD">
      </div>
      <div class="col-md-4">
        <label for="ville" class="form-label">Ville</label>
        <input type="text" name="ville" id="ville" class="form-control"
               placeholder="Ex : Paris">
      </div>
      <div class="col-md-4">
        <label for="type_manifestation" class="form-label">
          Type de manifestation
        </label>
        <input type="text" name="type" id="type_manifestation"
               class="form-control" placeholder="Ex : Conférence">
      </div>
      <div class="col-12 text-center">
        <button type="submit" class="btn btn-primary px-5">
          Rechercher
        </button>
      </div>
    </form>
    <div id="results" class="mt-4"></div>
    <div class="hauteur-20px"></div>
  </div>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- jQuery UI -->
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    $(function() {
      // Datepicker
      $('#date').datepicker({ dateFormat: 'yy-mm-dd' });

      // Autocomplete Ville
      $('#ville').autocomplete({
        minLength: 0,
        delay: 10,
        source(request, response) {
          $.ajax({
            url: '/autocomplete/ville.php',
            dataType: 'json',
            data: { q: request.term },
            success: response,
            error: () => response([])
          });
        },
        select(event, ui) {
          $(this).val(ui.item.value);
          $('#search-form').submit();
        }
      });

      // Autocomplete Type de manifestation
      $('#type_manifestation').autocomplete({
        minLength: 0,
        delay: 10,
        source(request, response) {
          $.ajax({
            url: '/autocomplete/type_manifestation.php',
            dataType: 'json',
            data: { q: request.term },
            success: response,
            error: () => response([])
          });
        },
        select(event, ui) {
          $(this).val(ui.item.value);
          $('#search-form').submit();
        }
      });

      // Soumission du formulaire
      $('#search-form').on('submit', function(e) {
        e.preventDefault();
        const date  = $('#date').val().trim();
        const ville = $('#ville').val().trim();
        const type  = $('#type_manifestation').val().trim();
        const url   = `recherche.php?action=search&date=${encodeURIComponent(date)}`
                    + `&ville=${encodeURIComponent(ville)}`
                    + `&type=${encodeURIComponent(type)}`;
        fetch(url)
          .then(res => res.json())
          .then(events => {
            const $r = $('#results').empty();
            if (!events.length) {
              $r.append('<p class="text-muted">Aucun événement trouvé.</p>');
              return;
            }
            const $ul = $('<ul/>', { class: 'list-group' });
            events.forEach(e => {
              const href = `liste.php?id=${e.id}`;
              const $li = $('<li/>', {
                class: 'list-group-item d-flex justify-content-between align-items-center',
                'data-href': href
              });
              $li.append(`
                <div>
                  <strong>${e.type_manifestation}</strong><br>
                  <small>${e.date_debut} — ${e.ville}</small>
                </div>
              `);
              // bouton purement visuel
              const $a = $('<a/>', {
                href: href,
                class: 'btn btn-sm btn-outline-primary'
              }).text('Voir détail');
              $li.append($a);
              $ul.append($li);
            });
            $r.append($ul);
          })
          .catch(err => console.error('Erreur recherche :', err));
      });

      // Rendre toute la ligne cliquable
      $('#results').on('click', '.list-group-item', function() {
        const url = $(this).data('href');
        if (url) window.location.href = url;
      });
    });
  </script>
<div class="citation-box">
    <div class="citation-container">
        <div class="citation-text">Chargement…</div>
        <div class="citation-author"></div>
        <button class="new-quote-btn">Nouvelle citation</button>
    </div>
</div>

<style>
    .citation-box {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .citation-container {
        background: #ffffff;
        padding: 2rem;
        max-width: 600px;
        margin: auto;
        text-align: center;
        border-radius: 1rem;
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
        color: #333;
    }
    .citation-text {
        font-size: 1.4rem;
        font-style: italic;
        margin-bottom: 1rem;
    }
    .citation-author {
        font-size: 1rem;
        font-weight: bold;
        color: #555;
    }
    .new-quote-btn {
        margin-top: 1.5rem;
        background-color: #333;
        color: #fff;
        border: none;
        padding: 0.7rem 1.5rem;
        border-radius: 8px;
        font-size: 1rem;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    .new-quote-btn:hover {
        background-color: #555;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const box = document.querySelector('.citation-box');
    const text = box.querySelector('.citation-text');
    const author = box.querySelector('.citation-author');
    const button = box.querySelector('.new-quote-btn');

    function fetchCitation() {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'get_citation.php?tt=' + new Date().getTime(), true);
        xhr.setRequestHeader('Cache-Control', 'no-cache');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                try {
                    const data = JSON.parse(xhr.responseText);
                    text.textContent = '« ' + data.citation + ' »';
                    author.textContent = '— ' + data.auteur;
                } catch (e) {
                    text.textContent = 'Erreur de lecture des données.';
                    author.textContent = '';
                    console.error('JSON error:', e);
                }
            }
        };
        xhr.send();
    }

    button.addEventListener('click', fetchCitation);
    fetchCitation(); // première citation au chargement
});
</script>
    <footer class="text-center mt-4 p-3" style="background-color: #f8f9fa;margin-bottom: 80px;">
        <img src="images/logojms.png" alt="Logo JMS" style="width: 50px;margin-left: 10px;">
    Réalisé par Jean Marie Steinmetz (<a href=email.php>contact</a>)<br>sur une idée de <a href=https://viac19.fr target=_blank >Dominique BAUDINAUD</a>
    
    <img src="images/logoviac.png" alt="Logo CollectAsso-VIAC19" style="width: 50px; margin-right: 10px;">
</footer>

<style>

    #info {
      position: fixed;
      bottom: 0; left: 0;
      width: 100%;
      background: linear-gradient(to right, #4e54c8, #8f94fb);
      padding: 20px;
      color: #fff;
      font-family: monospace;
      line-height: 1.3em;
    }
    #count-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 10px;           /* espace entre le texte et le lien */
    }
    #event-link {
      color: #ffe066;
      text-decoration: none;
      font-size: 0.9em;
    }
    #event-link:hover {
      text-decoration: underline;
    }
    #typewriter-wrapper {
      text-align: center;
      margin-top: 5px;
    }

    /* Dès que l’écran fait 600px ou moins, on baisse la taille */
    @media only screen and (max-width: 600px) {
      #info {
        font-size: 0.6em;        /* Ajuste cette valeur à ton goût */
        line-height: 1.2em;    /* Pour garder une bonne lisibilité */
      }

      /* Tu peux aussi réduire le padding si nécessaire */
      #info {
        padding: 11px;
      }
    }    

    #typewriter {
      display: inline-block;   /* pour préserver un bloc qui ne remonte pas */
      white-space: pre;        /* place fixe par caractère */
      line-height: 1.3em;      /* hauteur constante */
      vertical-align: bottom;  /* aligne toujours en bas sans sauter */
    }






  </style>

<div id="info" style="text-align: center; font-family: monospace; font-size: 1.3em;">
  <div id="count-wrapper">
    <span id="event-count">Chargement…</span>
    <a id="event-link" href="#" target="_blank">Voir →</a>
  </div>
  <div id="typewriter-wrapper">
    <span id="typewriter"></span>
  </div>
</div>


<script>
async function fetchEventData() {
  const resp = await fetch('evenements.php');
  return await resp.json();   // { count, types: [ {id, type_manifestation}, … ] }
}

function typewriterEffect(texts, linkId, delay = 40, pause = 1500) {
  const linkEl = document.getElementById(linkId);
  let i = 0, char = 0, forward = true;

  function tick() {
    const { id, type_manifestation: word } = texts[i];

    // 1) on met à jour le href du lien
    linkEl.setAttribute('href', `liste.php?id=${id}`);
    // 2) on met à jour son texte lettre à lettre
    linkEl.textContent = word.substring(0, char);

    if (forward) {
      if (char < word.length) {
        char++;
      } else {
        forward = false;
        return setTimeout(tick, pause);
      }
    } else {
      if (char > 0) {
        char--;
      } else {
        forward = true;
        i = (i + 1) % texts.length;
      }
    }

    setTimeout(tick, delay);
  }

  tick();
}

fetchEventData().then(data => {
  // compteur fixe
  document.getElementById('event-count').textContent =
    `${data.count} événements à venir`;

  // on lance la machine à écrire, le même lien #event-link suivra la bonne id
  typewriterEffect(data.types, 'event-link', 40, 1500);
});


</script></div>