Galerie Solidaire<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n darkMode: 'media', \/\/ Automatically adapts to system dark mode\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n },\n animation: {\n 'fade-in': 'fadeIn 0.3s ease-out',\n 'zoom-in': 'zoomIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)',\n },\n keyframes: {\n fadeIn: {\n '0%': { opacity: '0' },\n '100%': { opacity: '1' },\n },\n zoomIn: {\n '0%': { opacity: '0', transform: 'scale(0.95)' },\n '100%': { opacity: '1', transform: 'scale(1)' },\n }\n }\n }\n }\n }\n <\/script>\n <style>\n \/* Custom scrollbar for a premium feel *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n ::-webkit-scrollbar-thumb {\n background-color: #cbd5e1;\n border-radius: 20px;\n }\n @media (prefers-color-scheme: dark) {\n ::-webkit-scrollbar-thumb {\n background-color: #475569;\n }\n }\n \/* Hide scrollbar when lightbox is open to prevent layout shift *\/\n body.lightbox-open {\n overflow: hidden;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 dark:bg-zinc-950 text-gray-900 dark:text-gray-100 antialiased min-h-screen selection:bg-indigo-500 selection:text-white\">\n\n \n <header class=\"w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-12 pt-16 pb-12 text-center\">\n <h1 class=\"text-4xl md:text-5xl font-extrabold tracking-tight mb-4 text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400\">\n Galerie Solidaire\n <\/h1>\n <p class=\"max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-400\">\n Une s\u00e9lection de moments illustrant notre engagement associatif, nos actions sur le terrain et l’impact de notre communaut\u00e9.\n <\/p>\n <\/header>\n\n \n <main class=\"w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-12 pb-24\">\n \n <div id=\"gallery-container\" class=\"columns-1 sm:columns-2 lg:columns-3 gap-6 lg:gap-8\">\n \n <\/div>\n <\/main>\n\n \n <div id=\"lightbox\" class=\"fixed inset-0 z-50 hidden bg-black\/95 backdrop-blur-sm flex-col items-center justify-center transition-opacity duration-300 opacity-0\">\n \n \n <div class=\"absolute top-0 inset-x-0 p-4 flex justify-between items-center z-50 bg-gradient-to-b from-black\/60 to-transparent\">\n <span id=\"lightbox-counter\" class=\"text-white\/80 text-sm font-medium px-4\">1 \/ 10<\/span>\n <button onclick=\"closeLightbox()\" class=\"text-white\/80 hover:text-white p-2 transition-colors rounded-full hover:bg-white\/10 focus:outline-none\" aria-label=\"Close lightbox\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n <\/svg>\n <\/button>\n <\/div>\n\n \n <div class=\"relative w-full h-full flex items-center justify-center p-4 sm:p-12\">\n \n <div id=\"lightbox-loader\" class=\"absolute inset-0 flex items-center justify-center hidden\">\n <svg class=\"animate-spin h-10 w-10 text-white\/50\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\n <\/svg>\n <\/div>\n \n <img decoding=\"async\" id=\"lightbox-img\" src=\"\" alt=\"Full screen image\" class=\"max-w-full max-h-full object-contain rounded-lg shadow-2xl transition-transform duration-300\">\n <\/div>\n\n \n <button onclick=\"prevImage(event)\" class=\"absolute left-2 sm:left-6 top-1\/2 -translate-y-1\/2 text-white\/50 hover:text-white p-3 rounded-full hover:bg-white\/10 transition-all focus:outline-none z-50\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-10 w-10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\n <\/svg>\n <\/button>\n <button onclick=\"nextImage(event)\" class=\"absolute right-2 sm:right-6 top-1\/2 -translate-y-1\/2 text-white\/50 hover:text-white p-3 rounded-full hover:bg-white\/10 transition-all focus:outline-none z-50\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-10 w-10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\n <\/svg>\n <\/button>\n <\/div>\n\n <script>\n \/\/ --- DATA ---\n \/\/ Your specific images\n const images = [\n { url: \"https:\/\/i.ibb.co\/HLPrLQm8\/imgi-7-pexels-photo-6288102-1.jpg\", alt: \"Action solidaire 1\" },\n { url: \"https:\/\/i.ibb.co\/33CJxXs\/imgi-41-pexels-photo-6191136-1-1.jpg\", alt: \"Action solidaire 2\" },\n { url: \"https:\/\/i.ibb.co\/wZZtXBvL\/imgi-5-pexels-photo-7698232-7698232-scaled-rjzq1kk1jhzmwouk2mobgqbx2kllekcxxomgmzj134.jpg\", alt: \"Action solidaire 3\" },\n { url: \"https:\/\/i.ibb.co\/wZVJ8XFm\/imgi-2-pexels-photo-7403042-1-1.jpg\", alt: \"Action solidaire 4\" },\n { url: \"https:\/\/i.ibb.co\/FLhsQCLY\/imgi-40-pexels-photo-7698654-1-1.jpg\", alt: \"Action solidaire 5\" }\n ];\n\n let currentImageIndex = 0;\n const lightbox = document.getElementById('lightbox');\n const lightboxImg = document.getElementById('lightbox-img');\n const lightboxCounter = document.getElementById('lightbox-counter');\n const lightboxLoader = document.getElementById('lightbox-loader');\n\n \/\/ --- RENDER GALLERY ---\n function renderGallery() {\n const container = document.getElementById('gallery-container');\n \n images.forEach((img, index) => {\n \/\/ Using direct URLs\n const thumbUrl = img.url;\n const fullUrl = img.url;\n\n \/\/ Create wrapper (Updated margins to match new gaps)\n const wrapper = document.createElement('div');\n wrapper.className = 'break-inside-avoid mb-6 lg:mb-8 cursor-pointer group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-zinc-800 animate-fade-in shadow-sm hover:shadow-xl transition-all duration-300';\n wrapper.onclick = () => openLightbox(index);\n\n \/\/ Create Image\n const imageEl = document.createElement('img');\n imageEl.src = thumbUrl;\n imageEl.alt = img.alt;\n imageEl.loading = 'lazy'; \/\/ Crucial for performance\n imageEl.className = 'w-full h-auto object-cover transform transition-transform duration-500 group-hover:scale-105';\n \n \/\/ Optional: Overlay on hover\n const overlay = document.createElement('div');\n overlay.className = 'absolute inset-0 bg-black\/0 group-hover:bg-black\/20 transition-colors duration-300 flex items-center justify-center';\n \n const icon = document.createElement('div');\n icon.className = 'opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white transform scale-50 group-hover:scale-100';\n icon.innerHTML = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/><\/svg>`;\n overlay.appendChild(icon);\n\n wrapper.appendChild(imageEl);\n wrapper.appendChild(overlay);\n container.appendChild(wrapper);\n });\n }\n\n \/\/ --- LIGHTBOX LOGIC ---\n function openLightbox(index) {\n currentImageIndex = index;\n document.body.classList.add('lightbox-open'); \/\/ Prevent scrolling\n \n \/\/ Show lightbox container\n lightbox.classList.remove('hidden');\n \/\/ Small delay to allow CSS display:block to apply before changing opacity for smooth transition\n setTimeout(() => {\n lightbox.classList.remove('opacity-0');\n }, 10);\n \n updateLightboxContent();\n }\n\n function closeLightbox() {\n lightbox.classList.add('opacity-0');\n setTimeout(() => {\n lightbox.classList.add('hidden');\n document.body.classList.remove('lightbox-open'); \/\/ Restore scrolling\n \/\/ Clear src to stop loading if closed quickly\n lightboxImg.src = ''; \n }, 300); \/\/ Matches CSS duration\n }\n\n function updateLightboxContent() {\n const img = images[currentImageIndex];\n const fullUrl = img.url;\n \n lightboxCounter.textContent = `${currentImageIndex + 1} \/ ${images.length}`;\n \n \/\/ Handle loading state\n lightboxLoader.classList.remove('hidden');\n lightboxImg.classList.add('opacity-0'); \/\/ Hide old image while new one loads\n \n \/\/ Preload image\n const tempImg = new Image();\n tempImg.onload = () => {\n lightboxImg.src = fullUrl;\n lightboxImg.alt = img.alt;\n lightboxLoader.classList.add('hidden');\n lightboxImg.classList.remove('opacity-0');\n lightboxImg.classList.add('animate-zoom-in');\n \n \/\/ Remove animation class after it finishes so it can be re-triggered\n setTimeout(() => {\n lightboxImg.classList.remove('animate-zoom-in');\n }, 400);\n };\n tempImg.src = fullUrl;\n }\n\n function nextImage(e) {\n if (e) e.stopPropagation();\n currentImageIndex = (currentImageIndex + 1) % images.length;\n updateLightboxContent();\n }\n\n function prevImage(e) {\n if (e) e.stopPropagation();\n currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;\n updateLightboxContent();\n }\n\n \/\/ Close lightbox when clicking outside the image\n lightbox.addEventListener('click', (e) => {\n if (e.target === lightbox || e.target.closest('.p-4.sm\\\\:p-12') === e.target) {\n closeLightbox();\n }\n });\n\n \/\/ Keyboard navigation\n document.addEventListener('keydown', (e) => {\n if (lightbox.classList.contains('hidden')) return;\n \n if (e.key === 'Escape') closeLightbox();\n if (e.key === 'ArrowRight') nextImage();\n if (e.key === 'ArrowLeft') prevImage();\n });\n\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', renderGallery);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Galerie Solidaire Galerie Solidaire Une s\u00e9lection de moments illustrant notre engagement associatif, nos actions sur le terrain et l’impact de notre communaut\u00e9. 1 \/ 10<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-1131","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/pages\/1131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/comments?post=1131"}],"version-history":[{"count":4,"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/pages\/1131\/revisions"}],"predecessor-version":[{"id":1152,"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/pages\/1131\/revisions\/1152"}],"wp:attachment":[{"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/media?parent=1131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1131,"date":"2026-03-12T04:19:13","date_gmt":"2026-03-12T04:19:13","guid":{"rendered":"https:\/\/gourmarines.org\/?page_id=1131"},"modified":"2026-03-13T11:05:26","modified_gmt":"2026-03-13T11:05:26","slug":"1131-2","status":"publish","type":"page","link":"https:\/\/gourmarines.org\/index.php\/1131-2\/","title":{"rendered":"Galerie"},"content":{"rendered":"\n\n\n\n \n \n Galerie Solidaire<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n darkMode: 'media', \/\/ Automatically adapts to system dark mode\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter', 'system-ui', 'sans-serif'],\n },\n animation: {\n 'fade-in': 'fadeIn 0.3s ease-out',\n 'zoom-in': 'zoomIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)',\n },\n keyframes: {\n fadeIn: {\n '0%': { opacity: '0' },\n '100%': { opacity: '1' },\n },\n zoomIn: {\n '0%': { opacity: '0', transform: 'scale(0.95)' },\n '100%': { opacity: '1', transform: 'scale(1)' },\n }\n }\n }\n }\n }\n <\/script>\n <style>\n \/* Custom scrollbar for a premium feel *\/\n ::-webkit-scrollbar {\n width: 8px;\n }\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n ::-webkit-scrollbar-thumb {\n background-color: #cbd5e1;\n border-radius: 20px;\n }\n @media (prefers-color-scheme: dark) {\n ::-webkit-scrollbar-thumb {\n background-color: #475569;\n }\n }\n \/* Hide scrollbar when lightbox is open to prevent layout shift *\/\n body.lightbox-open {\n overflow: hidden;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 dark:bg-zinc-950 text-gray-900 dark:text-gray-100 antialiased min-h-screen selection:bg-indigo-500 selection:text-white\">\n\n \n <header class=\"w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-12 pt-16 pb-12 text-center\">\n <h1 class=\"text-4xl md:text-5xl font-extrabold tracking-tight mb-4 text-transparent bg-clip-text bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400\">\n Galerie Solidaire\n <\/h1>\n <p class=\"max-w-2xl mx-auto text-lg text-gray-600 dark:text-gray-400\">\n Une s\u00e9lection de moments illustrant notre engagement associatif, nos actions sur le terrain et l’impact de notre communaut\u00e9.\n <\/p>\n <\/header>\n\n \n <main class=\"w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-12 pb-24\">\n \n <div id=\"gallery-container\" class=\"columns-1 sm:columns-2 lg:columns-3 gap-6 lg:gap-8\">\n \n <\/div>\n <\/main>\n\n \n <div id=\"lightbox\" class=\"fixed inset-0 z-50 hidden bg-black\/95 backdrop-blur-sm flex-col items-center justify-center transition-opacity duration-300 opacity-0\">\n \n \n <div class=\"absolute top-0 inset-x-0 p-4 flex justify-between items-center z-50 bg-gradient-to-b from-black\/60 to-transparent\">\n <span id=\"lightbox-counter\" class=\"text-white\/80 text-sm font-medium px-4\">1 \/ 10<\/span>\n <button onclick=\"closeLightbox()\" class=\"text-white\/80 hover:text-white p-2 transition-colors rounded-full hover:bg-white\/10 focus:outline-none\" aria-label=\"Close lightbox\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n <\/svg>\n <\/button>\n <\/div>\n\n \n <div class=\"relative w-full h-full flex items-center justify-center p-4 sm:p-12\">\n \n <div id=\"lightbox-loader\" class=\"absolute inset-0 flex items-center justify-center hidden\">\n <svg class=\"animate-spin h-10 w-10 text-white\/50\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle>\n <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\n <\/svg>\n <\/div>\n \n <img decoding=\"async\" id=\"lightbox-img\" src=\"\" alt=\"Full screen image\" class=\"max-w-full max-h-full object-contain rounded-lg shadow-2xl transition-transform duration-300\">\n <\/div>\n\n \n <button onclick=\"prevImage(event)\" class=\"absolute left-2 sm:left-6 top-1\/2 -translate-y-1\/2 text-white\/50 hover:text-white p-3 rounded-full hover:bg-white\/10 transition-all focus:outline-none z-50\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-10 w-10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\" \/>\n <\/svg>\n <\/button>\n <button onclick=\"nextImage(event)\" class=\"absolute right-2 sm:right-6 top-1\/2 -translate-y-1\/2 text-white\/50 hover:text-white p-3 rounded-full hover:bg-white\/10 transition-all focus:outline-none z-50\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-10 w-10\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \/>\n <\/svg>\n <\/button>\n <\/div>\n\n <script>\n \/\/ --- DATA ---\n \/\/ Your specific images\n const images = [\n { url: \"https:\/\/i.ibb.co\/HLPrLQm8\/imgi-7-pexels-photo-6288102-1.jpg\", alt: \"Action solidaire 1\" },\n { url: \"https:\/\/i.ibb.co\/33CJxXs\/imgi-41-pexels-photo-6191136-1-1.jpg\", alt: \"Action solidaire 2\" },\n { url: \"https:\/\/i.ibb.co\/wZZtXBvL\/imgi-5-pexels-photo-7698232-7698232-scaled-rjzq1kk1jhzmwouk2mobgqbx2kllekcxxomgmzj134.jpg\", alt: \"Action solidaire 3\" },\n { url: \"https:\/\/i.ibb.co\/wZVJ8XFm\/imgi-2-pexels-photo-7403042-1-1.jpg\", alt: \"Action solidaire 4\" },\n { url: \"https:\/\/i.ibb.co\/FLhsQCLY\/imgi-40-pexels-photo-7698654-1-1.jpg\", alt: \"Action solidaire 5\" }\n ];\n\n let currentImageIndex = 0;\n const lightbox = document.getElementById('lightbox');\n const lightboxImg = document.getElementById('lightbox-img');\n const lightboxCounter = document.getElementById('lightbox-counter');\n const lightboxLoader = document.getElementById('lightbox-loader');\n\n \/\/ --- RENDER GALLERY ---\n function renderGallery() {\n const container = document.getElementById('gallery-container');\n \n images.forEach((img, index) => {\n \/\/ Using direct URLs\n const thumbUrl = img.url;\n const fullUrl = img.url;\n\n \/\/ Create wrapper (Updated margins to match new gaps)\n const wrapper = document.createElement('div');\n wrapper.className = 'break-inside-avoid mb-6 lg:mb-8 cursor-pointer group relative overflow-hidden rounded-2xl bg-gray-200 dark:bg-zinc-800 animate-fade-in shadow-sm hover:shadow-xl transition-all duration-300';\n wrapper.onclick = () => openLightbox(index);\n\n \/\/ Create Image\n const imageEl = document.createElement('img');\n imageEl.src = thumbUrl;\n imageEl.alt = img.alt;\n imageEl.loading = 'lazy'; \/\/ Crucial for performance\n imageEl.className = 'w-full h-auto object-cover transform transition-transform duration-500 group-hover:scale-105';\n \n \/\/ Optional: Overlay on hover\n const overlay = document.createElement('div');\n overlay.className = 'absolute inset-0 bg-black\/0 group-hover:bg-black\/20 transition-colors duration-300 flex items-center justify-center';\n \n const icon = document.createElement('div');\n icon.className = 'opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-white transform scale-50 group-hover:scale-100';\n icon.innerHTML = `<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-8 w-8\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7\" \/><\/svg>`;\n overlay.appendChild(icon);\n\n wrapper.appendChild(imageEl);\n wrapper.appendChild(overlay);\n container.appendChild(wrapper);\n });\n }\n\n \/\/ --- LIGHTBOX LOGIC ---\n function openLightbox(index) {\n currentImageIndex = index;\n document.body.classList.add('lightbox-open'); \/\/ Prevent scrolling\n \n \/\/ Show lightbox container\n lightbox.classList.remove('hidden');\n \/\/ Small delay to allow CSS display:block to apply before changing opacity for smooth transition\n setTimeout(() => {\n lightbox.classList.remove('opacity-0');\n }, 10);\n \n updateLightboxContent();\n }\n\n function closeLightbox() {\n lightbox.classList.add('opacity-0');\n setTimeout(() => {\n lightbox.classList.add('hidden');\n document.body.classList.remove('lightbox-open'); \/\/ Restore scrolling\n \/\/ Clear src to stop loading if closed quickly\n lightboxImg.src = ''; \n }, 300); \/\/ Matches CSS duration\n }\n\n function updateLightboxContent() {\n const img = images[currentImageIndex];\n const fullUrl = img.url;\n \n lightboxCounter.textContent = `${currentImageIndex + 1} \/ ${images.length}`;\n \n \/\/ Handle loading state\n lightboxLoader.classList.remove('hidden');\n lightboxImg.classList.add('opacity-0'); \/\/ Hide old image while new one loads\n \n \/\/ Preload image\n const tempImg = new Image();\n tempImg.onload = () => {\n lightboxImg.src = fullUrl;\n lightboxImg.alt = img.alt;\n lightboxLoader.classList.add('hidden');\n lightboxImg.classList.remove('opacity-0');\n lightboxImg.classList.add('animate-zoom-in');\n \n \/\/ Remove animation class after it finishes so it can be re-triggered\n setTimeout(() => {\n lightboxImg.classList.remove('animate-zoom-in');\n }, 400);\n };\n tempImg.src = fullUrl;\n }\n\n function nextImage(e) {\n if (e) e.stopPropagation();\n currentImageIndex = (currentImageIndex + 1) % images.length;\n updateLightboxContent();\n }\n\n function prevImage(e) {\n if (e) e.stopPropagation();\n currentImageIndex = (currentImageIndex - 1 + images.length) % images.length;\n updateLightboxContent();\n }\n\n \/\/ Close lightbox when clicking outside the image\n lightbox.addEventListener('click', (e) => {\n if (e.target === lightbox || e.target.closest('.p-4.sm\\\\:p-12') === e.target) {\n closeLightbox();\n }\n });\n\n \/\/ Keyboard navigation\n document.addEventListener('keydown', (e) => {\n if (lightbox.classList.contains('hidden')) return;\n \n if (e.key === 'Escape') closeLightbox();\n if (e.key === 'ArrowRight') nextImage();\n if (e.key === 'ArrowLeft') prevImage();\n });\n\n \/\/ Initialize\n document.addEventListener('DOMContentLoaded', renderGallery);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Galerie Solidaire Galerie Solidaire Une s\u00e9lection de moments illustrant notre engagement associatif, nos actions sur le terrain et l’impact de notre communaut\u00e9. 1 \/ 10<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-1131","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/pages\/1131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/comments?post=1131"}],"version-history":[{"count":4,"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/pages\/1131\/revisions"}],"predecessor-version":[{"id":1152,"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/pages\/1131\/revisions\/1152"}],"wp:attachment":[{"href":"https:\/\/gourmarines.org\/index.php\/wp-json\/wp\/v2\/media?parent=1131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}