{"id":864,"date":"2025-11-19T15:20:08","date_gmt":"2025-11-19T15:20:08","guid":{"rendered":"https:\/\/financeplusht.org\/?page_id=864"},"modified":"2025-11-21T19:27:18","modified_gmt":"2025-11-21T19:27:18","slug":"1_atelier","status":"publish","type":"page","link":"https:\/\/financeplusht.org\/en\/1_atelier\/","title":{"rendered":"1_atelier"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Atelier Cyberharc\u00e8lement - Galerie<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n :root {\r\n --color-primary: #002C5B;\r\n --color-secondary: #1496D2;\r\n --color-accent: #FDC900;\r\n --color-alt: #D3D339;\r\n --color-bg: #f9fafb;\r\n --color-light: #ffffff;\r\n --color-dark: #0A0E27;\r\n --radius-lg: 24px;\r\n --radius-md: 16px;\r\n --radius-sm: 12px;\r\n --shadow-soft: 0 5px 20px rgba(0, 0, 0, 0.08);\r\n --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.15);\r\n --shadow-strong: 0 15px 40px rgba(0, 0, 0, 0.2);\r\n --transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n\r\n \r\n\r\n .workshop-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n position: relative;\r\n }\r\n\r\n \/* Header Section *\/\r\n .workshop-header {\r\n text-align: center;\r\n margin-bottom: 80px;\r\n position: relative;\r\n }\r\n\r\n .workshop-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\r\n color: var(--color-light);\r\n padding: 12px 24px;\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n margin-bottom: 30px;\r\n box-shadow: var(--shadow-medium);\r\n }\r\n\r\n .workshop-badge i {\r\n font-size: 1rem;\r\n }\r\n\r\n .workshop-title {\r\n font-family: \"Montserrat\", sans-serif;\r\n color: var(--color-primary);\r\n font-size: 3.2rem;\r\n font-weight: 800;\r\n margin-bottom: 25px;\r\n line-height: 1.1;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .workshop-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -15px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 120px;\r\n height: 4px;\r\n background: linear-gradient(to right, var(--color-primary), var(--color-accent));\r\n border-radius: 2px;\r\n }\r\n\r\n .workshop-subtitle {\r\n font-size: 1.3rem;\r\n color: var(--color-secondary);\r\n font-weight: 600;\r\n margin-bottom: 30px;\r\n max-width: 800px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .workshop-description {\r\n font-size: 1.1rem;\r\n color: #4a5568;\r\n max-width: 900px;\r\n margin: 0 auto 40px;\r\n line-height: 1.7;\r\n }\r\n\r\n \/* Stats Section *\/\r\n .workshop-stats {\r\n display: flex;\r\n justify-content: center;\r\n gap: 40px;\r\n margin-top: 50px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .stat-item {\r\n text-align: center;\r\n background: var(--color-light);\r\n padding: 25px 30px;\r\n border-radius: var(--radius-md);\r\n box-shadow: var(--shadow-soft);\r\n transition: var(--transition);\r\n min-width: 180px;\r\n }\r\n\r\n .stat-item:hover {\r\n transform: translateY(-8px);\r\n box-shadow: var(--shadow-medium);\r\n }\r\n\r\n .stat-number {\r\n font-size: 2.5rem;\r\n font-weight: 800;\r\n color: var(--color-primary);\r\n margin-bottom: 8px;\r\n display: block;\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.95rem;\r\n color: #64748b;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* Gallery Section *\/\r\n .gallery-section {\r\n margin: 80px 0;\r\n }\r\n\r\n .section-title {\r\n font-family: \"Montserrat\", sans-serif;\r\n font-size: 2.2rem;\r\n font-weight: 700;\r\n color: var(--color-primary);\r\n text-align: center;\r\n margin-bottom: 50px;\r\n position: relative;\r\n }\r\n\r\n .section-title::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80px;\r\n height: 3px;\r\n background: var(--color-accent);\r\n border-radius: 2px;\r\n }\r\n\r\n .gallery {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n gap: 30px;\r\n perspective: 1200px;\r\n }\r\n\r\n .gallery-item {\r\n position: relative;\r\n border-radius: var(--radius-lg);\r\n overflow: hidden;\r\n box-shadow: var(--shadow-soft);\r\n transform-style: preserve-3d;\r\n transition: var(--transition);\r\n height: 300px;\r\n background: var(--color-light);\r\n opacity: 0;\r\n transform: translateY(30px);\r\n animation: fadeInUp 0.8s ease forwards;\r\n }\r\n\r\n .gallery-item:nth-child(1) { animation-delay: 0.1s; }\r\n .gallery-item:nth-child(2) { animation-delay: 0.2s; }\r\n .gallery-item:nth-child(3) { animation-delay: 0.3s; }\r\n .gallery-item:nth-child(4) { animation-delay: 0.4s; }\r\n .gallery-item:nth-child(5) { animation-delay: 0.5s; }\r\n .gallery-item:nth-child(6) { animation-delay: 0.6s; }\r\n\r\n .gallery-item:hover {\r\n transform: translateY(-15px) scale(1.03);\r\n box-shadow: var(--shadow-strong);\r\n z-index: 10;\r\n }\r\n\r\n .gallery-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: var(--transition);\r\n filter: brightness(0.95);\r\n }\r\n\r\n .gallery-item:hover .gallery-img {\r\n transform: scale(1.1);\r\n filter: brightness(1);\r\n }\r\n\r\n .gallery-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n padding: 25px 20px;\r\n background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);\r\n color: white;\r\n text-align: left;\r\n transform: translateY(10px);\r\n opacity: 0;\r\n transition: var(--transition);\r\n }\r\n\r\n .gallery-item:hover .gallery-overlay {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n\r\n .gallery-caption {\r\n font-family: \"Montserrat\", sans-serif;\r\n font-weight: 600;\r\n font-size: 1.2rem;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .gallery-date {\r\n color: var(--color-accent);\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n }\r\n\r\n \/* Effet de bordure color\u00e9e au survol *\/\r\n .gallery-item::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-radius: var(--radius-lg);\r\n padding: 2px;\r\n background: linear-gradient(45deg, var(--color-primary), var(--color-secondary), var(--color-accent));\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n opacity: 0;\r\n transition: var(--transition);\r\n z-index: 1;\r\n }\r\n\r\n .gallery-item:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n \/* Animation d'entr\u00e9e *\/\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 \/* Highlights Section *\/\r\n .highlights-section {\r\n margin: 80px 0;\r\n }\r\n\r\n .highlights-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n }\r\n\r\n .highlight-card {\r\n background: var(--color-light);\r\n border-radius: var(--radius-lg);\r\n padding: 35px 30px;\r\n box-shadow: var(--shadow-soft);\r\n transition: var(--transition);\r\n text-align: center;\r\n border-top: 4px solid var(--color-primary);\r\n }\r\n\r\n .highlight-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: var(--shadow-medium);\r\n }\r\n\r\n .highlight-icon {\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 20px;\r\n color: var(--color-light);\r\n font-size: 1.8rem;\r\n box-shadow: var(--shadow-medium);\r\n }\r\n\r\n .highlight-title {\r\n font-family: \"Montserrat\", sans-serif;\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n color: var(--color-primary);\r\n margin-bottom: 15px;\r\n }\r\n\r\n .highlight-text {\r\n color: #4a5568;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1200px) {\r\n .gallery {\r\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n gap: 25px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .workshop-title {\r\n font-size: 2.4rem;\r\n }\r\n \r\n .workshop-subtitle {\r\n font-size: 1.1rem;\r\n }\r\n \r\n .workshop-description {\r\n font-size: 1rem;\r\n }\r\n \r\n .gallery {\r\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\r\n gap: 20px;\r\n }\r\n \r\n .gallery-item {\r\n height: 240px;\r\n }\r\n \r\n .workshop-stats {\r\n gap: 20px;\r\n }\r\n \r\n .stat-item {\r\n min-width: 140px;\r\n padding: 20px;\r\n }\r\n \r\n .stat-number {\r\n font-size: 2rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n body {\r\n padding: 20px 15px;\r\n }\r\n \r\n .gallery {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .workshop-title {\r\n font-size: 2rem;\r\n }\r\n \r\n .workshop-badge {\r\n padding: 10px 20px;\r\n font-size: 0.8rem;\r\n }\r\n \r\n .workshop-stats {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n \r\n .stat-item {\r\n width: 100%;\r\n max-width: 250px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"workshop-container\">\r\n <!-- Header Section -->\r\n <div class=\"workshop-header\">\r\n <div class=\"workshop-badge\">\r\n <i class=\"fas fa-calendar-alt\"><\/i>\r\n Successful Event\r\n <\/div>\r\n <h1 class=\"workshop-title\">Cyberbullying Workshop<\/h1>\r\n <p class=\"workshop-subtitle\">First Edition \u2013 Montana Hotel, June 28-29, 2025<\/p>\r\n <p class=\"workshop-description\">\r\n Our first edition of the Cyberbullying Workshop was held on June 28-29, 2025, at the Montana Hotel.\nOn this occasion, we had the pleasure of welcoming around fifty young participants from various municipalities, who joined this enriching training focused on the prevention and fight against cyberbullying.\r\n <\/p>\r\n \r\n <div class=\"workshop-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">2<\/span>\r\n <span class=\"stat-label\">Training Days<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">50+<\/span>\r\n <span class=\"stat-label\">Participants<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">6<\/span>\r\n <span class=\"stat-label\">Represented Municipalities<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">5<\/span>\r\n <span class=\"stat-label\">Expert Trainers<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Gallery Section -->\r\n <div class=\"gallery-section\">\r\n <h2 class=\"section-title\">Event Gallery<\/h2>\r\n <div class=\"gallery\">\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/financeplusht.org\/wp-content\/uploads\/2025\/11\/IMG_0751.jpg\" class=\"gallery-img\" alt=\"Participante concentr\u00e9e\">\r\n <div class=\"gallery-overlay\">\r\n <div class=\"gallery-caption\">Concentration et Engagement<\/div>\r\n <div class=\"gallery-date\">28 Juin 2025 \u2022 H\u00f4tel Montana<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/financeplusht.org\/wp-content\/uploads\/2025\/11\/IMG_0752.jpg\" class=\"gallery-img\" alt=\"Participants attentifs\">\r\n <div class=\"gallery-overlay\">\r\n <div class=\"gallery-caption\">Travail d'\u00c9quipe<\/div>\r\n <div class=\"gallery-date\">28 Juin 2025 \u2022 H\u00f4tel Montana<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/financeplusht.org\/wp-content\/uploads\/2025\/11\/IMG_0755.jpg\" class=\"gallery-img\" alt=\"Discussion de groupe\">\r\n <div class=\"gallery-overlay\">\r\n <div class=\"gallery-caption\">\u00c9changes Collaboratifs<\/div>\r\n <div class=\"gallery-date\">29 Juin 2025 \u2022 H\u00f4tel Montana<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/financeplusht.org\/wp-content\/uploads\/2025\/11\/IMG_0741.jpg\" class=\"gallery-img\" alt=\"Session pl\u00e9ni\u00e8re\">\r\n <div class=\"gallery-overlay\">\r\n <div class=\"gallery-caption\">Session Pl\u00e9ni\u00e8re<\/div>\r\n <div class=\"gallery-date\">28 Juin 2025 \u2022 H\u00f4tel Montana<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/financeplusht.org\/wp-content\/uploads\/2025\/11\/IMG_0754.jpg\" class=\"gallery-img\" alt=\"Atelier pratique\">\r\n <div class=\"gallery-overlay\">\r\n <div class=\"gallery-caption\">Atelier Pratique<\/div>\r\n <div class=\"gallery-date\">29 Juin 2025 \u2022 H\u00f4tel Montana<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/financeplusht.org\/wp-content\/uploads\/2025\/11\/IMG_0749.jpg\" class=\"gallery-img\" alt=\"C\u00e9r\u00e9monie de cl\u00f4ture\">\r\n <div class=\"gallery-overlay\">\r\n <div class=\"gallery-caption\">C\u00e9r\u00e9monie de Cl\u00f4ture<\/div>\r\n <div class=\"gallery-date\">29 Juin 2025 \u2022 H\u00f4tel Montana<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Highlights Section -->\r\n <div class=\"highlights-section\">\r\n <h2 class=\"section-title\">Workshop Highlights<\/h2>\r\n <div class=\"highlights-grid\">\r\n <div class=\"highlight-card\">\r\n <div class=\"highlight-icon\">\r\n <i class=\"fas fa-shield-alt\"><\/i>\r\n <\/div>\r\n <h3 class=\"highlight-title\">Active Prevention<\/h3>\r\n <p class=\"highlight-text\">\r\n Training on best practices to prevent cyberbullying and protect your digital life.\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"highlight-card\">\r\n <div class=\"highlight-icon\">\r\n <i class=\"fas fa-users\"><\/i>\r\n <\/div>\r\n <h3 class=\"highlight-title\">Intergenerational Exchanges<\/h3>\r\n <p class=\"highlight-text\">\r\n Constructive dialogue between youth from different municipalities and cybersecurity experts.\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"highlight-card\">\r\n <div class=\"highlight-icon\">\r\n <i class=\"fas fa-tools\"><\/i>\r\n <\/div>\r\n <h3 class=\"highlight-title\">Practical Tools<\/h3>\r\n <p class=\"highlight-text\">\r\n Provision of tools and resources to identify and counter cyberbullying.\r\n <\/p>\r\n <\/div>\r\n \r\n <div class=\"highlight-card\">\r\n <div class=\"highlight-icon\">\r\n <i class=\"fas fa-handshake\"><\/i>\r\n <\/div>\r\n <h3 class=\"highlight-title\">Support Network<\/h3>\r\n <p class=\"highlight-text\">\r\n Creation of a peer support network among participants for ongoing guidance.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Animation suppl\u00e9mentaire pour un effet plus dynamique\r\n document.querySelectorAll('.gallery-item').forEach(item => {\r\n item.addEventListener('mouseenter', function() {\r\n this.style.transition = 'all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\r\n });\r\n \r\n item.addEventListener('mouseleave', function() {\r\n this.style.transition = 'all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)';\r\n });\r\n \r\n \/\/ Effet de clic\r\n item.addEventListener('click', function() {\r\n this.style.transform = 'scale(0.95)';\r\n setTimeout(() => {\r\n this.style.transform = 'translateY(-15px) scale(1.03)';\r\n }, 200);\r\n });\r\n });\r\n\r\n \/\/ Animation des statistiques au d\u00e9filement\r\n const observerOptions = {\r\n threshold: 0.5,\r\n rootMargin: '0px 0px -100px 0px'\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('animated');\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.stat-item').forEach(item => {\r\n observer.observe(item);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-044b07a elementor-widget elementor-widget-html\" data-id=\"044b07a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Section T\u00e9moignages (Compacte) - Finance Plus<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <style>\r\n \/* D\u00e9finition des variables *\/\r\n :root {\r\n --color-primary: #002C5B; \/* Bleu fonc\u00e9 *\/\r\n --color-secondary: #007bff; \/* Bleu vif *\/\r\n --color-accent: #ffc107; \/* Jaune\/Ambre pour l'accentuation *\/\r\n --color-white: #ffffff;\r\n --color-light: #f1f1f1;\r\n --color-gray: #6c757d;\r\n --font-title: 'Montserrat', sans-serif;\r\n --font-body: 'Open Sans', sans-serif;\r\n --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05);\r\n --radius-lg: 15px;\r\n }\r\n\r\n body {\r\n font-family: var(--font-body);\r\n margin: 0;\r\n padding: 0;\r\n background-color: #f8f9fa; \r\n display: flex;\r\n justify-content: center;\r\n }\r\n \r\n \/* --- SECTION GLOBALE --- *\/\r\n .testimonials-section {\r\n max-width: 1100px;\r\n width: 100%;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n background-color: var(--color-white);\r\n }\r\n \r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 40px; \/* Espace r\u00e9duit *\/\r\n }\r\n\r\n .section-title {\r\n font-family: var(--font-title);\r\n font-size: 2.5rem; \/* Taille r\u00e9duite *\/\r\n font-weight: 800;\r\n color: var(--color-primary);\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n margin-bottom: 10px;\r\n position: relative;\r\n }\r\n\r\n .section-title::after {\r\n content: '';\r\n display: block;\r\n width: 40px;\r\n height: 3px;\r\n background-color: var(--color-accent); \r\n margin: 8px auto 0; \/* Espace r\u00e9duit *\/\r\n border-radius: 2px;\r\n }\r\n \r\n .intro-text {\r\n font-size: 1rem; \/* Taille r\u00e9duite *\/\r\n color: var(--color-gray);\r\n margin-top: 15px; \/* Espace r\u00e9duit *\/\r\n line-height: 1.5;\r\n text-align: center;\r\n }\r\n \r\n \/* --- CONTENEUR DES T\u00c9MOIGNAGES : UTILISATION DE LA GRILLE (GRILLE DE 2 COLONNES) --- *\/\r\n .testimonials-container {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr); \/* 2 colonnes sur grand \u00e9cran *\/\r\n gap: 25px; \/* Espace r\u00e9duit entre les cartes *\/\r\n }\r\n \r\n .testimonial-card {\r\n background-color: var(--color-white);\r\n border-radius: var(--radius-lg);\r\n box-shadow: var(--shadow-md);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n padding: 25px; \/* Padding l\u00e9g\u00e8rement r\u00e9duit *\/\r\n border: 1px solid var(--color-light);\r\n display: flex; \/* Garde la structure flex pour l'alignement interne *\/\r\n flex-direction: column;\r\n justify-content: space-between; \/* Assure que les pieds de carte sont align\u00e9s si les textes sont de longueurs diff\u00e9rentes *\/\r\n }\r\n\r\n .testimonial-card:hover {\r\n transform: translateY(-3px); \/* Effet d'\u00e9l\u00e9vation r\u00e9duit *\/\r\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n \/* L'ancienne structure d'image est compl\u00e8tement ignor\u00e9e *\/\r\n .testimonial-image-wrapper {\r\n display: none; \r\n }\r\n \r\n .testimonial-content {\r\n width: 100%; \r\n padding: 0;\r\n flex-grow: 1; \/* Permet au contenu de s'\u00e9tendre *\/\r\n }\r\n\r\n \/* Guillet d'ouverture moderne *\/\r\n .testimonial-content::before {\r\n content: \"\\201C\";\r\n font-family: Georgia, serif;\r\n font-size: 3rem; \/* Taille r\u00e9duite *\/\r\n color: var(--color-secondary);\r\n opacity: 0.2;\r\n line-height: 1;\r\n margin-bottom: -15px; \/* Espace r\u00e9duit *\/\r\n display: block;\r\n }\r\n \r\n .testimonial-text {\r\n font-family: var(--font-body);\r\n font-size: 1rem; \/* Taille r\u00e9duite *\/\r\n font-style: italic;\r\n line-height: 1.6;\r\n margin-bottom: 20px; \/* Espace r\u00e9duit *\/\r\n color: #444;\r\n }\r\n \r\n .author-info {\r\n border-top: 2px solid var(--color-accent);\r\n padding-top: 10px; \/* Espace r\u00e9duit *\/\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start !important; \r\n }\r\n \r\n .author-name {\r\n font-family: var(--font-title);\r\n font-weight: 700;\r\n color: var(--color-primary);\r\n text-transform: uppercase;\r\n font-size: 0.95rem; \/* Taille r\u00e9duite *\/\r\n letter-spacing: 0.5px;\r\n margin-bottom: 2px;\r\n }\r\n \r\n .author-location {\r\n font-family: var(--font-body);\r\n color: var(--color-secondary);\r\n font-weight: 600;\r\n font-size: 0.85rem; \/* Taille r\u00e9duite *\/\r\n display: block;\r\n }\r\n\r\n \/* --- Responsive Design (Passage \u00e0 1 colonne sur petit \u00e9cran) --- *\/\r\n @media (max-width: 992px) {\r\n .testimonials-container {\r\n grid-template-columns: 1fr; \/* 1 colonne sur les tablettes et mobiles *\/\r\n }\r\n .testimonial-card {\r\n \/* Centrer le texte sur mobile pour une meilleure lisibilit\u00e9 *\/\r\n text-align: center; \r\n }\r\n .author-info {\r\n align-items: center !important; \r\n width: 100%;\r\n }\r\n .testimonial-content::before {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"testimonials-section\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">TESTIMONIALS<\/h2>\r\n <div class=\"intro-text\">\r\n <p>Our first edition of the Cyberbullying Workshop was held on June 28-29, 2025. We had the pleasure of welcoming around fifty young participants from various municipalities.<\/p>\r\n <p>Discover what they learned from this enriching training and how it changed their perception of digital safety.<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testimonials-container\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-content\">\r\n <p class=\"testimonial-text\">\r\n The workshop really changed my perspective, especially regarding digital safety. In my neighborhood, we rarely talk about these kinds of topics. Thanks to Finance Plus, I feel better prepared to face online risks. Thank you!\r\n <\/p>\r\n <div class=\"author-info\">\r\n <span class=\"author-name\">Joseph Samienka<\/span>\r\n <span class=\"author-location\">CIT\u00c9 SOLEIL<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-content\">\r\n <p class=\"testimonial-text\">\r\n I was impressed by the quality of the speakers and the relevance of the discussions. This workshop not only helped me better understand cyberbullying, but also taught me how to help the young people around me protect themselves from it.\r\n <\/p>\r\n <div class=\"author-info\">\r\n <span class=\"author-name\">Esther Louis<\/span>\r\n <span class=\"author-location\">DELMAS 2<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-content\">\r\n <p class=\"testimonial-text\">\r\n I didn\u2019t think a workshop like this could teach me so much. I realized that online violence can be just as serious as in the streets. Now, I feel capable of talking to other young people in my neighborhood.\r\n <\/p>\r\n <div class=\"author-info\">\r\n <span class=\"author-name\">Vital NayLine<\/span>\r\n <span class=\"author-location\">DELMAS 3<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-content\">\r\n <p class=\"testimonial-text\">\r\n What I appreciated most was the atmosphere of trust that was created. We were able to ask all our questions, even the most sensitive ones. As a young woman, I now have strategies to protect myself online.\r\n <\/p>\r\n <div class=\"author-info\">\r\n <span class=\"author-name\">No\u00ebne \u00efssa<\/span>\r\n <span class=\"author-location\">DELMAS 3<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Atelier Cyberharc\u00e8lement – Galerie \u00c9v\u00e9nement R\u00e9ussi Atelier Cyberharc\u00e8lement Premi\u00e8re \u00e9dition – H\u00f4tel Montana, 28-29 Juin 2025 Notre premi\u00e8re \u00e9dition de l’atelier sur le cyberharc\u00e8lement s’est tenue les 28 et 29 juin 2025 \u00e0 l’H\u00f4tel Montana. \u00c0 cette occasion, nous avons eu le plaisir d’accueillir une cinquantaine de jeunes issus de diff\u00e9rentes communes, venus participer \u00e0 … <a title=\"1_atelier\" class=\"read-more\" href=\"https:\/\/financeplusht.org\/en\/1_atelier\/\" aria-label=\"Read more about 1_atelier\">Read more<\/a><\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-864","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages\/864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/comments?post=864"}],"version-history":[{"count":22,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages\/864\/revisions"}],"predecessor-version":[{"id":1031,"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/pages\/864\/revisions\/1031"}],"wp:attachment":[{"href":"https:\/\/financeplusht.org\/en\/wp-json\/wp\/v2\/media?parent=864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}