Gym Bien-\u00eatre Seniors - Carrousel<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .carousel-section {\n max-width: 1200px;\n margin: 0 auto;\n padding: 60px 20px;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n .section-title {\n text-align: center;\n margin-bottom: 30px;\n }\n\n .section-title h2 {\n font-size: 3rem;\n color: #2c3e50;\n font-weight: 700;\n position: relative;\n display: inline-block;\n padding-bottom: 15px;\n }\n\n .section-title h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 4px;\n background: linear-gradient(90deg, #3498db, #2ecc71);\n border-radius: 2px;\n }\n\n .section-title p {\n font-size: 1.1rem;\n color: #7f8c8d;\n margin-top: 15px;\n font-weight: 300;\n }\n\n \/* Flyer Image *\/\n .event-flyer {\n max-width: 600px;\n margin: 0 auto 40px;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);\n transition: transform 0.3s ease;\n }\n\n .event-flyer:hover {\n transform: translateY(-5px);\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);\n }\n\n .event-flyer img {\n width: 100%;\n height: auto;\n display: block;\n }\n\n .carousel-container {\n position: relative;\n overflow: hidden;\n border-radius: 20px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);\n }\n\n .carousel-wrapper {\n display: flex;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .carousel-slide {\n min-width: 100%;\n position: relative;\n height: auto;\n min-height: 500px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* PREMI\u00c8RE IMAGE - FOND GRIS + PLUS GRANDE *\/\n .carousel-slide:nth-child(1) {\n height: 750px !important;\n background-color: #f8f9fa;\n }\n\n \/* IMAGES 2, 3, 4 - PAS DE FOND, HAUTEUR ADAPTATIVE *\/\n .carousel-slide:nth-child(2),\n .carousel-slide:nth-child(3),\n .carousel-slide:nth-child(4) {\n background-color: transparent;\n height: 600px !important;\n min-height: 600px;\n }\n\n .carousel-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n \/* PREMI\u00c8RE IMAGE - TOUTE LA PHOTO VISIBLE (avec bandes grises) *\/\n .carousel-slide:nth-child(1) img {\n object-fit: contain !important;\n object-position: center center;\n }\n\n \/* IMAGES 2, 3, 4 - REMPLISSENT TOUT L'ESPACE (pas de bandes) *\/\n .carousel-slide:nth-child(2) img,\n .carousel-slide:nth-child(3) img,\n .carousel-slide:nth-child(4) img {\n object-fit: cover !important;\n object-position: center center;\n }\n\n \/* OVERLAY AVEC TEXTE VISIBLE *\/\n .carousel-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7), transparent);\n padding: 50px 40px;\n color: white;\n transform: translateY(0);\n transition: transform 0.3s ease;\n }\n\n .carousel-slide:hover .carousel-overlay {\n transform: translateY(-10px);\n }\n\n \/* TITRES TR\u00c8S VISIBLES *\/\n .carousel-overlay h3 {\n font-size: 2rem;\n margin-bottom: 15px;\n font-weight: 700;\n color: #ffffff;\n text-shadow: \n 2px 2px 4px rgba(0, 0, 0, 0.8),\n 0 0 10px rgba(0, 0, 0, 0.5);\n letter-spacing: 0.5px;\n }\n\n \/* TEXTES TR\u00c8S VISIBLES *\/\n .carousel-overlay p {\n font-size: 1.1rem;\n line-height: 1.7;\n color: #ffffff;\n font-weight: 400;\n text-shadow: \n 1px 1px 3px rgba(0, 0, 0, 0.8),\n 0 0 8px rgba(0, 0, 0, 0.4);\n }\n\n \/* Navigation Arrows *\/\n .carousel-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255, 255, 255, 0.9);\n border: none;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n z-index: 10;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n }\n\n .carousel-nav:hover {\n background: white;\n transform: translateY(-50%) scale(1.1);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);\n }\n\n .carousel-nav.prev {\n left: 20px;\n }\n\n .carousel-nav.next {\n right: 20px;\n }\n\n .carousel-nav svg {\n width: 24px;\n height: 24px;\n fill: #2c3e50;\n }\n\n \/* Dots Navigation *\/\n .carousel-dots {\n display: flex;\n justify-content: center;\n gap: 12px;\n margin-top: 30px;\n }\n\n .carousel-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #bdc3c7;\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n padding: 0;\n }\n\n .carousel-dot.active {\n background: #3498db;\n width: 40px;\n border-radius: 6px;\n }\n\n .carousel-dot:hover {\n background: #7f8c8d;\n }\n\n \/* Counter *\/\n .carousel-counter {\n position: absolute;\n top: 20px;\n right: 20px;\n background: rgba(255, 255, 255, 0.9);\n padding: 10px 20px;\n border-radius: 25px;\n font-weight: 600;\n color: #2c3e50;\n font-size: 0.9rem;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n z-index: 5;\n }\n\n \/* Responsive Design *\/\n @media (max-width: 768px) {\n .section-title h2 {\n font-size: 2rem;\n }\n\n .event-flyer {\n max-width: 100%;\n margin-bottom: 30px;\n }\n\n .carousel-slide {\n min-height: 400px;\n }\n\n .carousel-slide:nth-child(2),\n .carousel-slide:nth-child(3),\n .carousel-slide:nth-child(4) {\n height: 400px !important;\n min-height: 400px;\n }\n\n \/* Premi\u00e8re image plus grande aussi sur mobile *\/\n .carousel-slide:nth-child(1) {\n height: 500px !important;\n }\n\n .carousel-nav {\n width: 45px;\n height: 45px;\n }\n\n .carousel-nav.prev {\n left: 10px;\n }\n\n .carousel-nav.next {\n right: 10px;\n }\n\n .carousel-overlay {\n padding: 30px 20px;\n }\n\n .carousel-overlay h3 {\n font-size: 1.5rem;\n }\n\n .carousel-overlay p {\n font-size: 1rem;\n }\n }\n\n \/* Animation on load *\/\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .carousel-section {\n animation: fadeInUp 0.8s ease;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n .event-flyer {\n animation: fadeIn 1s ease 0.3s backwards;\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1>\n <div class=\"carousel-section\">\n \n <div class=\"section-title\">\n <h2>Gym Bien-\u00eatre Seniors<\/h2>\n <p>Restez actif et en forme dans une ambiance conviviale<\/p>\n <\/div>\n\n \n <div class=\"event-flyer\">\n <img decoding=\"async\" src=\"https:\/\/action-form.com\/wp-content\/uploads\/affiche-pour-forum-des-assos.png\" alt=\"Forum des Associations - 06 septembre 2025\">\n <\/div>\n\n \n <div class=\"carousel-container\">\n \n <div class=\"carousel-counter\">\n <span class=\"current-slide\">1<\/span> \/ <span class=\"total-slides\">4<\/span>\n <\/div>\n\n \n <div class=\"carousel-wrapper\">\n \n <div class=\"carousel-slide\">\n <img decoding=\"async\" src=\"https:\/\/action-form.com\/wp-content\/uploads\/20251215_100853.png\" alt=\"Pose de yoga \u00e9quilibre\">\n <div class=\"carousel-overlay\">\n <h3>\u00c9quilibre & Souplesse<\/h3>\n <p>D\u00e9veloppez votre \u00e9quilibre et votre souplesse avec des exercices adapt\u00e9s.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"carousel-slide\">\n <img decoding=\"async\" src=\"https:\/\/action-form.com\/wp-content\/uploads\/20251215_100856.png\" alt=\"Exercices de renforcement en groupe\">\n <div class=\"carousel-overlay\">\n <h3>Renforcement musculaire<\/h3>\n <p>Des s\u00e9ances de renforcement cibli\u00e9s pour maintenir votre tonus musculaire.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"carousel-slide\">\n <img decoding=\"async\" src=\"https:\/\/action-form.com\/wp-content\/uploads\/20260209_095400.png\" alt=\"Activit\u00e9s ludiques avec ballons\">\n <div class=\"carousel-overlay\">\n <h3>Activit\u00e9s ludiques<\/h3>\n <p>Restez actif tout en vous amusant gr\u00e2ce \u00e0 des exercices vari\u00e9s.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"carousel-slide\">\n <img decoding=\"async\" src=\"https:\/\/action-form.com\/wp-content\/uploads\/4.png\" alt=\"Swiss ball et gainage\">\n <div class=\"carousel-overlay\">\n <h3>Gainage & Coordination<\/h3>\n <p>Am\u00e9liorez votre coordination et renforcez vos muscles en douceur<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <button class=\"carousel-nav prev\" aria-label=\"Pr\u00e9c\u00e9dent\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/>\n <\/svg>\n <\/button>\n <button class=\"carousel-nav next\" aria-label=\"Suivant\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/>\n <\/svg>\n <\/button>\n <\/div>\n\n \n <div class=\"carousel-dots\">\n <button class=\"carousel-dot active\" data-slide=\"0\" aria-label=\"Slide 1\"><\/button>\n <button class=\"carousel-dot\" data-slide=\"1\" aria-label=\"Slide 2\"><\/button>\n <button class=\"carousel-dot\" data-slide=\"2\" aria-label=\"Slide 3\"><\/button>\n <button class=\"carousel-dot\" data-slide=\"3\" aria-label=\"Slide 4\"><\/button>\n <\/div>\n <\/div>\n\n <script>\n class Carousel {\n constructor() {\n this.currentSlide = 0;\n this.wrapper = document.querySelector('.carousel-wrapper');\n this.slides = document.querySelectorAll('.carousel-slide');\n this.dots = document.querySelectorAll('.carousel-dot');\n this.prevBtn = document.querySelector('.carousel-nav.prev');\n this.nextBtn = document.querySelector('.carousel-nav.next');\n this.currentCounter = document.querySelector('.current-slide');\n this.totalCounter = document.querySelector('.total-slides');\n this.autoplayInterval = null;\n this.autoplayDelay = 8000; \/\/ 8 SECONDES\n\n this.init();\n }\n\n init() {\n this.totalCounter.textContent = this.slides.length;\n this.updateSlide(0);\n\n \/\/ Event Listeners\n this.prevBtn.addEventListener('click', () => this.prev());\n this.nextBtn.addEventListener('click', () => this.next());\n\n this.dots.forEach((dot, index) => {\n dot.addEventListener('click', () => this.goToSlide(index));\n });\n\n \/\/ Keyboard navigation\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft') this.prev();\n if (e.key === 'ArrowRight') this.next();\n });\n\n \/\/ Touch\/Swipe support\n let touchStartX = 0;\n let touchEndX = 0;\n\n this.wrapper.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n });\n\n this.wrapper.addEventListener('touchend', (e) => {\n touchEndX = e.changedTouches[0].screenX;\n this.handleSwipe();\n });\n\n const handleSwipe = () => {\n if (touchEndX < touchStartX - 50) this.next();\n if (touchEndX > touchStartX + 50) this.prev();\n };\n\n this.handleSwipe = handleSwipe;\n\n \/\/ Start autoplay\n this.startAutoplay();\n\n \/\/ Pause autoplay on hover\n const container = document.querySelector('.carousel-container');\n container.addEventListener('mouseenter', () => this.stopAutoplay());\n container.addEventListener('mouseleave', () => this.startAutoplay());\n }\n\n updateSlide(index) {\n this.currentSlide = index;\n this.wrapper.style.transform = `translateX(-${index * 100}%)`;\n this.currentCounter.textContent = index + 1;\n\n \/\/ Update dots\n this.dots.forEach((dot, i) => {\n dot.classList.toggle('active', i === index);\n });\n }\n\n next() {\n const nextSlide = (this.currentSlide + 1) % this.slides.length;\n this.updateSlide(nextSlide);\n this.resetAutoplay();\n }\n\n prev() {\n const prevSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;\n this.updateSlide(prevSlide);\n this.resetAutoplay();\n }\n\n goToSlide(index) {\n this.updateSlide(index);\n this.resetAutoplay();\n }\n\n startAutoplay() {\n this.autoplayInterval = setInterval(() => this.next(), this.autoplayDelay);\n }\n\n stopAutoplay() {\n clearInterval(this.autoplayInterval);\n }\n\n resetAutoplay() {\n this.stopAutoplay();\n this.startAutoplay();\n }\n }\n\n \/\/ Initialize carousel when DOM is ready\n document.addEventListener('DOMContentLoaded', () => {\n new Carousel();\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gym Bien-\u00eatre Seniors – Carrousel Gym Bien-\u00eatre Seniors Restez actif et en forme dans une ambiance conviviale 1 \/ 4 \u00c9quilibre & Souplesse D\u00e9veloppez votre \u00e9quilibre et votre souplesse avec des exercices adapt\u00e9s. Renforcement musculaire Des s\u00e9ances de renforcement cibli\u00e9s pour maintenir votre tonus musculaire. Activit\u00e9s ludiques Restez actif tout en vous amusant gr\u00e2ce \u00e0 […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8433","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/8433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/comments?post=8433"}],"version-history":[{"count":52,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/8433\/revisions"}],"predecessor-version":[{"id":8768,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/8433\/revisions\/8768"}],"wp:attachment":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/media?parent=8433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Gym Bien-\u00eatre Seniors - Carrousel<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n .carousel-section {\n max-width: 1200px;\n margin: 0 auto;\n padding: 60px 20px;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n .section-title {\n text-align: center;\n margin-bottom: 30px;\n }\n\n .section-title h2 {\n font-size: 3rem;\n color: #2c3e50;\n font-weight: 700;\n position: relative;\n display: inline-block;\n padding-bottom: 15px;\n }\n\n .section-title h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 80px;\n height: 4px;\n background: linear-gradient(90deg, #3498db, #2ecc71);\n border-radius: 2px;\n }\n\n .section-title p {\n font-size: 1.1rem;\n color: #7f8c8d;\n margin-top: 15px;\n font-weight: 300;\n }\n\n \/* Flyer Image *\/\n .event-flyer {\n max-width: 600px;\n margin: 0 auto 40px;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);\n transition: transform 0.3s ease;\n }\n\n .event-flyer:hover {\n transform: translateY(-5px);\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);\n }\n\n .event-flyer img {\n width: 100%;\n height: auto;\n display: block;\n }\n\n .carousel-container {\n position: relative;\n overflow: hidden;\n border-radius: 20px;\n box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);\n }\n\n .carousel-wrapper {\n display: flex;\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .carousel-slide {\n min-width: 100%;\n position: relative;\n height: auto;\n min-height: 500px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* PREMI\u00c8RE IMAGE - FOND GRIS + PLUS GRANDE *\/\n .carousel-slide:nth-child(1) {\n height: 750px !important;\n background-color: #f8f9fa;\n }\n\n \/* IMAGES 2, 3, 4 - PAS DE FOND, HAUTEUR ADAPTATIVE *\/\n .carousel-slide:nth-child(2),\n .carousel-slide:nth-child(3),\n .carousel-slide:nth-child(4) {\n background-color: transparent;\n height: 600px !important;\n min-height: 600px;\n }\n\n .carousel-slide img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n \/* PREMI\u00c8RE IMAGE - TOUTE LA PHOTO VISIBLE (avec bandes grises) *\/\n .carousel-slide:nth-child(1) img {\n object-fit: contain !important;\n object-position: center center;\n }\n\n \/* IMAGES 2, 3, 4 - REMPLISSENT TOUT L'ESPACE (pas de bandes) *\/\n .carousel-slide:nth-child(2) img,\n .carousel-slide:nth-child(3) img,\n .carousel-slide:nth-child(4) img {\n object-fit: cover !important;\n object-position: center center;\n }\n\n \/* OVERLAY AVEC TEXTE VISIBLE *\/\n .carousel-overlay {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7), transparent);\n padding: 50px 40px;\n color: white;\n transform: translateY(0);\n transition: transform 0.3s ease;\n }\n\n .carousel-slide:hover .carousel-overlay {\n transform: translateY(-10px);\n }\n\n \/* TITRES TR\u00c8S VISIBLES *\/\n .carousel-overlay h3 {\n font-size: 2rem;\n margin-bottom: 15px;\n font-weight: 700;\n color: #ffffff;\n text-shadow: \n 2px 2px 4px rgba(0, 0, 0, 0.8),\n 0 0 10px rgba(0, 0, 0, 0.5);\n letter-spacing: 0.5px;\n }\n\n \/* TEXTES TR\u00c8S VISIBLES *\/\n .carousel-overlay p {\n font-size: 1.1rem;\n line-height: 1.7;\n color: #ffffff;\n font-weight: 400;\n text-shadow: \n 1px 1px 3px rgba(0, 0, 0, 0.8),\n 0 0 8px rgba(0, 0, 0, 0.4);\n }\n\n \/* Navigation Arrows *\/\n .carousel-nav {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255, 255, 255, 0.9);\n border: none;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n z-index: 10;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n }\n\n .carousel-nav:hover {\n background: white;\n transform: translateY(-50%) scale(1.1);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);\n }\n\n .carousel-nav.prev {\n left: 20px;\n }\n\n .carousel-nav.next {\n right: 20px;\n }\n\n .carousel-nav svg {\n width: 24px;\n height: 24px;\n fill: #2c3e50;\n }\n\n \/* Dots Navigation *\/\n .carousel-dots {\n display: flex;\n justify-content: center;\n gap: 12px;\n margin-top: 30px;\n }\n\n .carousel-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #bdc3c7;\n border: none;\n cursor: pointer;\n transition: all 0.3s ease;\n padding: 0;\n }\n\n .carousel-dot.active {\n background: #3498db;\n width: 40px;\n border-radius: 6px;\n }\n\n .carousel-dot:hover {\n background: #7f8c8d;\n }\n\n \/* Counter *\/\n .carousel-counter {\n position: absolute;\n top: 20px;\n right: 20px;\n background: rgba(255, 255, 255, 0.9);\n padding: 10px 20px;\n border-radius: 25px;\n font-weight: 600;\n color: #2c3e50;\n font-size: 0.9rem;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n z-index: 5;\n }\n\n \/* Responsive Design *\/\n @media (max-width: 768px) {\n .section-title h2 {\n font-size: 2rem;\n }\n\n .event-flyer {\n max-width: 100%;\n margin-bottom: 30px;\n }\n\n .carousel-slide {\n min-height: 400px;\n }\n\n .carousel-slide:nth-child(2),\n .carousel-slide:nth-child(3),\n .carousel-slide:nth-child(4) {\n height: 400px !important;\n min-height: 400px;\n }\n\n \/* Premi\u00e8re image plus grande aussi sur mobile *\/\n .carousel-slide:nth-child(1) {\n height: 500px !important;\n }\n\n .carousel-nav {\n width: 45px;\n height: 45px;\n }\n\n .carousel-nav.prev {\n left: 10px;\n }\n\n .carousel-nav.next {\n right: 10px;\n }\n\n .carousel-overlay {\n padding: 30px 20px;\n }\n\n .carousel-overlay h3 {\n font-size: 1.5rem;\n }\n\n .carousel-overlay p {\n font-size: 1rem;\n }\n }\n\n \/* Animation on load *\/\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(30px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .carousel-section {\n animation: fadeInUp 0.8s ease;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n .event-flyer {\n animation: fadeIn 1s ease 0.3s backwards;\n }\n <\/style>\n<\/head>\n<body data-rsssl=1 data-rsssl=1 data-rsssl=1>\n <div class=\"carousel-section\">\n \n <div class=\"section-title\">\n <h2>Gym Bien-\u00eatre Seniors<\/h2>\n <p>Restez actif et en forme dans une ambiance conviviale<\/p>\n <\/div>\n\n \n <div class=\"event-flyer\">\n <img decoding=\"async\" src=\"https:\/\/action-form.com\/wp-content\/uploads\/affiche-pour-forum-des-assos.png\" alt=\"Forum des Associations - 06 septembre 2025\">\n <\/div>\n\n \n <div class=\"carousel-container\">\n \n <div class=\"carousel-counter\">\n <span class=\"current-slide\">1<\/span> \/ <span class=\"total-slides\">4<\/span>\n <\/div>\n\n \n <div class=\"carousel-wrapper\">\n \n <div class=\"carousel-slide\">\n <img decoding=\"async\" src=\"https:\/\/action-form.com\/wp-content\/uploads\/20251215_100853.png\" alt=\"Pose de yoga \u00e9quilibre\">\n <div class=\"carousel-overlay\">\n <h3>\u00c9quilibre & Souplesse<\/h3>\n <p>D\u00e9veloppez votre \u00e9quilibre et votre souplesse avec des exercices adapt\u00e9s.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"carousel-slide\">\n <img decoding=\"async\" src=\"https:\/\/action-form.com\/wp-content\/uploads\/20251215_100856.png\" alt=\"Exercices de renforcement en groupe\">\n <div class=\"carousel-overlay\">\n <h3>Renforcement musculaire<\/h3>\n <p>Des s\u00e9ances de renforcement cibli\u00e9s pour maintenir votre tonus musculaire.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"carousel-slide\">\n <img decoding=\"async\" src=\"https:\/\/action-form.com\/wp-content\/uploads\/20260209_095400.png\" alt=\"Activit\u00e9s ludiques avec ballons\">\n <div class=\"carousel-overlay\">\n <h3>Activit\u00e9s ludiques<\/h3>\n <p>Restez actif tout en vous amusant gr\u00e2ce \u00e0 des exercices vari\u00e9s.<\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"carousel-slide\">\n <img decoding=\"async\" src=\"https:\/\/action-form.com\/wp-content\/uploads\/4.png\" alt=\"Swiss ball et gainage\">\n <div class=\"carousel-overlay\">\n <h3>Gainage & Coordination<\/h3>\n <p>Am\u00e9liorez votre coordination et renforcez vos muscles en douceur<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n \n <button class=\"carousel-nav prev\" aria-label=\"Pr\u00e9c\u00e9dent\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"\/>\n <\/svg>\n <\/button>\n <button class=\"carousel-nav next\" aria-label=\"Suivant\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"\/>\n <\/svg>\n <\/button>\n <\/div>\n\n \n <div class=\"carousel-dots\">\n <button class=\"carousel-dot active\" data-slide=\"0\" aria-label=\"Slide 1\"><\/button>\n <button class=\"carousel-dot\" data-slide=\"1\" aria-label=\"Slide 2\"><\/button>\n <button class=\"carousel-dot\" data-slide=\"2\" aria-label=\"Slide 3\"><\/button>\n <button class=\"carousel-dot\" data-slide=\"3\" aria-label=\"Slide 4\"><\/button>\n <\/div>\n <\/div>\n\n <script>\n class Carousel {\n constructor() {\n this.currentSlide = 0;\n this.wrapper = document.querySelector('.carousel-wrapper');\n this.slides = document.querySelectorAll('.carousel-slide');\n this.dots = document.querySelectorAll('.carousel-dot');\n this.prevBtn = document.querySelector('.carousel-nav.prev');\n this.nextBtn = document.querySelector('.carousel-nav.next');\n this.currentCounter = document.querySelector('.current-slide');\n this.totalCounter = document.querySelector('.total-slides');\n this.autoplayInterval = null;\n this.autoplayDelay = 8000; \/\/ 8 SECONDES\n\n this.init();\n }\n\n init() {\n this.totalCounter.textContent = this.slides.length;\n this.updateSlide(0);\n\n \/\/ Event Listeners\n this.prevBtn.addEventListener('click', () => this.prev());\n this.nextBtn.addEventListener('click', () => this.next());\n\n this.dots.forEach((dot, index) => {\n dot.addEventListener('click', () => this.goToSlide(index));\n });\n\n \/\/ Keyboard navigation\n document.addEventListener('keydown', (e) => {\n if (e.key === 'ArrowLeft') this.prev();\n if (e.key === 'ArrowRight') this.next();\n });\n\n \/\/ Touch\/Swipe support\n let touchStartX = 0;\n let touchEndX = 0;\n\n this.wrapper.addEventListener('touchstart', (e) => {\n touchStartX = e.changedTouches[0].screenX;\n });\n\n this.wrapper.addEventListener('touchend', (e) => {\n touchEndX = e.changedTouches[0].screenX;\n this.handleSwipe();\n });\n\n const handleSwipe = () => {\n if (touchEndX < touchStartX - 50) this.next();\n if (touchEndX > touchStartX + 50) this.prev();\n };\n\n this.handleSwipe = handleSwipe;\n\n \/\/ Start autoplay\n this.startAutoplay();\n\n \/\/ Pause autoplay on hover\n const container = document.querySelector('.carousel-container');\n container.addEventListener('mouseenter', () => this.stopAutoplay());\n container.addEventListener('mouseleave', () => this.startAutoplay());\n }\n\n updateSlide(index) {\n this.currentSlide = index;\n this.wrapper.style.transform = `translateX(-${index * 100}%)`;\n this.currentCounter.textContent = index + 1;\n\n \/\/ Update dots\n this.dots.forEach((dot, i) => {\n dot.classList.toggle('active', i === index);\n });\n }\n\n next() {\n const nextSlide = (this.currentSlide + 1) % this.slides.length;\n this.updateSlide(nextSlide);\n this.resetAutoplay();\n }\n\n prev() {\n const prevSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;\n this.updateSlide(prevSlide);\n this.resetAutoplay();\n }\n\n goToSlide(index) {\n this.updateSlide(index);\n this.resetAutoplay();\n }\n\n startAutoplay() {\n this.autoplayInterval = setInterval(() => this.next(), this.autoplayDelay);\n }\n\n stopAutoplay() {\n clearInterval(this.autoplayInterval);\n }\n\n resetAutoplay() {\n this.stopAutoplay();\n this.startAutoplay();\n }\n }\n\n \/\/ Initialize carousel when DOM is ready\n document.addEventListener('DOMContentLoaded', () => {\n new Carousel();\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gym Bien-\u00eatre Seniors – Carrousel Gym Bien-\u00eatre Seniors Restez actif et en forme dans une ambiance conviviale 1 \/ 4 \u00c9quilibre & Souplesse D\u00e9veloppez votre \u00e9quilibre et votre souplesse avec des exercices adapt\u00e9s. Renforcement musculaire Des s\u00e9ances de renforcement cibli\u00e9s pour maintenir votre tonus musculaire. Activit\u00e9s ludiques Restez actif tout en vous amusant gr\u00e2ce \u00e0 […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8433","page","type-page","status-publish","hentry","wpbf-post"],"_links":{"self":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/8433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/comments?post=8433"}],"version-history":[{"count":52,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/8433\/revisions"}],"predecessor-version":[{"id":8768,"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/pages\/8433\/revisions\/8768"}],"wp:attachment":[{"href":"https:\/\/action-form.com\/index.php\/wp-json\/wp\/v2\/media?parent=8433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}