BIOFUTUR 2026 - Congr\u00e8s International<\/title>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/swiper\/10.3.1\/swiper-bundle.min.css\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n line-height: 1.6;\r\n background: linear-gradient(135deg, #f8fdf9 0%, #e8f5ea 100%);\r\n min-height: 100vh;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* WordPress Widget Compatibility *\/\r\n .widget-content {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .full-width-hero {\r\n margin-left: calc(-50vw + 50%) !important;\r\n margin-right: calc(-50vw + 50%) !important;\r\n width: 100vw !important;\r\n max-width: none !important;\r\n }\r\n\r\n .hero-section.full-width-hero {\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw !important;\r\n margin-right: -50vw !important;\r\n width: 100vw !important;\r\n max-width: 100vw !important;\r\n }\r\n\r\n .hero-section {\r\n position: relative;\r\n height: 70vh;\r\n margin: 0;\r\n padding: 0;\r\n background: linear-gradient(135deg, rgba(19, 112, 30, 0.7), rgba(26, 138, 38, 0.6)),\r\n url('http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/715478517_1398484185653856_1603627228129107402_n.jpg');\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n text-align: center;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-content {\r\n max-width: 800px;\r\n padding: 0 20px;\r\n z-index: 2;\r\n position: relative;\r\n }\r\n\r\n .hero-title {\r\n font-size: 3.5rem;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n animation: fadeInUp 1s ease-out;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 2.5rem;\r\n margin-bottom: 15px;\r\n opacity: 0.95;\r\n animation: fadeInUp 1s ease-out 0.3s both;\r\n }\r\n\r\n .hero-date {\r\n font-size: 1.1rem;\r\n padding: 12px 25px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 50px;\r\n display: inline-block;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n animation: fadeInUp 1s ease-out 0.6s both;\r\n }\r\n\r\n .hero-bg-pattern {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: none;\r\n opacity: 0.1;\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n }\r\n\r\n .section-title {\r\n text-align: center;\r\n font-size: 2.5rem;\r\n color: #13701e;\r\n margin-bottom: 20px;\r\n font-weight: 700;\r\n position: relative;\r\n }\r\n\r\n .section-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80px;\r\n height: 4px;\r\n background: linear-gradient(90deg, #13701e, #1a8a26);\r\n border-radius: 2px;\r\n }\r\n\r\n .section-subtitle {\r\n text-align: center;\r\n color: #666;\r\n font-size: 1.1rem;\r\n margin-bottom: 50px;\r\n max-width: 600px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n \/* ---------- Video section ---------- *\/\r\n .video-section {\r\n padding: 60px 0 20px;\r\n }\r\n\r\n .video-wrapper {\r\n max-width: 1000px;\r\n margin: 40px auto 0;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 50px rgba(19, 112, 30, 0.2);\r\n background: #000;\r\n position: relative;\r\n aspect-ratio: 16 \/ 9;\r\n }\r\n\r\n .video-wrapper iframe,\r\n .video-wrapper video {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* ---------- Cinematic gallery ---------- *\/\r\n .cinematic-gallery {\r\n position: relative;\r\n width: 100%;\r\n height: 600px;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 25px 60px rgba(19, 112, 30, 0.3);\r\n background: #000;\r\n }\r\n\r\n .cinematic-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .cinematic-slide {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n transform: scale(1.1);\r\n transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n\r\n .cinematic-slide.active {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n .cinematic-slide.prev {\r\n transform: scale(0.9) translateX(-100%);\r\n }\r\n\r\n .cinematic-slide.next {\r\n transform: scale(0.9) translateX(100%);\r\n }\r\n\r\n .cinematic-slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: brightness(0.9) contrast(1.1);\r\n transition: filter 0.8s ease;\r\n }\r\n\r\n .cinematic-slide.active img {\r\n filter: brightness(1) contrast(1);\r\n }\r\n\r\n .cinematic-controls {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n z-index: 10;\r\n }\r\n\r\n .control-btn {\r\n background: rgba(255, 255, 255, 0.2);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .control-btn:hover {\r\n background: rgba(19, 112, 30, 0.8);\r\n border-color: #13701e;\r\n transform: scale(1.1);\r\n }\r\n\r\n .gallery-counter {\r\n color: white;\r\n font-weight: 600;\r\n min-width: 60px;\r\n text-align: center;\r\n }\r\n\r\n .progress-bar {\r\n width: 200px;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.3);\r\n border-radius: 2px;\r\n overflow: hidden;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n width: 0;\r\n background: linear-gradient(90deg, #13701e, #2fb344);\r\n transition: width 0.6s ease;\r\n }\r\n\r\n \/* ---------- Information section ---------- *\/\r\n .information-section {\r\n padding: 80px 0;\r\n background: linear-gradient(135deg, #f8fdf9 0%, #e8f5ea 100%);\r\n }\r\n\r\n .info-row {\r\n display: grid;\r\n grid-template-columns: 45% 55%;\r\n gap: 60px;\r\n align-items: start;\r\n margin-top: 60px;\r\n }\r\n\r\n .pdf-viewer-container {\r\n position: sticky;\r\n top: 30px;\r\n }\r\n\r\n .pdf-viewer {\r\n background: white;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 50px rgba(19, 112, 30, 0.15);\r\n overflow: hidden;\r\n border: 2px solid transparent;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .pdf-viewer:hover {\r\n border-color: #13701e;\r\n transform: translateY(-5px);\r\n box-shadow: 0 25px 60px rgba(19, 112, 30, 0.2);\r\n }\r\n\r\n .pdf-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 25px 30px;\r\n background: linear-gradient(135deg, #13701e, #1a8a26);\r\n color: white;\r\n }\r\n\r\n .pdf-header h3 {\r\n margin: 0;\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n }\r\n\r\n .download-btn {\r\n background: rgba(255, 255, 255, 0.2);\r\n color: white;\r\n text-decoration: none;\r\n padding: 10px 20px;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .download-btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .pdf-page-container {\r\n position: relative;\r\n height: 600px;\r\n overflow: hidden;\r\n }\r\n\r\n .pdf-page {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n transform: perspective(1000px) rotateY(-30deg) translateX(-100%);\r\n transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n transform-origin: left center;\r\n }\r\n\r\n .pdf-page.active {\r\n opacity: 1;\r\n transform: perspective(1000px) rotateY(0deg) translateX(0);\r\n }\r\n\r\n .pdf-page.next {\r\n transform: perspective(1000px) rotateY(30deg) translateX(100%);\r\n }\r\n\r\n .page-content {\r\n width: 100%;\r\n height: 100%;\r\n background: white;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .page-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));\r\n color: white;\r\n padding: 15px;\r\n transform: translateY(100%);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .pdf-page:hover .page-overlay {\r\n transform: translateY(0);\r\n }\r\n\r\n .page-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .pdf-controls {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 20px;\r\n padding: 20px;\r\n background: #f8fdf9;\r\n }\r\n\r\n .pdf-btn {\r\n background: linear-gradient(135deg, #13701e, #1a8a26);\r\n color: white;\r\n border: none;\r\n width: 45px;\r\n height: 45px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .pdf-btn:hover {\r\n transform: scale(1.1);\r\n box-shadow: 0 5px 15px rgba(19, 112, 30, 0.3);\r\n }\r\n\r\n .pdf-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n .page-info {\r\n font-weight: 600;\r\n color: #13701e;\r\n font-size: 1rem;\r\n }\r\n\r\n .description-container {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 50px;\r\n box-shadow: 0 15px 40px rgba(19, 112, 30, 0.1);\r\n border: 2px solid transparent;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .description-container::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #13701e, #1a8a26, #2fb344);\r\n transform: scaleX(0);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .description-container:hover {\r\n border-color: #13701e;\r\n transform: translateY(-5px);\r\n box-shadow: 0 20px 50px rgba(19, 112, 30, 0.15);\r\n }\r\n\r\n .description-container:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .description-title {\r\n font-size: 2.2rem;\r\n color: #13701e;\r\n font-weight: 700;\r\n margin-bottom: 30px;\r\n line-height: 1.3;\r\n }\r\n\r\n .intro-text p {\r\n font-size: 1.1rem;\r\n line-height: 1.7;\r\n color: #555;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .meeting-highlights {\r\n margin: 40px 0;\r\n }\r\n\r\n .meeting-highlights h3 {\r\n color: #13701e;\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .highlight-item {\r\n background: #f8fdf9;\r\n padding: 25px;\r\n border-radius: 15px;\r\n margin-bottom: 20px;\r\n border: 1px solid #e8f5ea;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .highlight-item:hover {\r\n transform: translateX(10px);\r\n box-shadow: 0 10px 30px rgba(19, 112, 30, 0.1);\r\n }\r\n\r\n .highlight-item h4 {\r\n color: #13701e;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .highlight-item h4 i {\r\n font-size: 1rem;\r\n }\r\n\r\n .highlight-item p {\r\n color: #666;\r\n line-height: 1.6;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .social-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: linear-gradient(135deg, #13701e, #1a8a26);\r\n color: white;\r\n text-decoration: none;\r\n padding: 10px 20px;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .social-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(19, 112, 30, 0.3);\r\n background: linear-gradient(135deg, #1a8a26, #2fb344);\r\n }\r\n\r\n .acknowledgment {\r\n background: linear-gradient(135deg, #f0f9f0, #e6f3e6);\r\n padding: 30px;\r\n border-radius: 15px;\r\n margin: 30px 0;\r\n border: 1px solid #d4edda;\r\n }\r\n\r\n .acknowledgment p {\r\n color: #155724;\r\n line-height: 1.6;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .gallery-note {\r\n font-style: italic;\r\n color: #13701e !important;\r\n font-weight: 600;\r\n }\r\n\r\n .hashtags-section {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n margin-top: 30px;\r\n padding-top: 30px;\r\n border-top: 1px solid #eee;\r\n }\r\n\r\n .hashtag {\r\n background: #13701e;\r\n color: white;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n display: inline-block;\r\n }\r\n\r\n .hashtag:hover {\r\n background: #1a8a26;\r\n transform: translateY(-2px);\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .info-row {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .pdf-viewer-container {\r\n position: relative;\r\n top: auto;\r\n }\r\n\r\n .description-container {\r\n padding: 35px;\r\n }\r\n\r\n .hero-title {\r\n font-size: 2.5rem;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero-title {\r\n font-size: 2rem;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .cinematic-gallery {\r\n height: 380px;\r\n }\r\n\r\n .pdf-page-container {\r\n height: 400px;\r\n }\r\n\r\n .description-container {\r\n padding: 25px;\r\n }\r\n\r\n .description-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .hashtags-section {\r\n justify-content: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n \r\n <div class=\"hero-section full-width-hero\" id=\"heroSection\">\r\n <div class=\"hero-bg-pattern\"><\/div>\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title\">BIOFUTUR 2026<\/h1>\r\n <p class=\"hero-subtitle\">Congr\u00e8s International<\/p>\r\n <div class=\"hero-date\">\r\n <i class=\"fas fa-calendar-alt\"><\/i>\r\n 31 mars \u2013 2 avril 2026 \u2022 Djerba, Tunisie\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-section\">\r\n <div class=\"container\">\r\n <h2 class=\"section-title\">Vid\u00e9o de l'\u00e9v\u00e9nement<\/h2>\r\n <p class=\"section-subtitle\">Revivez les temps forts du congr\u00e8s BIOFUTUR 2026<\/p>\r\n <div class=\"video-wrapper\">\r\n <video controls preload=\"metadata\">\r\n <source src=\"http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/AQO8FHOq6JKwFeVa7yJtqWGLNky2V5m11rSppXBi5ued2td31XJz_FdtDMqBCFV7JUS5IBii3Nt_BAUl63dkZBwCMnW1ELjZSIwZT2BDo7_n2w.mp4\" type=\"video\/mp4\">\r\n Votre navigateur ne prend pas en charge la lecture vid\u00e9o.\r\n <\/video>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"information-section\">\r\n <div class=\"container\">\r\n <div class=\"info-row\">\r\n \r\n <div class=\"pdf-viewer-container\">\r\n <div class=\"pdf-viewer\" id=\"pdfViewer\">\r\n <div class=\"pdf-header\">\r\n <h3>Programme du congr\u00e8s<\/h3>\r\n <a href=\"http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/715464271_1398483652320576_3704046388647143965_n.pdf\" target=\"_blank\" class=\"download-btn\">\r\n <i class=\"fas fa-download\"><\/i> T\u00e9l\u00e9charger\r\n <\/a>\r\n <\/div>\r\n <div class=\"pdf-display\">\r\n <div class=\"pdf-page-container\">\r\n <div class=\"pdf-page active\" data-page=\"1\">\r\n <div class=\"page-content\">\r\n <iframe loading=\"lazy\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/715464271_1398483652320576_3704046388647143965_n.pdf\"\r\n width=\"100%\" height=\"100%\" frameborder=\"0\"><\/iframe>\r\n <\/div>\r\n <div class=\"page-overlay\">\r\n <div class=\"page-number\">Page 1<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pdf-controls\">\r\n <button class=\"pdf-btn\" id=\"prevPage\">\r\n <i class=\"fas fa-chevron-left\"><\/i>\r\n <\/button>\r\n <div class=\"page-info\">\r\n <span id=\"currentPage\">1<\/span> \/ <span id=\"totalPages\">--<\/span>\r\n <\/div>\r\n <button class=\"pdf-btn\" id=\"nextPage\">\r\n <i class=\"fas fa-chevron-right\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"description-container\">\r\n <div class=\"description-content\">\r\n <h2 class=\"description-title\">BIOFUTUR 2026 \u2014 Une c\u00e9l\u00e9bration de l'excellence scientifique<\/h2>\r\n\r\n <div class=\"intro-text\">\r\n <p>BIOFUTUR 2026 a \u00e9t\u00e9 une v\u00e9ritable c\u00e9l\u00e9bration de l'excellence scientifique et de\r\n l'innovation. Inaugur\u00e9 par le Pr\u00e9sident de l'Universit\u00e9 de Gab\u00e8s, ce congr\u00e8s international\r\n a rassembl\u00e9 plus de <strong>100 chercheurs<\/strong> ainsi que <strong>13 professeurs et\r\n experts de renomm\u00e9e internationale<\/strong> autour des enjeux des biopolym\u00e8res, des\r\n bioressources et des bioproc\u00e9d\u00e9s.<\/p>\r\n\r\n <p>Durant trois journ\u00e9es riches en \u00e9changes, conf\u00e9rences, pr\u00e9sentations scientifiques et\r\n opportunit\u00e9s de collaboration, les participants ont partag\u00e9 leurs travaux, leurs expertises\r\n et leurs visions pour un avenir plus durable et innovant.<\/p>\r\n <\/div>\r\n\r\n <div class=\"meeting-highlights\">\r\n <h3>Temps forts du congr\u00e8s<\/h3>\r\n\r\n <div class=\"highlight-item\">\r\n <h4><i class=\"fas fa-award\"><\/i> Inauguration officielle<\/h4>\r\n <p>Le congr\u00e8s a \u00e9t\u00e9 inaugur\u00e9 par le Pr\u00e9sident de l'Universit\u00e9 de Gab\u00e8s, marquant\r\n l'ouverture d'un \u00e9v\u00e9nement scientifique d'envergure internationale d\u00e9di\u00e9 aux\r\n biopolym\u00e8res, bioressources et bioproc\u00e9d\u00e9s.<\/p>\r\n <\/div>\r\n\r\n <div class=\"highlight-item\">\r\n <h4><i class=\"fas fa-users\"><\/i> Plus de 100 chercheurs r\u00e9unis<\/h4>\r\n <p>Plus de 100 chercheurs et 13 professeurs et experts de renomm\u00e9e internationale se\r\n sont retrouv\u00e9s pour partager leurs travaux et tisser de nouvelles collaborations\r\n scientifiques.<\/p>\r\n <\/div>\r\n\r\n <div class=\"highlight-item\">\r\n <h4><i class=\"fas fa-flask\"><\/i> Trois journ\u00e9es d'\u00e9changes scientifiques<\/h4>\r\n <p>Conf\u00e9rences, pr\u00e9sentations scientifiques et sessions d'\u00e9change se sont encha\u00een\u00e9es\r\n durant trois jours, ouvrant la voie \u00e0 de nombreuses opportunit\u00e9s de coop\u00e9ration autour\r\n d'un avenir plus durable et innovant.<\/p>\r\n <a href=\"\/fr\/PLACEHOLDER_FACEBOOK_URL\/\" target=\"_blank\" class=\"social-btn\">\r\n <i class=\"fab fa-facebook\"><\/i> Voir sur Facebook\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"acknowledgment\">\r\n <p>Nos sinc\u00e8res remerciements \u00e0 l'ensemble des intervenants, chercheurs, organisateurs et\r\n partenaires qui ont contribu\u00e9 au succ\u00e8s de cet \u00e9v\u00e9nement d'envergure internationale,\r\n t\u00e9moignant du r\u00f4le essentiel de la recherche et de la coop\u00e9ration scientifique dans la\r\n construction des solutions de demain.<\/p>\r\n\r\n <p class=\"gallery-note\">D\u00e9couvrez ci-dessous quelques images de ces moments scientifiques\r\n inspirants.<\/p>\r\n <\/div>\r\n\r\n <div class=\"hashtags-section\">\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/biofutur2026\" target=\"_blank\" class=\"hashtag\">#BIOFUTUR2026<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/recherchescientifique\" target=\"_blank\" class=\"hashtag\">#RechercheScientifique<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/innovation\" target=\"_blank\" class=\"hashtag\">#Innovation<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/universit%C3%A9degab%C3%A8s_atrsipi\" target=\"_blank\" class=\"hashtag\">#Universit\u00e9DeGab\u00e8s_ATRSIPI<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/biotechnologie\" target=\"_blank\" class=\"hashtag\">#Biotechnologie<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/science\" target=\"_blank\" class=\"hashtag\">#Science<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/collaboration_internationale\" target=\"_blank\" class=\"hashtag\">#Collaboration_Internationale<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/djerba\" target=\"_blank\" class=\"hashtag\">#Djerba<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/tunisie\" target=\"_blank\" class=\"hashtag\">#Tunisie<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"container\">\r\n <h2 class=\"section-title\">Galerie photos<\/h2>\r\n <p class=\"section-subtitle\">Quelques images de ces moments scientifiques inspirants<\/p>\r\n <div class=\"cinematic-gallery\" id=\"cinematicGallery\">\r\n <div class=\"cinematic-container\">\r\n <div class=\"cinematic-slide active\">\r\n <img decoding=\"async\" src=\"PLACEHOLDER_PHOTO_BASE_URL1.jpg\" alt=\"BIOFUTUR 2026 - Photo 1\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"cinematic-controls\">\r\n <button class=\"control-btn\" id=\"prevBtn\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\r\n <div class=\"gallery-counter\">\r\n <span id=\"currentImage\">1<\/span> \/ <span id=\"totalImages\">--<\/span>\r\n <\/div>\r\n <button class=\"control-btn\" id=\"nextBtn\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n <\/div>\r\n <div class=\"progress-bar\"><div class=\"progress-fill\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/swiper\/10.3.1\/swiper-bundle.min.js\"><\/script>\r\n\r\n \r\n <script>\r\n class CinematicGallery {\r\n constructor() {\r\n this.currentIndex = 0;\r\n\r\n \/\/ ====== \u00c0 CONFIGURER ======\r\n \/\/ Nombre total de photos\r\n this.totalImages = 20;\r\n \/\/ Mod\u00e8le d'URL des photos : pr\u00e9fixe + num\u00e9ro + extension\r\n \/\/ Exemple : ...\/uploads\/2026\/04\/biofutur1.jpg, biofutur2.jpg ...\r\n this.baseUrl = 'PLACEHOLDER_PHOTO_BASE_URL';\r\n this.extension = '.jpg';\r\n \/\/ ===========================\r\n\r\n this.autoPlayInterval = null;\r\n this.isPlaying = true;\r\n this.images = [];\r\n\r\n this.initializeGallery();\r\n this.createSlides();\r\n this.setupControls();\r\n this.updateSlide();\r\n this.startAutoPlay();\r\n }\r\n\r\n initializeGallery() {\r\n for (let i = 1; i <= this.totalImages; i++) {\r\n this.images.push(`${this.baseUrl}${i}${this.extension}`);\r\n }\r\n document.getElementById('totalImages').textContent = this.totalImages;\r\n }\r\n\r\n createSlides() {\r\n const container = document.querySelector('.cinematic-container');\r\n \/\/ Met \u00e0 jour la premi\u00e8re diapo d\u00e9j\u00e0 pr\u00e9sente\r\n container.querySelector('.cinematic-slide img').src = this.images[0];\r\n\r\n this.images.forEach((imageUrl, index) => {\r\n if (index === 0) return;\r\n const slide = document.createElement('div');\r\n slide.className = 'cinematic-slide';\r\n slide.innerHTML = `<img decoding=\"async\" src=\"${imageUrl}\" alt=\"BIOFUTUR 2026 - Photo ${index + 1}\">`;\r\n container.appendChild(slide);\r\n });\r\n\r\n this.slides = document.querySelectorAll('.cinematic-slide');\r\n }\r\n\r\n setupControls() {\r\n document.getElementById('prevBtn').addEventListener('click', () => this.previousSlide());\r\n document.getElementById('nextBtn').addEventListener('click', () => this.nextSlide());\r\n\r\n const gallery = document.getElementById('cinematicGallery');\r\n gallery.addEventListener('mouseenter', () => this.pauseAutoPlay());\r\n gallery.addEventListener('mouseleave', () => this.startAutoPlay());\r\n }\r\n\r\n updateSlide() {\r\n this.slides.forEach((slide, index) => {\r\n slide.classList.remove('active', 'prev', 'next');\r\n if (index === this.currentIndex) {\r\n slide.classList.add('active');\r\n } else if (index === this.currentIndex - 1 ||\r\n (this.currentIndex === 0 && index === this.totalImages - 1)) {\r\n slide.classList.add('prev');\r\n } else if (index === this.currentIndex + 1 ||\r\n (this.currentIndex === this.totalImages - 1 && index === 0)) {\r\n slide.classList.add('next');\r\n }\r\n });\r\n\r\n document.getElementById('currentImage').textContent = this.currentIndex + 1;\r\n const progress = ((this.currentIndex + 1) \/ this.totalImages) * 100;\r\n document.querySelector('.progress-fill').style.width = `${progress}%`;\r\n }\r\n\r\n nextSlide() {\r\n this.currentIndex = (this.currentIndex + 1) % this.totalImages;\r\n this.updateSlide();\r\n }\r\n\r\n previousSlide() {\r\n this.currentIndex = (this.currentIndex - 1 + this.totalImages) % this.totalImages;\r\n this.updateSlide();\r\n }\r\n\r\n startAutoPlay() {\r\n if (this.autoPlayInterval) return;\r\n this.autoPlayInterval = setInterval(() => {\r\n if (this.isPlaying) this.nextSlide();\r\n }, 4000);\r\n }\r\n\r\n pauseAutoPlay() {\r\n if (this.autoPlayInterval) {\r\n clearInterval(this.autoPlayInterval);\r\n this.autoPlayInterval = null;\r\n }\r\n }\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n new CinematicGallery();\r\n });\r\n <\/script>\r\n\r\n \r\n <script>\r\n class PDFViewer {\r\n constructor() {\r\n this.currentPage = 1;\r\n\r\n \/\/ Liste des documents PDF (un par \"page\")\r\n this.pdfUrls = [\r\n 'http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/715464271_1398483652320576_3704046388647143965_n.pdf',\r\n 'http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/715464124_1398483572320584_1260979135933171975_n.pdf'\r\n ];\r\n this.totalPages = this.pdfUrls.length;\r\n\r\n this.isAnimating = false;\r\n this.init();\r\n }\r\n\r\n init() {\r\n this.createPages();\r\n this.setupControls();\r\n this.updatePageInfo();\r\n this.updateControls();\r\n }\r\n\r\n createPages() {\r\n const container = document.querySelector('.pdf-page-container');\r\n \/\/ La premi\u00e8re page (d\u00e9j\u00e0 pr\u00e9sente) pointe vers le premier PDF\r\n container.querySelector('.pdf-page iframe').src = this.pdfUrls[0];\r\n\r\n for (let i = 2; i <= this.totalPages; i++) {\r\n const page = document.createElement('div');\r\n page.className = 'pdf-page';\r\n page.setAttribute('data-page', i);\r\n page.innerHTML = `\r\n <div class=\"page-content\">\r\n <iframe loading=\"lazy\" src=\"${this.pdfUrls[i - 1]}\" width=\"100%\" height=\"100%\" frameborder=\"0\"><\/iframe>\r\n <\/div>\r\n <div class=\"page-overlay\">\r\n <div class=\"page-number\">Page ${i}<\/div>\r\n <\/div>`;\r\n container.appendChild(page);\r\n }\r\n this.pages = document.querySelectorAll('.pdf-page');\r\n }\r\n\r\n setupControls() {\r\n document.getElementById('prevPage').addEventListener('click', () => this.previousPage());\r\n document.getElementById('nextPage').addEventListener('click', () => this.nextPage());\r\n }\r\n\r\n updatePage() {\r\n if (this.isAnimating) return;\r\n this.isAnimating = true;\r\n\r\n this.pages.forEach((page, index) => {\r\n const pageNumber = index + 1;\r\n page.classList.remove('active', 'next');\r\n if (pageNumber === this.currentPage) {\r\n page.classList.add('active');\r\n } else if (pageNumber > this.currentPage) {\r\n page.classList.add('next');\r\n }\r\n });\r\n\r\n this.updatePageInfo();\r\n this.updateControls();\r\n setTimeout(() => { this.isAnimating = false; }, 800);\r\n }\r\n\r\n updatePageInfo() {\r\n document.getElementById('currentPage').textContent = this.currentPage;\r\n document.getElementById('totalPages').textContent = this.totalPages;\r\n }\r\n\r\n updateControls() {\r\n document.getElementById('prevPage').disabled = this.currentPage === 1;\r\n document.getElementById('nextPage').disabled = this.currentPage === this.totalPages;\r\n }\r\n\r\n nextPage() {\r\n if (this.currentPage < this.totalPages && !this.isAnimating) {\r\n this.currentPage++;\r\n this.updatePage();\r\n }\r\n }\r\n\r\n previousPage() {\r\n if (this.currentPage > 1 && !this.isAnimating) {\r\n this.currentPage--;\r\n this.updatePage();\r\n }\r\n }\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n new PDFViewer();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>BIOFUTUR 2026 – Congr\u00e8s International BIOFUTUR 2026 Congr\u00e8s International 31 mars \u2013 2 avril 2026 \u2022 Djerba, Tunisie Vid\u00e9o de l’\u00e9v\u00e9nement Revivez les temps forts du congr\u00e8s BIOFUTUR 2026 Votre …<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"http:\/\/valostones.com\/fr\/biofutur2026\/\"> <span class=\"screen-reader-text\">BIOFUTUR2026<\/span> Lire la suite\u00a0\u00bb<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_piecal_is_event":false,"_piecal_start_date":"","_piecal_end_date":"","_piecal_is_allday":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-5607","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/comments?post=5607"}],"version-history":[{"count":6,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5607\/revisions"}],"predecessor-version":[{"id":5619,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5607\/revisions\/5619"}],"wp:attachment":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/media?parent=5607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

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

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

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

\n\t\t\t

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

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n BIOFUTUR 2026 - Congr\u00e8s International<\/title>\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/swiper\/10.3.1\/swiper-bundle.min.css\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n line-height: 1.6;\r\n background: linear-gradient(135deg, #f8fdf9 0%, #e8f5ea 100%);\r\n min-height: 100vh;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* WordPress Widget Compatibility *\/\r\n .widget-content {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n }\r\n\r\n .full-width-hero {\r\n margin-left: calc(-50vw + 50%) !important;\r\n margin-right: calc(-50vw + 50%) !important;\r\n width: 100vw !important;\r\n max-width: none !important;\r\n }\r\n\r\n .hero-section.full-width-hero {\r\n position: relative;\r\n left: 50%;\r\n right: 50%;\r\n margin-left: -50vw !important;\r\n margin-right: -50vw !important;\r\n width: 100vw !important;\r\n max-width: 100vw !important;\r\n }\r\n\r\n .hero-section {\r\n position: relative;\r\n height: 70vh;\r\n margin: 0;\r\n padding: 0;\r\n background: linear-gradient(135deg, rgba(19, 112, 30, 0.7), rgba(26, 138, 38, 0.6)),\r\n url('http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/715478517_1398484185653856_1603627228129107402_n.jpg');\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n text-align: center;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-content {\r\n max-width: 800px;\r\n padding: 0 20px;\r\n z-index: 2;\r\n position: relative;\r\n }\r\n\r\n .hero-title {\r\n font-size: 3.5rem;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n animation: fadeInUp 1s ease-out;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 2.5rem;\r\n margin-bottom: 15px;\r\n opacity: 0.95;\r\n animation: fadeInUp 1s ease-out 0.3s both;\r\n }\r\n\r\n .hero-date {\r\n font-size: 1.1rem;\r\n padding: 12px 25px;\r\n background: rgba(255, 255, 255, 0.2);\r\n border-radius: 50px;\r\n display: inline-block;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n animation: fadeInUp 1s ease-out 0.6s both;\r\n }\r\n\r\n .hero-bg-pattern {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: none;\r\n opacity: 0.1;\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n }\r\n\r\n .section-title {\r\n text-align: center;\r\n font-size: 2.5rem;\r\n color: #13701e;\r\n margin-bottom: 20px;\r\n font-weight: 700;\r\n position: relative;\r\n }\r\n\r\n .section-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -10px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80px;\r\n height: 4px;\r\n background: linear-gradient(90deg, #13701e, #1a8a26);\r\n border-radius: 2px;\r\n }\r\n\r\n .section-subtitle {\r\n text-align: center;\r\n color: #666;\r\n font-size: 1.1rem;\r\n margin-bottom: 50px;\r\n max-width: 600px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n \/* ---------- Video section ---------- *\/\r\n .video-section {\r\n padding: 60px 0 20px;\r\n }\r\n\r\n .video-wrapper {\r\n max-width: 1000px;\r\n margin: 40px auto 0;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 50px rgba(19, 112, 30, 0.2);\r\n background: #000;\r\n position: relative;\r\n aspect-ratio: 16 \/ 9;\r\n }\r\n\r\n .video-wrapper iframe,\r\n .video-wrapper video {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n \/* ---------- Cinematic gallery ---------- *\/\r\n .cinematic-gallery {\r\n position: relative;\r\n width: 100%;\r\n height: 600px;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 25px 60px rgba(19, 112, 30, 0.3);\r\n background: #000;\r\n }\r\n\r\n .cinematic-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .cinematic-slide {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n transform: scale(1.1);\r\n transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n\r\n .cinematic-slide.active {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n .cinematic-slide.prev {\r\n transform: scale(0.9) translateX(-100%);\r\n }\r\n\r\n .cinematic-slide.next {\r\n transform: scale(0.9) translateX(100%);\r\n }\r\n\r\n .cinematic-slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: brightness(0.9) contrast(1.1);\r\n transition: filter 0.8s ease;\r\n }\r\n\r\n .cinematic-slide.active img {\r\n filter: brightness(1) contrast(1);\r\n }\r\n\r\n .cinematic-controls {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n z-index: 10;\r\n }\r\n\r\n .control-btn {\r\n background: rgba(255, 255, 255, 0.2);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n color: white;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .control-btn:hover {\r\n background: rgba(19, 112, 30, 0.8);\r\n border-color: #13701e;\r\n transform: scale(1.1);\r\n }\r\n\r\n .gallery-counter {\r\n color: white;\r\n font-weight: 600;\r\n min-width: 60px;\r\n text-align: center;\r\n }\r\n\r\n .progress-bar {\r\n width: 200px;\r\n height: 4px;\r\n background: rgba(255, 255, 255, 0.3);\r\n border-radius: 2px;\r\n overflow: hidden;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n width: 0;\r\n background: linear-gradient(90deg, #13701e, #2fb344);\r\n transition: width 0.6s ease;\r\n }\r\n\r\n \/* ---------- Information section ---------- *\/\r\n .information-section {\r\n padding: 80px 0;\r\n background: linear-gradient(135deg, #f8fdf9 0%, #e8f5ea 100%);\r\n }\r\n\r\n .info-row {\r\n display: grid;\r\n grid-template-columns: 45% 55%;\r\n gap: 60px;\r\n align-items: start;\r\n margin-top: 60px;\r\n }\r\n\r\n .pdf-viewer-container {\r\n position: sticky;\r\n top: 30px;\r\n }\r\n\r\n .pdf-viewer {\r\n background: white;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 50px rgba(19, 112, 30, 0.15);\r\n overflow: hidden;\r\n border: 2px solid transparent;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .pdf-viewer:hover {\r\n border-color: #13701e;\r\n transform: translateY(-5px);\r\n box-shadow: 0 25px 60px rgba(19, 112, 30, 0.2);\r\n }\r\n\r\n .pdf-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 25px 30px;\r\n background: linear-gradient(135deg, #13701e, #1a8a26);\r\n color: white;\r\n }\r\n\r\n .pdf-header h3 {\r\n margin: 0;\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n }\r\n\r\n .download-btn {\r\n background: rgba(255, 255, 255, 0.2);\r\n color: white;\r\n text-decoration: none;\r\n padding: 10px 20px;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n }\r\n\r\n .download-btn:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .pdf-page-container {\r\n position: relative;\r\n height: 600px;\r\n overflow: hidden;\r\n }\r\n\r\n .pdf-page {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n transform: perspective(1000px) rotateY(-30deg) translateX(-100%);\r\n transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n transform-origin: left center;\r\n }\r\n\r\n .pdf-page.active {\r\n opacity: 1;\r\n transform: perspective(1000px) rotateY(0deg) translateX(0);\r\n }\r\n\r\n .pdf-page.next {\r\n transform: perspective(1000px) rotateY(30deg) translateX(100%);\r\n }\r\n\r\n .page-content {\r\n width: 100%;\r\n height: 100%;\r\n background: white;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .page-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));\r\n color: white;\r\n padding: 15px;\r\n transform: translateY(100%);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .pdf-page:hover .page-overlay {\r\n transform: translateY(0);\r\n }\r\n\r\n .page-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .pdf-controls {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 20px;\r\n padding: 20px;\r\n background: #f8fdf9;\r\n }\r\n\r\n .pdf-btn {\r\n background: linear-gradient(135deg, #13701e, #1a8a26);\r\n color: white;\r\n border: none;\r\n width: 45px;\r\n height: 45px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .pdf-btn:hover {\r\n transform: scale(1.1);\r\n box-shadow: 0 5px 15px rgba(19, 112, 30, 0.3);\r\n }\r\n\r\n .pdf-btn:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n .page-info {\r\n font-weight: 600;\r\n color: #13701e;\r\n font-size: 1rem;\r\n }\r\n\r\n .description-container {\r\n background: white;\r\n border-radius: 20px;\r\n padding: 50px;\r\n box-shadow: 0 15px 40px rgba(19, 112, 30, 0.1);\r\n border: 2px solid transparent;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .description-container::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, #13701e, #1a8a26, #2fb344);\r\n transform: scaleX(0);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .description-container:hover {\r\n border-color: #13701e;\r\n transform: translateY(-5px);\r\n box-shadow: 0 20px 50px rgba(19, 112, 30, 0.15);\r\n }\r\n\r\n .description-container:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .description-title {\r\n font-size: 2.2rem;\r\n color: #13701e;\r\n font-weight: 700;\r\n margin-bottom: 30px;\r\n line-height: 1.3;\r\n }\r\n\r\n .intro-text p {\r\n font-size: 1.1rem;\r\n line-height: 1.7;\r\n color: #555;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .meeting-highlights {\r\n margin: 40px 0;\r\n }\r\n\r\n .meeting-highlights h3 {\r\n color: #13701e;\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .highlight-item {\r\n background: #f8fdf9;\r\n padding: 25px;\r\n border-radius: 15px;\r\n margin-bottom: 20px;\r\n border: 1px solid #e8f5ea;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .highlight-item:hover {\r\n transform: translateX(10px);\r\n box-shadow: 0 10px 30px rgba(19, 112, 30, 0.1);\r\n }\r\n\r\n .highlight-item h4 {\r\n color: #13701e;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .highlight-item h4 i {\r\n font-size: 1rem;\r\n }\r\n\r\n .highlight-item p {\r\n color: #666;\r\n line-height: 1.6;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .social-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: linear-gradient(135deg, #13701e, #1a8a26);\r\n color: white;\r\n text-decoration: none;\r\n padding: 10px 20px;\r\n border-radius: 25px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .social-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(19, 112, 30, 0.3);\r\n background: linear-gradient(135deg, #1a8a26, #2fb344);\r\n }\r\n\r\n .acknowledgment {\r\n background: linear-gradient(135deg, #f0f9f0, #e6f3e6);\r\n padding: 30px;\r\n border-radius: 15px;\r\n margin: 30px 0;\r\n border: 1px solid #d4edda;\r\n }\r\n\r\n .acknowledgment p {\r\n color: #155724;\r\n line-height: 1.6;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .gallery-note {\r\n font-style: italic;\r\n color: #13701e !important;\r\n font-weight: 600;\r\n }\r\n\r\n .hashtags-section {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n margin-top: 30px;\r\n padding-top: 30px;\r\n border-top: 1px solid #eee;\r\n }\r\n\r\n .hashtag {\r\n background: #13701e;\r\n color: white;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n display: inline-block;\r\n }\r\n\r\n .hashtag:hover {\r\n background: #1a8a26;\r\n transform: translateY(-2px);\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .info-row {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .pdf-viewer-container {\r\n position: relative;\r\n top: auto;\r\n }\r\n\r\n .description-container {\r\n padding: 35px;\r\n }\r\n\r\n .hero-title {\r\n font-size: 2.5rem;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero-title {\r\n font-size: 2rem;\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .cinematic-gallery {\r\n height: 380px;\r\n }\r\n\r\n .pdf-page-container {\r\n height: 400px;\r\n }\r\n\r\n .description-container {\r\n padding: 25px;\r\n }\r\n\r\n .description-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .hashtags-section {\r\n justify-content: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n \r\n <div class=\"hero-section full-width-hero\" id=\"heroSection\">\r\n <div class=\"hero-bg-pattern\"><\/div>\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title\">BIOFUTUR 2026<\/h1>\r\n <p class=\"hero-subtitle\">Congr\u00e8s International<\/p>\r\n <div class=\"hero-date\">\r\n <i class=\"fas fa-calendar-alt\"><\/i>\r\n 31 mars \u2013 2 avril 2026 \u2022 Djerba, Tunisie\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"video-section\">\r\n <div class=\"container\">\r\n <h2 class=\"section-title\">Vid\u00e9o de l'\u00e9v\u00e9nement<\/h2>\r\n <p class=\"section-subtitle\">Revivez les temps forts du congr\u00e8s BIOFUTUR 2026<\/p>\r\n <div class=\"video-wrapper\">\r\n <video controls preload=\"metadata\">\r\n <source src=\"http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/AQO8FHOq6JKwFeVa7yJtqWGLNky2V5m11rSppXBi5ued2td31XJz_FdtDMqBCFV7JUS5IBii3Nt_BAUl63dkZBwCMnW1ELjZSIwZT2BDo7_n2w.mp4\" type=\"video\/mp4\">\r\n Votre navigateur ne prend pas en charge la lecture vid\u00e9o.\r\n <\/video>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"information-section\">\r\n <div class=\"container\">\r\n <div class=\"info-row\">\r\n \r\n <div class=\"pdf-viewer-container\">\r\n <div class=\"pdf-viewer\" id=\"pdfViewer\">\r\n <div class=\"pdf-header\">\r\n <h3>Programme du congr\u00e8s<\/h3>\r\n <a href=\"http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/715464271_1398483652320576_3704046388647143965_n.pdf\" target=\"_blank\" class=\"download-btn\">\r\n <i class=\"fas fa-download\"><\/i> T\u00e9l\u00e9charger\r\n <\/a>\r\n <\/div>\r\n <div class=\"pdf-display\">\r\n <div class=\"pdf-page-container\">\r\n <div class=\"pdf-page active\" data-page=\"1\">\r\n <div class=\"page-content\">\r\n <iframe loading=\"lazy\" src=\"http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/715464271_1398483652320576_3704046388647143965_n.pdf\"\r\n width=\"100%\" height=\"100%\" frameborder=\"0\"><\/iframe>\r\n <\/div>\r\n <div class=\"page-overlay\">\r\n <div class=\"page-number\">Page 1<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"pdf-controls\">\r\n <button class=\"pdf-btn\" id=\"prevPage\">\r\n <i class=\"fas fa-chevron-left\"><\/i>\r\n <\/button>\r\n <div class=\"page-info\">\r\n <span id=\"currentPage\">1<\/span> \/ <span id=\"totalPages\">--<\/span>\r\n <\/div>\r\n <button class=\"pdf-btn\" id=\"nextPage\">\r\n <i class=\"fas fa-chevron-right\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"description-container\">\r\n <div class=\"description-content\">\r\n <h2 class=\"description-title\">BIOFUTUR 2026 \u2014 Une c\u00e9l\u00e9bration de l'excellence scientifique<\/h2>\r\n\r\n <div class=\"intro-text\">\r\n <p>BIOFUTUR 2026 a \u00e9t\u00e9 une v\u00e9ritable c\u00e9l\u00e9bration de l'excellence scientifique et de\r\n l'innovation. Inaugur\u00e9 par le Pr\u00e9sident de l'Universit\u00e9 de Gab\u00e8s, ce congr\u00e8s international\r\n a rassembl\u00e9 plus de <strong>100 chercheurs<\/strong> ainsi que <strong>13 professeurs et\r\n experts de renomm\u00e9e internationale<\/strong> autour des enjeux des biopolym\u00e8res, des\r\n bioressources et des bioproc\u00e9d\u00e9s.<\/p>\r\n\r\n <p>Durant trois journ\u00e9es riches en \u00e9changes, conf\u00e9rences, pr\u00e9sentations scientifiques et\r\n opportunit\u00e9s de collaboration, les participants ont partag\u00e9 leurs travaux, leurs expertises\r\n et leurs visions pour un avenir plus durable et innovant.<\/p>\r\n <\/div>\r\n\r\n <div class=\"meeting-highlights\">\r\n <h3>Temps forts du congr\u00e8s<\/h3>\r\n\r\n <div class=\"highlight-item\">\r\n <h4><i class=\"fas fa-award\"><\/i> Inauguration officielle<\/h4>\r\n <p>Le congr\u00e8s a \u00e9t\u00e9 inaugur\u00e9 par le Pr\u00e9sident de l'Universit\u00e9 de Gab\u00e8s, marquant\r\n l'ouverture d'un \u00e9v\u00e9nement scientifique d'envergure internationale d\u00e9di\u00e9 aux\r\n biopolym\u00e8res, bioressources et bioproc\u00e9d\u00e9s.<\/p>\r\n <\/div>\r\n\r\n <div class=\"highlight-item\">\r\n <h4><i class=\"fas fa-users\"><\/i> Plus de 100 chercheurs r\u00e9unis<\/h4>\r\n <p>Plus de 100 chercheurs et 13 professeurs et experts de renomm\u00e9e internationale se\r\n sont retrouv\u00e9s pour partager leurs travaux et tisser de nouvelles collaborations\r\n scientifiques.<\/p>\r\n <\/div>\r\n\r\n <div class=\"highlight-item\">\r\n <h4><i class=\"fas fa-flask\"><\/i> Trois journ\u00e9es d'\u00e9changes scientifiques<\/h4>\r\n <p>Conf\u00e9rences, pr\u00e9sentations scientifiques et sessions d'\u00e9change se sont encha\u00een\u00e9es\r\n durant trois jours, ouvrant la voie \u00e0 de nombreuses opportunit\u00e9s de coop\u00e9ration autour\r\n d'un avenir plus durable et innovant.<\/p>\r\n <a href=\"\/fr\/PLACEHOLDER_FACEBOOK_URL\/\" target=\"_blank\" class=\"social-btn\">\r\n <i class=\"fab fa-facebook\"><\/i> Voir sur Facebook\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"acknowledgment\">\r\n <p>Nos sinc\u00e8res remerciements \u00e0 l'ensemble des intervenants, chercheurs, organisateurs et\r\n partenaires qui ont contribu\u00e9 au succ\u00e8s de cet \u00e9v\u00e9nement d'envergure internationale,\r\n t\u00e9moignant du r\u00f4le essentiel de la recherche et de la coop\u00e9ration scientifique dans la\r\n construction des solutions de demain.<\/p>\r\n\r\n <p class=\"gallery-note\">D\u00e9couvrez ci-dessous quelques images de ces moments scientifiques\r\n inspirants.<\/p>\r\n <\/div>\r\n\r\n <div class=\"hashtags-section\">\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/biofutur2026\" target=\"_blank\" class=\"hashtag\">#BIOFUTUR2026<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/recherchescientifique\" target=\"_blank\" class=\"hashtag\">#RechercheScientifique<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/innovation\" target=\"_blank\" class=\"hashtag\">#Innovation<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/universit%C3%A9degab%C3%A8s_atrsipi\" target=\"_blank\" class=\"hashtag\">#Universit\u00e9DeGab\u00e8s_ATRSIPI<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/biotechnologie\" target=\"_blank\" class=\"hashtag\">#Biotechnologie<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/science\" target=\"_blank\" class=\"hashtag\">#Science<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/collaboration_internationale\" target=\"_blank\" class=\"hashtag\">#Collaboration_Internationale<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/djerba\" target=\"_blank\" class=\"hashtag\">#Djerba<\/a>\r\n <a href=\"https:\/\/www.facebook.com\/hashtag\/tunisie\" target=\"_blank\" class=\"hashtag\">#Tunisie<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"container\">\r\n <h2 class=\"section-title\">Galerie photos<\/h2>\r\n <p class=\"section-subtitle\">Quelques images de ces moments scientifiques inspirants<\/p>\r\n <div class=\"cinematic-gallery\" id=\"cinematicGallery\">\r\n <div class=\"cinematic-container\">\r\n <div class=\"cinematic-slide active\">\r\n <img decoding=\"async\" src=\"PLACEHOLDER_PHOTO_BASE_URL1.jpg\" alt=\"BIOFUTUR 2026 - Photo 1\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"cinematic-controls\">\r\n <button class=\"control-btn\" id=\"prevBtn\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\r\n <div class=\"gallery-counter\">\r\n <span id=\"currentImage\">1<\/span> \/ <span id=\"totalImages\">--<\/span>\r\n <\/div>\r\n <button class=\"control-btn\" id=\"nextBtn\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n <\/div>\r\n <div class=\"progress-bar\"><div class=\"progress-fill\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/swiper\/10.3.1\/swiper-bundle.min.js\"><\/script>\r\n\r\n \r\n <script>\r\n class CinematicGallery {\r\n constructor() {\r\n this.currentIndex = 0;\r\n\r\n \/\/ ====== \u00c0 CONFIGURER ======\r\n \/\/ Nombre total de photos\r\n this.totalImages = 20;\r\n \/\/ Mod\u00e8le d'URL des photos : pr\u00e9fixe + num\u00e9ro + extension\r\n \/\/ Exemple : ...\/uploads\/2026\/04\/biofutur1.jpg, biofutur2.jpg ...\r\n this.baseUrl = 'PLACEHOLDER_PHOTO_BASE_URL';\r\n this.extension = '.jpg';\r\n \/\/ ===========================\r\n\r\n this.autoPlayInterval = null;\r\n this.isPlaying = true;\r\n this.images = [];\r\n\r\n this.initializeGallery();\r\n this.createSlides();\r\n this.setupControls();\r\n this.updateSlide();\r\n this.startAutoPlay();\r\n }\r\n\r\n initializeGallery() {\r\n for (let i = 1; i <= this.totalImages; i++) {\r\n this.images.push(`${this.baseUrl}${i}${this.extension}`);\r\n }\r\n document.getElementById('totalImages').textContent = this.totalImages;\r\n }\r\n\r\n createSlides() {\r\n const container = document.querySelector('.cinematic-container');\r\n \/\/ Met \u00e0 jour la premi\u00e8re diapo d\u00e9j\u00e0 pr\u00e9sente\r\n container.querySelector('.cinematic-slide img').src = this.images[0];\r\n\r\n this.images.forEach((imageUrl, index) => {\r\n if (index === 0) return;\r\n const slide = document.createElement('div');\r\n slide.className = 'cinematic-slide';\r\n slide.innerHTML = `<img decoding=\"async\" src=\"${imageUrl}\" alt=\"BIOFUTUR 2026 - Photo ${index + 1}\">`;\r\n container.appendChild(slide);\r\n });\r\n\r\n this.slides = document.querySelectorAll('.cinematic-slide');\r\n }\r\n\r\n setupControls() {\r\n document.getElementById('prevBtn').addEventListener('click', () => this.previousSlide());\r\n document.getElementById('nextBtn').addEventListener('click', () => this.nextSlide());\r\n\r\n const gallery = document.getElementById('cinematicGallery');\r\n gallery.addEventListener('mouseenter', () => this.pauseAutoPlay());\r\n gallery.addEventListener('mouseleave', () => this.startAutoPlay());\r\n }\r\n\r\n updateSlide() {\r\n this.slides.forEach((slide, index) => {\r\n slide.classList.remove('active', 'prev', 'next');\r\n if (index === this.currentIndex) {\r\n slide.classList.add('active');\r\n } else if (index === this.currentIndex - 1 ||\r\n (this.currentIndex === 0 && index === this.totalImages - 1)) {\r\n slide.classList.add('prev');\r\n } else if (index === this.currentIndex + 1 ||\r\n (this.currentIndex === this.totalImages - 1 && index === 0)) {\r\n slide.classList.add('next');\r\n }\r\n });\r\n\r\n document.getElementById('currentImage').textContent = this.currentIndex + 1;\r\n const progress = ((this.currentIndex + 1) \/ this.totalImages) * 100;\r\n document.querySelector('.progress-fill').style.width = `${progress}%`;\r\n }\r\n\r\n nextSlide() {\r\n this.currentIndex = (this.currentIndex + 1) % this.totalImages;\r\n this.updateSlide();\r\n }\r\n\r\n previousSlide() {\r\n this.currentIndex = (this.currentIndex - 1 + this.totalImages) % this.totalImages;\r\n this.updateSlide();\r\n }\r\n\r\n startAutoPlay() {\r\n if (this.autoPlayInterval) return;\r\n this.autoPlayInterval = setInterval(() => {\r\n if (this.isPlaying) this.nextSlide();\r\n }, 4000);\r\n }\r\n\r\n pauseAutoPlay() {\r\n if (this.autoPlayInterval) {\r\n clearInterval(this.autoPlayInterval);\r\n this.autoPlayInterval = null;\r\n }\r\n }\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n new CinematicGallery();\r\n });\r\n <\/script>\r\n\r\n \r\n <script>\r\n class PDFViewer {\r\n constructor() {\r\n this.currentPage = 1;\r\n\r\n \/\/ Liste des documents PDF (un par \"page\")\r\n this.pdfUrls = [\r\n 'http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/715464271_1398483652320576_3704046388647143965_n.pdf',\r\n 'http:\/\/valostones.com\/wp-content\/uploads\/2026\/06\/715464124_1398483572320584_1260979135933171975_n.pdf'\r\n ];\r\n this.totalPages = this.pdfUrls.length;\r\n\r\n this.isAnimating = false;\r\n this.init();\r\n }\r\n\r\n init() {\r\n this.createPages();\r\n this.setupControls();\r\n this.updatePageInfo();\r\n this.updateControls();\r\n }\r\n\r\n createPages() {\r\n const container = document.querySelector('.pdf-page-container');\r\n \/\/ La premi\u00e8re page (d\u00e9j\u00e0 pr\u00e9sente) pointe vers le premier PDF\r\n container.querySelector('.pdf-page iframe').src = this.pdfUrls[0];\r\n\r\n for (let i = 2; i <= this.totalPages; i++) {\r\n const page = document.createElement('div');\r\n page.className = 'pdf-page';\r\n page.setAttribute('data-page', i);\r\n page.innerHTML = `\r\n <div class=\"page-content\">\r\n <iframe loading=\"lazy\" src=\"${this.pdfUrls[i - 1]}\" width=\"100%\" height=\"100%\" frameborder=\"0\"><\/iframe>\r\n <\/div>\r\n <div class=\"page-overlay\">\r\n <div class=\"page-number\">Page ${i}<\/div>\r\n <\/div>`;\r\n container.appendChild(page);\r\n }\r\n this.pages = document.querySelectorAll('.pdf-page');\r\n }\r\n\r\n setupControls() {\r\n document.getElementById('prevPage').addEventListener('click', () => this.previousPage());\r\n document.getElementById('nextPage').addEventListener('click', () => this.nextPage());\r\n }\r\n\r\n updatePage() {\r\n if (this.isAnimating) return;\r\n this.isAnimating = true;\r\n\r\n this.pages.forEach((page, index) => {\r\n const pageNumber = index + 1;\r\n page.classList.remove('active', 'next');\r\n if (pageNumber === this.currentPage) {\r\n page.classList.add('active');\r\n } else if (pageNumber > this.currentPage) {\r\n page.classList.add('next');\r\n }\r\n });\r\n\r\n this.updatePageInfo();\r\n this.updateControls();\r\n setTimeout(() => { this.isAnimating = false; }, 800);\r\n }\r\n\r\n updatePageInfo() {\r\n document.getElementById('currentPage').textContent = this.currentPage;\r\n document.getElementById('totalPages').textContent = this.totalPages;\r\n }\r\n\r\n updateControls() {\r\n document.getElementById('prevPage').disabled = this.currentPage === 1;\r\n document.getElementById('nextPage').disabled = this.currentPage === this.totalPages;\r\n }\r\n\r\n nextPage() {\r\n if (this.currentPage < this.totalPages && !this.isAnimating) {\r\n this.currentPage++;\r\n this.updatePage();\r\n }\r\n }\r\n\r\n previousPage() {\r\n if (this.currentPage > 1 && !this.isAnimating) {\r\n this.currentPage--;\r\n this.updatePage();\r\n }\r\n }\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n new PDFViewer();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>BIOFUTUR 2026 – Congr\u00e8s International BIOFUTUR 2026 Congr\u00e8s International 31 mars \u2013 2 avril 2026 \u2022 Djerba, Tunisie Vid\u00e9o de l’\u00e9v\u00e9nement Revivez les temps forts du congr\u00e8s BIOFUTUR 2026 Votre …<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"http:\/\/valostones.com\/fr\/biofutur2026\/\"> <span class=\"screen-reader-text\">BIOFUTUR2026<\/span> Lire la suite\u00a0\u00bb<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_piecal_is_event":false,"_piecal_start_date":"","_piecal_end_date":"","_piecal_is_allday":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-5607","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/comments?post=5607"}],"version-history":[{"count":6,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5607\/revisions"}],"predecessor-version":[{"id":5619,"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/pages\/5607\/revisions\/5619"}],"wp:attachment":[{"href":"http:\/\/valostones.com\/fr\/wp-json\/wp\/v2\/media?parent=5607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}