{"id":1429,"date":"2026-05-19T13:38:00","date_gmt":"2026-05-19T13:38:00","guid":{"rendered":"https:\/\/xn--lafourmilire44-4jb.fr\/?page_id=1429"},"modified":"2026-07-03T14:42:01","modified_gmt":"2026-07-03T14:42:01","slug":"reservation","status":"publish","type":"page","link":"https:\/\/xn--lafourmilire44-4jb.fr\/index.php\/reservation\/","title":{"rendered":"r\u00e9servation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1429\" class=\"elementor elementor-1429\">\n\t\t\t\t<div class=\"elementor-element elementor-element-88a7fcc e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"88a7fcc\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33706d0 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"33706d0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@latest\/dist\/tabler-icons.min.css\">\r\n<style>\r\n  .fourmiliere-header {\r\n    all: initial;\r\n    display: block;\r\n    font-family: 'Inter', sans-serif;\r\n  }\r\n  .fourmiliere-header * {\r\n    box-sizing: border-box;\r\n  }\r\n  .fh-bar {\r\n    display: flex !important;\r\n    justify-content: space-between !important;\r\n    align-items: center !important;\r\n    padding: 0 40px !important;\r\n    background: #F4F4F4 !important;\r\n    height: 72px !important;\r\n    position: sticky !important;\r\n    top: 0 !important;\r\n    z-index: 1000 !important;\r\n    width: 100% !important;\r\n  }\r\n  .fh-logo img {\r\n    height: 44px !important;\r\n    width: auto !important;\r\n    display: block !important;\r\n  }\r\n  .fh-nav {\r\n    display: flex !important;\r\n    align-items: center !important;\r\n    gap: 36px !important;\r\n  }\r\n  .fh-nav a {\r\n    font-size: 14px !important;\r\n    font-weight: 500 !important;\r\n    color: #322522 !important;\r\n    text-decoration: none !important;\r\n  }\r\n  .fh-btn-outline {\r\n    border: 1.5px solid #322522 !important;\r\n    color: #322522 !important;\r\n    padding: 8px 18px !important;\r\n    border-radius: 999px !important;\r\n    font-size: 13px !important;\r\n    text-decoration: none !important;\r\n  }\r\n  .fh-btn-filled {\r\n    background: #322522 !important;\r\n    color: #F4F4F4 !important;\r\n    padding: 8px 18px !important;\r\n    border-radius: 999px !important;\r\n    font-size: 13px !important;\r\n    text-decoration: none !important;\r\n  }\r\n  \/* RESPONSIVE MOBILE *\/\r\n  @media (max-width: 1024px) {\r\n    .fh-bar { padding: 0 20px !important; height: 64px !important; }\r\n    .fh-nav {\r\n      display: none !important;\r\n      position: absolute !important;\r\n      top: 64px !important;\r\n      left: 0 !important;\r\n      width: 100% !important;\r\n      background: #F4F4F4 !important;\r\n      flex-direction: column !important;\r\n      padding: 20px !important;\r\n      gap: 20px !important;\r\n      border-bottom: 1px solid #ddd !important;\r\n    }\r\n    .fh-nav.active { display: flex !important; }\r\n    .fh-actions { display: none !important; }\r\n    .fh-burger { display: block !important; font-size: 24px !important; cursor: pointer !important; }\r\n  }\r\n  @media (min-width: 1025px) {\r\n    .fh-burger { display: none !important; }\r\n  }\r\n<\/style>\r\n<div class=\"fourmiliere-header\">\r\n  <header class=\"fh-bar\">\r\n    <a href=\"\/\" class=\"fh-logo\">\r\n      <img decoding=\"async\" src=\"http:\/\/xn--lafourmilire44-4jb.fr\/wp-content\/uploads\/2026\/05\/logo-sans-fond@8x.png\" alt=\"La Fourmili\u00e8re\">\r\n    <\/a>\r\n    <!-- Menu Hamburger -->\r\n    <div class=\"fh-burger\" onclick=\"toggleMenu()\"><i class=\"ti ti-menu-2\"><\/i><\/div>\r\n    <nav class=\"fh-nav\" id=\"fhNav\">\r\n      <!-- Les liens pointent vers la page d'accueil (\/) puis l'ancre -->\r\n      <a href=\"\/#about\" onclick=\"toggleMenu()\">Nous d\u00e9couvrir<\/a>\r\n      <a href=\"\/#espaces\" onclick=\"toggleMenu()\">Nos espaces<\/a>\r\n      <a href=\"\/reservation\" onclick=\"toggleMenu()\">R\u00e9union<\/a>\r\n      <a href=\"\/#contact\" class=\"md:hidden font-bold\" onclick=\"toggleMenu()\">Contactez-nous<\/a>\r\n    <\/nav>\r\n    <div class=\"fh-actions\">\r\n      <a href=\"\/#espaces\" class=\"fh-btn-outline\">Voir nos espaces<\/a>\r\n      <a href=\"\/#contact\" class=\"fh-btn-filled\">Contactez-nous<\/a>\r\n    <\/div>\r\n  <\/header>\r\n<\/div>\r\n<script>\r\n  function toggleMenu() {\r\n    if(window.innerWidth <= 1024) {\r\n      document.getElementById('fhNav').classList.toggle('active');\r\n    }\r\n  }\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e75fb40 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"e75fb40\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5a8320 elementor-widget elementor-widget-html\" data-id=\"c5a8320\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@latest\/dist\/tabler-icons.min.css\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<script>\r\n    tailwind.config = {\r\n        theme: {\r\n            extend: {\r\n                colors: {\r\n                    primary: '#facc15',\r\n                    dark: '#322522',\r\n                    light: '#F4F4F4',\r\n                    eventBg: '#322522',\r\n                },\r\n                fontFamily: {\r\n                    sans: ['Inter', 'sans-serif'],\r\n                    anton: ['Anton', 'sans-serif'],\r\n                }\r\n            }\r\n        }\r\n    }\r\n<\/script>\r\n<style>\r\n    .cal-day { min-height: 100px; transition: all 0.2s; cursor: pointer; }\r\n    .cal-day:hover { background-color: #fef9c3; border-color: #facc15; }\r\n    .cal-day.active { background-color: #fef08a; border: 1px solid #facc15; }\r\n    .cal-event { padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #facc15; margin-bottom: 4px; background-color: #322522; }\r\n    .modal-overlay { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }\r\n<\/style>\r\n<div class=\"fourmiliere-reservation max-w-[1300px] mx-auto py-10 px-4 sm:px-6 lg:px-8 font-sans\">\r\n\r\n    <h1 class=\"text-4xl font-anton text-dark mb-8 uppercase tracking-wide\">R\u00e9server une salle<\/h1>\r\n    <div class=\"flex flex-col lg:flex-row gap-8 items-start\">\r\n\r\n        <!-- SIDEBAR -->\r\n        <div class=\"w-full lg:w-[320px] flex flex-col gap-6 flex-shrink-0\">\r\n            <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-6\">\r\n                <p class=\"text-xs tracking-widest text-gray-400 uppercase font-bold mb-1\">Salle<\/p>\r\n                <h2 class=\"text-2xl font-bold text-dark mb-1\">Fourme 1<\/h2>\r\n                <p class=\"text-sm text-gray-500 mb-4\">2e \u00e9tage \u00b7 B\u00e2timent A <br><span class=\"font-bold text-dark\"><i class=\"ti ti-clock\"><\/i> Ouvert de 8h \u00e0 19h<\/span><\/p>\r\n\r\n                <div class=\"inline-flex items-center gap-2 px-3 py-1 bg-green-50 border border-green-200 text-green-700 rounded-full text-xs font-bold mb-6\">\r\n                    <span class=\"w-2 h-2 rounded-full bg-green-500\"><\/span>\r\n                    DISPONIBLE\r\n                <\/div>\r\n\r\n                <div class=\"mb-4 bg-gray-50 p-3 rounded-xl border border-gray-100\">\r\n                    <p class=\"text-xs tracking-widest text-gray-400 uppercase font-bold mb-2\">Tarifs<\/p>\r\n                    <ul class=\"text-sm font-semibold text-dark space-y-1\">\r\n                        <li>\u2022 1 heure : <span class=\"text-primary font-bold bg-dark px-2 rounded\">10\u20ac<\/span><\/li>\r\n                        <li>\u2022 Demi-journ\u00e9e : <span class=\"text-primary font-bold bg-dark px-2 rounded\">19\u20ac<\/span><\/li>\r\n                        <li>\u2022 Journ\u00e9e : <span class=\"text-primary font-bold bg-dark px-2 rounded\">30\u20ac<\/span><\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n\r\n                <div class=\"flex flex-wrap gap-2\">\r\n                    <span class=\"px-3 py-1 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-600 font-medium\">Vid\u00e9o projecteur<\/span>\r\n                    <span class=\"px-3 py-1 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-600 font-medium\">\u00c9cran tactile<\/span>\r\n                    <span class=\"px-3 py-1 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-600 font-medium\">Acc\u00e8s cuisine<\/span>\r\n                    <span class=\"px-3 py-1 bg-gray-50 border border-gray-200 rounded-lg text-xs text-gray-600 font-medium\">Espaces d\u00e9tente<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- SELECTED DAY CARD -->\r\n            <div class=\"bg-white rounded-2xl shadow-sm border border-gray-100 p-6 relative min-h-[250px] flex flex-col\">\r\n                <div class=\"flex justify-between items-center mb-6 text-gray-500 text-sm font-bold uppercase tracking-wider\">\r\n                    <span id=\"selected-date-title\">S\u00c9LECTIONNEZ UN JOUR<\/span>\r\n                    <button class=\"hover:text-dark transition-colors\"><i class=\"ti ti-x\"><\/i><\/button>\r\n                <\/div>\r\n                <div id=\"day-events\" class=\"flex-1 flex flex-col items-center justify-center text-gray-400 text-sm mb-6\">\r\n                    <p class=\"text-center\">Veuillez choisir une date<br>dans le calendrier.<\/p>\r\n                <\/div>\r\n                <button onclick=\"openModal()\" class=\"w-full bg-dark text-primary font-bold py-3 px-4 rounded-xl hover:bg-opacity-90 transition-all shadow-lg mt-auto flex items-center justify-center gap-2\">\r\n                    <i class=\"ti ti-plus\"><\/i> AJOUTER UNE R\u00c9SERVATION\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- CALENDAR -->\r\n        <div class=\"flex-1 w-full bg-white rounded-2xl shadow-sm border border-gray-100 p-6 lg:p-8 relative\">\r\n            <div id=\"calendar-loading\" class=\"absolute inset-0 bg-white\/70 backdrop-blur-sm z-10 hidden flex items-center justify-center rounded-2xl\">\r\n                <div class=\"w-8 h-8 border-4 border-primary border-t-dark rounded-full animate-spin\"><\/div>\r\n            <\/div>\r\n            <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4\">\r\n                <div>\r\n                    <h2 id=\"calendar-month-title\" class=\"text-3xl font-bold text-dark transition-all\">...<\/h2>\r\n                    <p class=\"text-sm text-gray-500 mt-1\">Planning mensuel \u00b7 Salle R\u00e9union Fourme 1<\/p>\r\n                <\/div>\r\n                <div class=\"flex items-center gap-2\">\r\n                    <button onclick=\"changeMonth(-1)\" class=\"w-10 h-10 flex items-center justify-center border border-gray-200 rounded-lg hover:bg-gray-50 hover:text-dark transition-colors text-gray-600\"><i class=\"ti ti-arrow-left\"><\/i><\/button>\r\n                    <button onclick=\"resetToToday()\" class=\"px-4 h-10 flex items-center justify-center border border-gray-200 rounded-lg font-medium text-sm hover:bg-gray-50 transition-colors text-dark uppercase tracking-wider\">MOIS<\/button>\r\n                    <button onclick=\"changeMonth(1)\" class=\"w-10 h-10 flex items-center justify-center border border-gray-200 rounded-lg hover:bg-gray-50 hover:text-dark transition-colors text-gray-600\"><i class=\"ti ti-arrow-right\"><\/i><\/button>\r\n                <\/div>\r\n            <\/div>\r\n            <div>\r\n                <div class=\"grid grid-cols-7 gap-2 text-center text-xs font-bold text-gray-400 uppercase tracking-wider mb-2\">\r\n                    <div>LUN<\/div><div>MAR<\/div><div>MER<\/div><div>JEU<\/div><div>VEN<\/div><div>SAM<\/div><div>DIM<\/div>\r\n                <\/div>\r\n\r\n                <div id=\"calendar-grid\" class=\"grid grid-cols-7 gap-2 transition-opacity duration-300\">\r\n                <\/div>\r\n\r\n                <div class=\"mt-8 flex items-center gap-6 text-xs text-gray-500 font-medium\">\r\n                    <div class=\"flex items-center gap-2\"><span class=\"w-3 h-3 rounded-sm bg-dark\"><\/span> R\u00e9servation<\/div>\r\n                    <div class=\"flex items-center gap-2\"><span class=\"w-3 h-3 rounded-full border-2 border-primary\"><\/span> Aujourd'hui<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- MODAL RESERVATION -->\r\n<div id=\"reservationModal\" class=\"fixed inset-0 z-[1000] hidden modal-overlay items-center justify-center p-4 font-sans\">\r\n    <div class=\"bg-white rounded-3xl shadow-2xl w-full max-w-xl overflow-hidden relative transform transition-all\">\r\n        <button onclick=\"closeModal()\" class=\"absolute top-4 right-4 w-8 h-8 flex items-center justify-center bg-gray-100 rounded-full hover:bg-gray-200 text-gray-600 transition-colors\">\r\n            <i class=\"ti ti-x\"><\/i>\r\n        <\/button>\r\n        <div class=\"p-8 pb-0\">\r\n            <h2 class=\"text-2xl font-bold text-dark mb-2\">Finaliser la r\u00e9servation<\/h2>\r\n            <p class=\"text-gray-500 text-sm mb-6\">Salle Fourme 1 - <span id=\"modal-date-text\" class=\"font-bold text-dark bg-yellow-100 px-2 py-1 rounded\"><\/span><\/p>\r\n\r\n            <div class=\"mb-6 p-4 bg-gray-50 rounded-xl border border-gray-100\">\r\n                <p class=\"text-xs tracking-widest text-gray-400 uppercase font-bold mb-3\">D\u00e9tails de la r\u00e9servation<\/p>\r\n                <div class=\"grid grid-cols-2 gap-4 mb-3\">\r\n                    <div>\r\n                        <label class=\"block text-sm font-medium text-gray-700 mb-1\">Dur\u00e9e<\/label>\r\n                        <div class=\"relative\">\r\n                            <select id=\"modal-duree\" onchange=\"updateModalPrice()\" class=\"w-full px-4 py-2 pr-9 rounded-xl bg-white border border-gray-200 focus:outline-none focus:border-dark transition-all appearance-none\">\r\n                                <option value=\"heure\">1 heure<\/option>\r\n                                <option value=\"demi\">Demi-journ\u00e9e<\/option>\r\n                                <option value=\"jour\">Journ\u00e9e<\/option>\r\n                            <\/select>\r\n                            <i class=\"ti ti-chevron-down absolute right-3 top-1\/2 -translate-y-1\/2 text-gray-400 pointer-events-none\"><\/i>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-sm font-medium text-gray-700 mb-1\">Nombre de personnes<\/label>\r\n                        <input type=\"number\" id=\"modal-personnes\" min=\"1\" value=\"1\" oninput=\"updateModalPrice()\" class=\"w-full px-4 py-2 rounded-xl bg-white border border-gray-200 focus:outline-none focus:border-dark transition-all\">\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"flex items-center justify-between bg-dark rounded-xl px-4 py-3\">\r\n                    <span class=\"text-xs font-bold text-gray-300 uppercase tracking-wide\">Tarif estim\u00e9<\/span>\r\n                    <span id=\"modal-price\" class=\"text-xl font-bold text-primary\">10\u20ac<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"flex border-b border-gray-200 mb-6\">\r\n                <button id=\"modal-tab-email\" onclick=\"switchModalTab('email')\" class=\"flex-1 pb-4 text-center font-bold text-sm text-dark border-b-2 border-primary uppercase tracking-wide\">\r\n                    Je suis externe\r\n                <\/button>\r\n                <button id=\"modal-tab-login\" onclick=\"switchModalTab('login')\" class=\"flex-1 pb-4 text-center font-bold text-sm text-gray-400 border-b-2 border-transparent hover:text-gray-600 uppercase tracking-wide transition-colors\">\r\n                    Je suis membre\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"p-8 pt-0\">\r\n            <div id=\"modal-view-login\" class=\"hidden\">\r\n                <form onsubmit=\"handleModalSubmit(event, 'login')\" class=\"space-y-4\">\r\n                    <div>\r\n                        <label class=\"block text-sm font-medium text-gray-700 mb-1\">Email<\/label>\r\n                        <input type=\"email\" required class=\"w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:outline-none focus:border-dark focus:ring-1 focus:ring-dark transition-all\" placeholder=\"votre@email.com\">\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-sm font-medium text-gray-700 mb-1\">Mot de passe<\/label>\r\n                        <input type=\"password\" required class=\"w-full px-4 py-3 rounded-xl bg-gray-50 border border-gray-200 focus:outline-none focus:border-dark focus:ring-1 focus:ring-dark transition-all\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\r\n                    <\/div>\r\n                    <button type=\"submit\" class=\"w-full bg-dark text-primary font-bold py-3 px-4 rounded-xl hover:bg-opacity-90 transition-all mt-6 shadow-md\">\r\n                        Se connecter et r\u00e9server\r\n                    <\/button>\r\n                <\/form>\r\n            <\/div>\r\n            <div id=\"modal-view-email\" class=\"block\">\r\n                <form onsubmit=\"handleModalSubmit(event, 'email')\" class=\"space-y-4\">\r\n                    <div class=\"grid grid-cols-2 gap-4\">\r\n                        <div>\r\n                            <label class=\"block text-sm font-medium text-gray-700 mb-1\">Statut *<\/label>\r\n                            <select id=\"statut_client\" required class=\"w-full px-4 py-2 rounded-xl bg-gray-50 border border-gray-200 focus:outline-none focus:border-dark transition-all\">\r\n                                <option value=\"Particulier\">Particulier<\/option>\r\n                                <option value=\"Entreprise\">Entreprise<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                        <div>\r\n                            <label class=\"block text-sm font-medium text-gray-700 mb-1\">Nom complet *<\/label>\r\n                            <input type=\"text\" id=\"nom_client\" required class=\"w-full px-4 py-2 rounded-xl bg-gray-50 border border-gray-200 focus:outline-none focus:border-dark transition-all\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"grid grid-cols-2 gap-4\">\r\n                        <div>\r\n                            <label class=\"block text-sm font-medium text-gray-700 mb-1\">Email *<\/label>\r\n                            <input type=\"email\" id=\"email_client\" required class=\"w-full px-4 py-2 rounded-xl bg-gray-50 border border-gray-200 focus:outline-none focus:border-dark transition-all\">\r\n                        <\/div>\r\n                        <div>\r\n                            <label class=\"block text-sm font-medium text-gray-700 mb-1\">T\u00e9l\u00e9phone *<\/label>\r\n                            <input type=\"tel\" id=\"tel_client\" required class=\"w-full px-4 py-2 rounded-xl bg-gray-50 border border-gray-200 focus:outline-none focus:border-dark transition-all\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-sm font-medium text-gray-700 mb-1\">Heure souhait\u00e9e \/ Message *<\/label>\r\n                        <textarea id=\"message_client\" required rows=\"2\" placeholder=\"Pr\u00e9cisez l'heure souhait\u00e9e (ex: 10h-12h)...\" class=\"w-full px-4 py-2 rounded-xl bg-gray-50 border border-gray-200 focus:outline-none focus:border-dark transition-all\"><\/textarea>\r\n                    <\/div>\r\n                    <button type=\"submit\" class=\"w-full bg-dark text-primary font-bold py-3 px-4 rounded-xl hover:bg-opacity-90 transition-all mt-2 shadow-md\">\r\n                        Envoyer la demande\r\n                    <\/button>\r\n                <\/form>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    let currentSelectedDate = \"\";\r\n    let today = new Date();\r\n    today.setHours(0, 0, 0, 0);\r\n\r\n    let currentYear = today.getFullYear();\r\n    let currentMonthIndex = today.getMonth();\r\n\r\n    const monthNames = [\r\n        \"Janvier\", \"F\u00e9vrier\", \"Mars\", \"Avril\",\r\n        \"Mai\", \"Juin\", \"Juillet\", \"Ao\u00fbt\",\r\n        \"Septembre\", \"Octobre\", \"Novembre\", \"D\u00e9cembre\"\r\n    ];\r\n\r\n    const mockEvents = {\r\n        \"2026-05-26\": [{time:'14:00', label:'QSE'}],\r\n        \"2026-05-27\": [{time:'09:00', label:'Liva'}],\r\n        \"2026-06-02\": [{time:'10:30', label:'R\u00e9union'}]\r\n    };\r\n\r\n    function updateModalPrice() {\r\n        const duree = document.getElementById('modal-duree').value;\r\n        const inputPersonnes = document.getElementById('modal-personnes');\r\n        let n = parseInt(inputPersonnes.value, 10);\r\n        if (isNaN(n) || n < 1) n = 1;\r\n        inputPersonnes.value = n;\r\n\r\n        let price;\r\n        if (duree === 'heure') {\r\n            price = 10;\r\n        } else {\r\n            const base = duree === 'demi' ? 19 : 30;\r\n            price = base + Math.max(0, n - 2) * 10;\r\n        }\r\n        document.getElementById('modal-price').textContent = price + '\u20ac';\r\n    }\r\n\r\n    function renderCalendar() {\r\n        const title = document.getElementById('calendar-month-title');\r\n        title.textContent = monthNames[currentMonthIndex] + \" \" + currentYear;\r\n\r\n        const grid = document.getElementById('calendar-grid');\r\n        grid.innerHTML = '';\r\n\r\n        let firstDay = new Date(currentYear, currentMonthIndex, 1).getDay();\r\n        let startingDay = firstDay === 0 ? 6 : firstDay - 1;\r\n\r\n        let daysInMonth = new Date(currentYear, currentMonthIndex + 1, 0).getDate();\r\n        let daysInPrevMonth = new Date(currentYear, currentMonthIndex, 0).getDate();\r\n\r\n        for (let i = 0; i < startingDay; i++) {\r\n            let dayNum = daysInPrevMonth - startingDay + i + 1;\r\n            grid.innerHTML += `<div class=\"bg-gray-50 rounded-xl p-2 border border-transparent text-gray-300 opacity-50 pointer-events-none\"><span class=\"font-semibold text-sm\">${dayNum}<\/span><\/div>`;\r\n        }\r\n\r\n        for (let i = 1; i <= daysInMonth; i++) {\r\n            let cellDate = new Date(currentYear, currentMonthIndex, i);\r\n            let dateStr = `${currentYear}-${String(currentMonthIndex + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;\r\n\r\n            let isPast = cellDate < today;\r\n            let isToday = cellDate.getTime() === today.getTime();\r\n\r\n            let events = mockEvents[dateStr] || [];\r\n            let eventsHtml = events.map(ev => `<div class=\"cal-event\">${ev.time} ${ev.label}<\/div>`).join('');\r\n\r\n            let dayName = cellDate.toLocaleDateString('fr-FR', {weekday: 'long'}).toUpperCase();\r\n            let monthName = monthNames[currentMonthIndex].toUpperCase();\r\n            let fullDateString = `${dayName} ${i} ${monthName} ${currentYear}`;\r\n            let eventsJson = JSON.stringify(events).replace(\/\"\/g, '&quot;');\r\n\r\n            if (isPast) {\r\n                grid.innerHTML += `\r\n                    <div class=\"bg-gray-100 rounded-xl p-2 border border-transparent text-gray-400 cursor-not-allowed opacity-50\">\r\n                        <span class=\"font-semibold text-sm block mb-2\">${i}<\/span>\r\n                        ${eventsHtml}\r\n                    <\/div>`;\r\n            } else {\r\n                let classes = \"bg-gray-50 rounded-xl p-2 cal-day border border-transparent hover:bg-yellow-50 hover:border-primary transition-all cursor-pointer\";\r\n                let spanClasses = \"font-semibold text-sm text-dark block mb-2\";\r\n\r\n                if (isToday) {\r\n                    spanClasses = \"flex items-center justify-center w-6 h-6 bg-primary text-dark rounded-full font-bold text-xs mb-2\";\r\n                }\r\n\r\n                grid.innerHTML += `\r\n                    <div class=\"${classes}\" onclick=\"selectDay(this, '${fullDateString}', ${eventsJson})\">\r\n                        <span class=\"${spanClasses}\">${i}<\/span>\r\n                        ${eventsHtml}\r\n                    <\/div>`;\r\n            }\r\n        }\r\n\r\n        document.getElementById('selected-date-title').textContent = \"S\u00c9LECTIONNEZ UN JOUR\";\r\n        document.getElementById('day-events').innerHTML = '<p class=\"text-center\">Veuillez choisir une date<br>dans le calendrier.<\/p>';\r\n        currentSelectedDate = \"\";\r\n    }\r\n\r\n    function changeMonth(direction) {\r\n        currentMonthIndex += direction;\r\n        if (currentMonthIndex < 0) {\r\n            currentMonthIndex = 11;\r\n            currentYear--;\r\n        } else if (currentMonthIndex > 11) {\r\n            currentMonthIndex = 0;\r\n            currentYear++;\r\n        }\r\n\r\n        const loader = document.getElementById('calendar-loading');\r\n        const grid = document.getElementById('calendar-grid');\r\n        loader.classList.remove('hidden');\r\n        grid.classList.add('opacity-50');\r\n\r\n        setTimeout(() => {\r\n            renderCalendar();\r\n            loader.classList.add('hidden');\r\n            grid.classList.remove('opacity-50');\r\n        }, 300);\r\n    }\r\n\r\n    function resetToToday() {\r\n        currentYear = today.getFullYear();\r\n        currentMonthIndex = today.getMonth();\r\n        renderCalendar();\r\n    }\r\n\r\n    function selectDay(element, dateString, events = []) {\r\n        document.querySelectorAll('.cal-day').forEach(el => {\r\n            el.classList.remove('active', 'bg-yellow-50', 'border', 'border-primary');\r\n            el.classList.add('bg-gray-50', 'border-transparent');\r\n            const span = el.querySelector('span');\r\n            if(span) {\r\n                span.classList.remove('flex', 'items-center', 'justify-center', 'w-6', 'h-6', 'bg-primary', 'text-dark', 'rounded-full');\r\n            }\r\n        });\r\n\r\n        element.classList.remove('bg-gray-50', 'border-transparent');\r\n        element.classList.add('active', 'bg-yellow-50', 'border', 'border-primary');\r\n        const span = element.querySelector('span');\r\n        if(span) {\r\n            span.classList.add('flex', 'items-center', 'justify-center', 'w-6', 'h-6', 'bg-primary', 'text-dark', 'rounded-full');\r\n        }\r\n\r\n        document.getElementById('selected-date-title').textContent = dateString;\r\n        currentSelectedDate = dateString;\r\n        const eventsContainer = document.getElementById('day-events');\r\n\r\n        if(events.length === 0) {\r\n            eventsContainer.innerHTML = '<p class=\"text-center\">Aucune r\u00e9servation<br>ce jour-l\u00e0.<\/p>';\r\n        } else {\r\n            let html = '<div class=\"w-full flex flex-col gap-3\">';\r\n            events.forEach(ev => {\r\n                html += `\r\n                    <div class=\"flex items-center gap-3 p-3 bg-gray-50 rounded-lg border border-gray-100\">\r\n                        <div class=\"w-2 h-full min-h-[30px] bg-dark rounded-full\"><\/div>\r\n                        <div>\r\n                            <p class=\"text-xs font-bold text-gray-500\">${ev.time}<\/p>\r\n                            <p class=\"text-sm font-bold text-dark\">${ev.label}<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                `;\r\n            });\r\n            html += '<\/div>';\r\n            eventsContainer.innerHTML = html;\r\n        }\r\n    }\r\n\r\n    function openModal() {\r\n        if(!currentSelectedDate) {\r\n            alert(\"Veuillez d'abord s\u00e9lectionner une date valide (en jaune) dans le calendrier.\");\r\n            return;\r\n        }\r\n        document.getElementById('modal-date-text').textContent = currentSelectedDate;\r\n        document.getElementById('modal-duree').value = 'heure';\r\n        document.getElementById('modal-personnes').value = 1;\r\n        updateModalPrice();\r\n        const modal = document.getElementById('reservationModal');\r\n        modal.classList.remove('hidden');\r\n        modal.classList.add('flex');\r\n    }\r\n\r\n    function closeModal() {\r\n        const modal = document.getElementById('reservationModal');\r\n        modal.classList.add('hidden');\r\n        modal.classList.remove('flex');\r\n    }\r\n\r\n    function switchModalTab(tab) {\r\n        const btnLogin = document.getElementById('modal-tab-login');\r\n        const btnEmail = document.getElementById('modal-tab-email');\r\n        const viewLogin = document.getElementById('modal-view-login');\r\n        const viewEmail = document.getElementById('modal-view-email');\r\n        if (tab === 'login') {\r\n            btnLogin.className = \"flex-1 pb-4 text-center font-bold text-sm text-dark border-b-2 border-primary uppercase tracking-wide\";\r\n            btnEmail.className = \"flex-1 pb-4 text-center font-bold text-sm text-gray-400 border-b-2 border-transparent hover:text-gray-600 uppercase tracking-wide transition-colors\";\r\n            viewLogin.classList.remove('hidden');\r\n            viewLogin.classList.add('block');\r\n            viewEmail.classList.add('hidden');\r\n            viewEmail.classList.remove('block');\r\n        } else {\r\n            btnEmail.className = \"flex-1 pb-4 text-center font-bold text-sm text-dark border-b-2 border-primary uppercase tracking-wide\";\r\n            btnLogin.className = \"flex-1 pb-4 text-center font-bold text-sm text-gray-400 border-b-2 border-transparent hover:text-gray-600 uppercase tracking-wide transition-colors\";\r\n            viewEmail.classList.remove('hidden');\r\n            viewEmail.classList.add('block');\r\n            viewLogin.classList.add('hidden');\r\n            viewLogin.classList.remove('block');\r\n        }\r\n    }\r\n\r\n    async function handleModalSubmit(e, type) {\r\n        e.preventDefault();\r\n\r\n        if(type === 'email') {\r\n            const form = e.target;\r\n            const data = {\r\n                nom: document.getElementById('nom_client').value,\r\n                statut: document.getElementById('statut_client').value,\r\n                email: document.getElementById('email_client').value,\r\n                telephone: document.getElementById('tel_client').value,\r\n                message: document.getElementById('message_client').value,\r\n                date: currentSelectedDate,\r\n                duree: document.getElementById('modal-duree').value,\r\n                personnes: document.getElementById('modal-personnes').value,\r\n                prix: document.getElementById('modal-price').textContent\r\n            };\r\n            const btn = form.querySelector('button[type=\"submit\"]');\r\n            const btnOriginalText = btn.textContent;\r\n            btn.textContent = \"Envoi en cours...\";\r\n\r\n            try {\r\n                const response = await fetch('\/?rest_route=\/fourmiliere\/v1\/demande-externe', {\r\n                    method: 'POST',\r\n                    headers: { 'Content-Type': 'application\/json' },\r\n                    body: JSON.stringify(data)\r\n                });\r\n                const result = await response.json();\r\n                if (response.ok) {\r\n                    alert(\"Succ\u00e8s : \" + result.message);\r\n                    closeModal();\r\n                    form.reset();\r\n                } else {\r\n                    alert(\"Erreur WordPress : \" + (result.message || \"Probl\u00e8me inconnu\"));\r\n                }\r\n            } catch (error) {\r\n                alert(\"Erreur technique : Impossible de lire la r\u00e9ponse de WordPress. V\u00e9rifiez l'adresse ou la configuration.\");\r\n            } finally {\r\n                btn.textContent = btnOriginalText;\r\n            }\r\n        }\r\n        else if (type === 'login') {\r\n            alert(\"La logique de connexion WordPress sera bient\u00f4t connect\u00e9e !\");\r\n        }\r\n    }\r\n\r\n    renderCalendar();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d2ae556 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"d2ae556\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9038d9f elementor-widget elementor-widget-html\" data-id=\"9038d9f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@tabler\/icons-webfont@latest\/dist\/tabler-icons.min.css\">\r\n<style>\r\n  @media (max-width: 768px) {\r\n    .footer-inner {\r\n      flex-direction: column !important;\r\n      text-align: center !important;\r\n      align-items: center !important;\r\n      gap: 40px !important;\r\n    }\r\n    .footer-bottom {\r\n      flex-direction: column !important;\r\n      gap: 20px !important;\r\n    }\r\n  }\r\n<\/style>\r\n<div class=\"fourmiliere-footer\">\r\n  <footer class=\"flex flex-col pt-16 pb-8 bg-[#322522] text-[#f4f4f5]\">\r\n    \r\n    <div class=\"footer-inner flex flex-wrap gap-10 justify-between self-center w-full max-w-[1200px] px-6\">\r\n      \r\n      <div class=\"max-w-[300px] min-w-[240px]\">\r\n        <h3 class=\"text-xl italic font-bold leading-tight m-0 text-[#facc15]\">La Fourmili\u00e8re<\/h3>\r\n        <div class=\"mt-6 text-base leading-7 opacity-80\">\r\n          <p class=\"m-0\">Votre espace de coworking id\u00e9al pour travailler, cr\u00e9er et collaborer.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <nav class=\"text-base min-w-[140px]\">\r\n        <h4 class=\"italic font-bold leading-tight m-0 text-[#facc15]\">Liens Rapides<\/h4>\r\n        <ul class=\"mt-6 p-0 list-none leading-relaxed opacity-80\">\r\n          <li class=\"mb-3.5\"><a href=\"\/\" class=\"text-[#f4f4f5] no-underline hover:text-white transition-colors\">Accueil<\/a><\/li>\r\n          <li class=\"mb-3.5\"><a href=\"\/#espaces\" class=\"text-[#f4f4f5] no-underline hover:text-white transition-colors\">Nos espaces<\/a><\/li>\r\n          <li class=\"mb-3.5\"><a href=\"\/reservation\" class=\"text-[#f4f4f5] no-underline hover:text-white transition-colors\">Salle de r\u00e9union<\/a><\/li>\r\n          <li><a href=\"\/#contact\" class=\"text-[#f4f4f5] no-underline hover:text-white transition-colors\">Contact<\/a><\/li>\r\n        <\/ul>\r\n      <\/nav>\r\n      <nav class=\"text-base min-w-[200px]\">\r\n        <h4 class=\"italic font-bold leading-tight m-0 text-[#facc15]\">L\u00e9gal<\/h4>\r\n        <ul class=\"mt-6 p-0 list-none leading-relaxed opacity-80\">\r\n          <li class=\"mb-3.5\"><a href=\"\/mentions-legales\" class=\"text-[#f4f4f5] no-underline hover:text-white transition-colors\">Mentions L\u00e9gales<\/a><\/li>\r\n          <li class=\"mb-3.5 leading-7\"><a href=\"\/politique-confidentialite\" class=\"text-[#f4f4f5] no-underline hover:text-white transition-colors\">Politique de Confidentialit\u00e9<\/a><\/li>\r\n          <li><a href=\"\/cgv\" class=\"text-[#f4f4f5] no-underline hover:text-white transition-colors\">CGV<\/a><\/li>\r\n        <\/ul>\r\n      <\/nav>\r\n    <\/div>\r\n    <div class=\"footer-bottom flex flex-wrap items-center pt-8 mt-12 w-full border-t border-white\/10 px-6 max-w-[1200px] self-center\">\r\n      <div class=\"flex-1 text-sm leading-relaxed text-center md:text-left opacity-60\">\r\n        <p class=\"m-0\">\u00a9 2026 La Fourmili\u00e8re. Tous droits r\u00e9serv\u00e9s.<\/p>\r\n      <\/div>\r\n      <div class=\"flex gap-4 items-center mt-4 md:mt-0\">\r\n        <a href=\"#\" class=\"text-2xl text-[#f4f4f5] opacity-60 hover:opacity-100 hover:text-[#facc15] transition-all\"><i class=\"ti ti-brand-facebook\"><\/i><\/a>\r\n        <a href=\"#\" class=\"text-2xl text-[#f4f4f5] opacity-60 hover:opacity-100 hover:text-[#facc15] transition-all\"><i class=\"ti ti-brand-instagram\"><\/i><\/a>\r\n        <a href=\"#\" class=\"text-2xl text-[#f4f4f5] opacity-60 hover:opacity-100 hover:text-[#facc15] transition-all\"><i class=\"ti ti-brand-linkedin\"><\/i><\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/footer>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Nous d\u00e9couvrir Nos espaces R\u00e9union Contactez-nous Voir nos espaces Contactez-nous R\u00e9server une salle Salle Fourme 1 2e \u00e9tage \u00b7 B\u00e2timent A Ouvert de 8h \u00e0 19h DISPONIBLE Tarifs \u2022 1 heure : 10\u20ac \u2022 Demi-journ\u00e9e : 19\u20ac \u2022 Journ\u00e9e : 30\u20ac Vid\u00e9o projecteur \u00c9cran tactile Acc\u00e8s cuisine Espaces d\u00e9tente S\u00c9LECTIONNEZ UN JOUR Veuillez choisir une datedans le calendrier. AJOUTER UNE R\u00c9SERVATION &#8230; Planning mensuel \u00b7 Salle R\u00e9union Fourme 1 MOIS LUNMARMERJEUVENSAMDIM R\u00e9servation Aujourd&rsquo;hui Finaliser la r\u00e9servation Salle Fourme 1 &#8211; D\u00e9tails de la r\u00e9servation Dur\u00e9e 1 heureDemi-journ\u00e9eJourn\u00e9e Nombre de personnes Tarif estim\u00e9 10\u20ac Je suis externe Je suis membre Email Mot de passe Se connecter et r\u00e9server Statut * ParticulierEntreprise Nom complet * Email * T\u00e9l\u00e9phone * Heure souhait\u00e9e \/ Message * Envoyer la demande La Fourmili\u00e8re Votre espace de coworking id\u00e9al pour travailler, cr\u00e9er et collaborer. Liens Rapides Accueil Nos espaces Salle de r\u00e9union Contact L\u00e9gal Mentions L\u00e9gales Politique de Confidentialit\u00e9 CGV \u00a9 2026 La Fourmili\u00e8re. Tous droits r\u00e9serv\u00e9s.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"class_list":["post-1429","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xn--lafourmilire44-4jb.fr\/index.php\/wp-json\/wp\/v2\/pages\/1429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xn--lafourmilire44-4jb.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xn--lafourmilire44-4jb.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xn--lafourmilire44-4jb.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xn--lafourmilire44-4jb.fr\/index.php\/wp-json\/wp\/v2\/comments?post=1429"}],"version-history":[{"count":49,"href":"https:\/\/xn--lafourmilire44-4jb.fr\/index.php\/wp-json\/wp\/v2\/pages\/1429\/revisions"}],"predecessor-version":[{"id":1533,"href":"https:\/\/xn--lafourmilire44-4jb.fr\/index.php\/wp-json\/wp\/v2\/pages\/1429\/revisions\/1533"}],"wp:attachment":[{"href":"https:\/\/xn--lafourmilire44-4jb.fr\/index.php\/wp-json\/wp\/v2\/media?parent=1429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}