{"id":1315,"date":"2025-04-17T13:01:45","date_gmt":"2025-04-17T13:01:45","guid":{"rendered":"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/?page_id=1315"},"modified":"2025-08-22T10:49:19","modified_gmt":"2025-08-22T10:49:19","slug":"groupe","status":"publish","type":"page","link":"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/index.php\/groupe\/","title":{"rendered":"Groupe"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1315\" class=\"elementor elementor-1315\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fcd2557 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no e-con e-parent\" data-id=\"fcd2557\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3ddcfdd elementor-widget elementor-widget-html\" data-id=\"3ddcfdd\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<body>\r\n    <!-- Hero Section -->\r\n    <section id=\"accueil\" class=\"hero\">\r\n        <div class=\"hero-container\">\r\n            <div class=\"hero-content\">\r\n                <h1 class=\"hero-title\">\r\n                    Votre voyage de r\u00eave <br>\r\n                    <span class=\"gradient-text\">sur mesure<\/span>\r\n                <\/h1>\r\n                <p class=\"hero-subtitle\">\r\n                    Fort d'une exp\u00e9rience de plus de 30 ans dans l'organisation de voyages, Berger Voyages est en mesure de concr\u00e9tiser tous vos projets. La diversit\u00e9 de notre offre et de nos savoir-faire nous permet de vous proposer des solutions en phase avec vos d\u00e9sirs et votre budget ! Nous sommes \u00e0 vos c\u00f4t\u00e9s pour vous offrir la meilleure exp\u00e9rience, et construire un voyage \u00e0 votre image.\r\n                <\/p>\r\n                <div class=\"hero-buttons\">\r\n                    <a href=\"#services\" class=\"btn btn-secondary\">D\u00e9couvrir nos services<\/a>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"hero-image\">\r\n                <div class=\"hero-card\">\r\n                    <i class=\"fas fa-plane\"><\/i>\r\n                    <h3>30+ ans d'exp\u00e9rience<\/h3>\r\n                    <p>Votre voyage \u00e0 votre image<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- About Section -->\r\n    <section id=\"about\" class=\"about\">\r\n        <div class=\"container\">\r\n            <div class=\"section-header\">\r\n                <h2>Pourquoi choisir Berger Voyages ?<\/h2>\r\n                <p>La diversit\u00e9 de notre offre et de nos savoir-faire nous permet de vous proposer des solutions uniques<\/p>\r\n            <\/div>\r\n            <div class=\"about-grid\">\r\n                <div class=\"about-card\">\r\n                    <div class=\"card-icon\">\r\n                        <i class=\"fas fa-award\"><\/i>\r\n                    <\/div>\r\n                    <h3>30 ans d'expertise<\/h3>\r\n                    <p>Une exp\u00e9rience reconnue dans l'organisation de voyages de groupe<\/p>\r\n                <\/div>\r\n                <div class=\"about-card\">\r\n                    <div class=\"card-icon\">\r\n                        <i class=\"fas fa-users\"><\/i>\r\n                    <\/div>\r\n                    <h3>Accompagnement personnalis\u00e9<\/h3>\r\n                    <p>Nous sommes \u00e0 vos c\u00f4t\u00e9s pour vous offrir la meilleure exp\u00e9rience<\/p>\r\n                <\/div>\r\n                <div class=\"about-card\">\r\n                    <div class=\"card-icon\">\r\n                        <i class=\"fas fa-globe\"><\/i>\r\n                    <\/div>\r\n                    <h3>Voyage sur mesure<\/h3>\r\n                    <p>Construisez un voyage \u00e0 votre image selon vos d\u00e9sirs et budget<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Services Section -->\r\n    <section id=\"services\" class=\"services\">\r\n        <div class=\"container\">\r\n            <div class=\"section-header\">\r\n                <h2>Nos avantages exclusifs<\/h2>\r\n                <p>Des offres sp\u00e9cialement con\u00e7ues pour les groupes.<\/p>\r\n            <\/div>\r\n            <div class=\"services-grid\">\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\r\n                        <i class=\"fas fa-percentage\"><\/i>\r\n                    <\/div>\r\n                    <h3>R\u00e9ductions exclusives<\/h3>\r\n                    <p>- Tarif d\u00e9gressif par tranche \u2013 plus le groupe est important plus le prix est r\u00e9duit (base 25-29 puis 30-34, 35-39,-40-44, 45-50 personnes).<\/p>\r\n                        <p>- 1 gratuit\u00e9 accord\u00e9e pour le groupe \u00e0 partir de 45 payants (la 46\u00e8me est donc gratuite).<\/p>\r\n                <\/div>\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\r\n                        <i class=\"fas fa-map-marked-alt\"><\/i>\r\n                    <\/div>\r\n                    <h3>Voyages sur mesure<\/h3>\r\n                    <p>Cr\u00e9ez votre programme personnalis\u00e9<\/p>\r\n                    <ul>\r\n                        <li>Programme \u00e0 votre image<\/li>\r\n                        <li>Tarifs groupe exclusifs<\/li>\r\n                        <li>Dates flexibles<\/li>\r\n                        <li>Lieu de d\u00e9part privatif<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\r\n                        <i class=\"fas fa-handshake\"><\/i>\r\n                    <\/div>\r\n                    <h3>Service cl\u00e9 en main<\/h3>\r\n                    <p>Organisation compl\u00e8te de A \u00e0 Z<\/p>\r\n                    <ul>\r\n                        <li>Gestion administrative<\/li>\r\n                        <li>Interlocuteur unique<\/li>\r\n                        <li>Suivi personnalis\u00e9<\/li>\r\n                        <li>Paiement centralis\u00e9<\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Group Options Section -->\r\n    <section id=\"groupes\" class=\"group-options\">\r\n        <div class=\"container\">\r\n            <div class=\"section-header\">\r\n                <h2>Quelle est la taille de votre groupe ?<\/h2>\r\n                <p>Des solutions adapt\u00e9es selon le nombre de participants<\/p>\r\n            <\/div>\r\n            <div class=\"group-cards\">\r\n               \r\n\r\n                <!-- Groupe Card -->\r\n                <div class=\"group-card featured\">\r\n                    <div class=\"group-badge\">Groupe<\/div>\r\n                    <h3>\u00c0 partir de 20 personnes<\/h3>\r\n                    <div class=\"group-types\">\r\n                        <span class=\"type-tag\">Association\/Amicale<\/span>\r\n                        <span class=\"type-tag\">Comit\u00e9 d'entreprise<\/span>\r\n                        <span class=\"type-tag\">Groupe Sportif<\/span>\r\n                        <span class=\"type-tag\">Famille\/Amis<\/span>\r\n                        <span class=\"type-tag\">Voyage d'entreprise<\/span>\r\n                    <\/div>\r\n                    \r\n                    <div class=\"group-content\">\r\n                        <div class=\"group-option\">\r\n                            <h4><i class=\"fas fa-lock\"><\/i> Cr\u00e9er votre Voyage Sur Mesure (r\u00e9serv\u00e9 \u00e0 votre groupe) \ud83c\udf0e<\/h4>\r\n                            <ul class=\"service-benefits\">\r\n                                <li><i class=\"fas fa-check\"><\/i> <strong>Association\/Amicale :<\/strong> \u00c9laborez vos escapades culturelles pour vos adh\u00e9rents en toute s\u00e9r\u00e9nit\u00e9.<\/li>\r\n                                <li><i class=\"fas fa-check\"><\/i> <strong>Comit\u00e9 d'entreprise :<\/strong> CSE, confiez-nous l'organisation de vos projets.<\/li>\r\n                                <li><i class=\"fas fa-check\"><\/i> <strong>Groupe Sportif :<\/strong> Programmez vos voyages et d\u00e9placements pour supporter vos \u00e9quipes favorites.<\/li>\r\n                                <li><i class=\"fas fa-check\"><\/i> <strong>Famille\/Amis :<\/strong> Partagez des moments uniques et enrichissez-vous de souvenirs inoubliables.<\/li>\r\n                                <li><i class=\"fas fa-check\"><\/i> <strong>Voyage d'entreprise :<\/strong> F\u00e9d\u00e9rez vos \u00e9quipes : s\u00e9minaire, teambuilding\u2026<\/li>\r\n                            <\/ul>\r\n                            <p class=\"highlight\">Nous sommes sp\u00e9cialistes dans l'organisation des voyages sur mesure.<\/p>\r\n                        <\/div>\r\n\r\n                        <div class=\"group-option premium\">\r\n                            <h4><i class=\"fas fa-users\"><\/i> Cr\u00e9er votre Voyage Sur Mesure (ouvert \u00e0 d\u2019autres participants) \ud83c\udf0e<\/h4>\r\n                            \r\n                            <div class=\"why-section\">\r\n                                <h5><i class=\"fas fa-question-circle\"><\/i> Pourquoi ? Pour gagner de l'argent !<\/h5>\r\n                                <p>Parce que de plus en plus d'associations peinent \u00e0 remplir leurs voyages par manque d'adh\u00e9rents, manque de moyens, manque de temps ou manque de communications\u2026<\/p>\r\n                                <p>Nous sommes en mesure de cr\u00e9er votre programme cl\u00e9 en main, r\u00e9pondant en tout point \u00e0 vos d\u00e9sirs et de le proposer parall\u00e8lement \u00e0 nos individuels pour optimiser le remplissage et obtenir ainsi le prix le plus avantageux. Vous pourrez ainsi r\u00e9aliser un programme sur mesure et b\u00e9n\u00e9ficier d'un tarif groupe.<\/p>\r\n                            <\/div>\r\n\r\n                            <div class=\"how-section\">\r\n                                <h5><i class=\"fas fa-cogs\"><\/i> Comment ?<\/h5>\r\n                                <ul>\r\n                                    <li>En ins\u00e9rant \u00ab votre \u00bb programme \u00e9labor\u00e9 sur mesure, dans notre brochure annuelle.<\/li>\r\n                                    <li>En ins\u00e9rant \u00ab votre \u00bb programme \u00e9labor\u00e9 sur mesure, sur notre site internet.<\/li>\r\n                                <\/ul>\r\n                            <\/div>\r\n\r\n                            <div class=\"who-section\">\r\n                                <h5><i class=\"fas fa-target\"><\/i> Pour Qui ?<\/h5>\r\n                                <p>Cette offre convient id\u00e9alement pour les groupes compos\u00e9s entre 20 et 30 personnes lors de la demande.<\/p>\r\n                            <\/div>\r\n                            \r\n                                                        <p>Exprimez-nous vos souhaits avec anticipation, et nous \u00e9laborerons ensemble votre \u00ab programme sur mesure \u00bb pour le faire para\u00eetre dans notre prochaine brochure. Celle-ci sera propos\u00e9e \u00e0 notre client\u00e8le aux dates que vous aurez choisies pr\u00e9alablement et selon les visites de votre choix : ce type de demande personnalis\u00e9e est \u00e0 d\u00e9terminer avec votre conseiller voyage d\u00e8s septembre pour une r\u00e9alisation du voyage l'ann\u00e9e qui suit.<\/p>\r\n                            <p><strong>\u00c0 partir de 35 personnes :<\/strong> vous avez la possibilit\u00e9 \u00e9galement de choisir un voyage dans notre brochure annuelle (pour individuels) et de le privatiser si ce dernier r\u00e9pond \u00e0 vos attentes sans modification.<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button class=\"btn btn-primary\" onclick=\"openContactForm('groupe')\">\r\n                        <i class=\"fas fa-star\"><\/i> Demander un devis\r\n                    <\/button>\r\n                     <a class=\"btn btn-secondary\" href=\"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/index.php\/contact\">\r\n                         Contactez-nous\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n                <!-- Visual caption outside the group-content -->\r\n\r\n        \r\n    <\/section>\r\n\r\n\r\n    <section id=\"services\" class=\"services\">\r\n        <div class=\"container\">\r\n\r\n            <div class=\"services-grid\">\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\r\n                        <i class=\"fas fa-globe\"><\/i>\r\n                    <\/div>\r\n                    <h3>Planifier votre projet de simple d\u00e9placement en groupe :<\/h3>\r\n                    \r\n                    <br>\r\n           \r\n                    \r\n      <p>N\u2019h\u00e9sitez pas \u00e0 consulter notre site de transport :                     <br>\r\n <a class=\"transport-link\"href=\"https:\/\/www.bergervoyages.com\">www.bergervoyages.com<\/a>\r\n        <\/p>\r\n\r\n                <\/div>\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\r\n                        <i class=\"fas fa-users\"><\/i>\r\n                    <\/div>\r\n                    <h3>Consultez nos Offres sp\u00e9ciales Groupes :<\/h3>\r\n        <a class=\"transport-link\"href=\"https:\/\/berger.paperturn-view.com\/berger-voyages-2025?pid=ODc8774705&p=33&v=2.2\">Brochure journ\u00e9e<\/a><br>\r\n      <a class=\"transport-link\"href=\"https:\/\/www.bergervoyages.com\">Autre<\/a>\r\n        <\/p>\r\n                <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n  \r\n   \r\n\r\n    <!-- Contact Modal -->\r\n    <div id=\"contactModal\" class=\"modal\">\r\n        <div class=\"modal-content\">\r\n            <span class=\"close\">&times;<\/span>\r\n            <h3 id=\"modalTitle\">Demande de devis<\/h3>\r\n            <p id=\"modalDescription\">Remplissez ce formulaire pour recevoir votre devis personnalis\u00e9.<\/p>\r\n        <\/div>\r\n    <\/div>\r\n<style>\/* Reset et styles de base *\/\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n    font-family: 'Inter', sans-serif;\r\n    line-height: 1.6;\r\n    color: #333;\r\n    overflow-x: hidden;\r\n}\r\n\r\n.container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n}\r\n\r\n\/* Navigation *\/\r\n.navbar {\r\n    position: fixed;\r\n    top: 0;\r\n    width: 100%;\r\n    background: rgba(255, 255, 255, 0.95);\r\n    backdrop-filter: blur(10px);\r\n    border-bottom: 1px solid rgba(59, 130, 246, 0.1);\r\n    z-index: 1000;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.transport-link {color : #3b82f6}\r\n\r\n.nav-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    height: 70px;\r\n}\r\n\r\n.nav-logo h2 {\r\n    background: linear-gradient(135deg, #3b82f6, #6366f1);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n    font-weight: 700;\r\n    font-size: 1.5rem;\r\n}\r\n\r\n.nav-menu {\r\n    display: flex;\r\n    gap: 2rem;\r\n}\r\n\r\n.nav-link {\r\n    text-decoration: none;\r\n    color: #4b5563;\r\n    font-weight: 500;\r\n    transition: color 0.3s ease;\r\n    position: relative;\r\n    background: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    font-size: 1rem;\r\n}\r\n\r\n.nav-link:hover {\r\n    color: #3b82f6;\r\n}\r\n\r\n.nav-link::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: -5px;\r\n    left: 0;\r\n    width: 0;\r\n    height: 2px;\r\n    background: #3b82f6;\r\n    transition: width 0.3s ease;\r\n}\r\n\r\n\/* Caption under group-content, outside the box *\/\r\n.group-visual-note{\r\n  margin: 1rem 0 2rem;\r\n  margin-top: 5rem;\r\n  background: var(--bv-cream, #F9F6F2);\r\n  border: 1px solid rgba(20,19,104,.08);\r\n  border-left: 4px solid var(--bv-accent, #CD755E);\r\n  border-radius: 12px;\r\n  padding: 1rem 1.25rem;\r\n  color: var(--bv-text, #2a2a2a);\r\n  box-shadow: 0 6px 16px rgba(0,0,0,.04);\r\n}\r\n\r\n.group-visual-note .note-tag{\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: .5rem;\r\n  font-weight: 700;\r\n  font-size: .9rem;\r\n  color: var(--bv-blue, #141368);\r\n  background: #fff;\r\n  border: 1px solid rgba(20,19,104,.12);\r\n  border-radius: 999px;\r\n  padding: .25rem .6rem;\r\n  margin-bottom: .5rem;\r\n}\r\n\r\n.group-visual-note p{\r\n  margin: .3rem 0 0;\r\n  color: var(--bv-muted, #6c6d77);\r\n  line-height: 1.6;\r\n  font-size: .98rem;\r\n}\r\n\r\n\r\n.nav-link:hover::after {\r\n    width: 100%;\r\n}\r\n\r\n.nav-toggle {\r\n    display: none;\r\n    flex-direction: column;\r\n    cursor: pointer;\r\n}\r\n\r\n.bar {\r\n    width: 25px;\r\n    height: 3px;\r\n    background: #4b5563;\r\n    margin: 3px 0;\r\n    transition: 0.3s;\r\n}\r\n\r\n\/* Hero Section *\/\r\n.hero {\r\n    padding: 120px 0 80px;\r\n    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.hero::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    background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" fill=\"%233b82f6\" opacity=\"0.05\"><polygon points=\"1000,100 1000,0 0,100\"\/><\/svg>');\r\n    background-size: cover;\r\n}\r\n\r\n.hero-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    padding: 0 20px;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 4rem;\r\n    align-items: center;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\n.hero-title {\r\n    font-size: 3.5rem;\r\n    font-weight: 700;\r\n    line-height: 1.1;\r\n    margin-bottom: 1.5rem;\r\n    color: #1f2937;\r\n}\r\n\r\n.gradient-text {\r\n    background: linear-gradient(135deg, #3b82f6, #6366f1);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n}\r\n\r\n.hero-subtitle {\r\n    font-size: 1.2rem;\r\n    color: #6b7280;\r\n    margin-bottom: 2rem;\r\n    line-height: 1.6;\r\n}\r\n\r\n.hero-buttons {\r\n    display: flex;\r\n    gap: 1rem;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.btn {\r\n    padding: 14px 28px;\r\n    border-radius: 12px;\r\n    text-decoration: none;\r\n    font-weight: 600;\r\n    transition: all 0.3s ease;\r\n    border: none;\r\n    cursor: pointer;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    font-size: 1rem;\r\n}\r\n\r\n.btn-primary {\r\n    background: linear-gradient(135deg, #3b82f6, #6366f1);\r\n    color: white;\r\n    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);\r\n}\r\n\r\n.btn-primary:hover {\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);\r\n}\r\n\r\n.btn-secondary {\r\n    background: white;\r\n    color: #3b82f6;\r\n    border: 2px solid #3b82f6;\r\n}\r\n\r\n.btn-secondary:hover {\r\n    background: #3b82f6;\r\n    color: white;\r\n    transform: translateY(-2px);\r\n}\r\n\r\n.btn-outline {\r\n    background: transparent;\r\n    color: #3b82f6;\r\n    border: 2px solid #3b82f6;\r\n}\r\n\r\n.btn-outline:hover {\r\n    background: #3b82f6;\r\n    color: white;\r\n}\r\n\r\n.btn-full {\r\n    width: 100%;\r\n    justify-content: center;\r\n}\r\n\r\n.hero-image {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.hero-card {\r\n    background: white;\r\n    padding: 3rem 2rem;\r\n    border-radius: 20px;\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n    text-align: center;\r\n    transform: rotate(5deg);\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.hero-card:hover {\r\n    transform: rotate(0deg) scale(1.05);\r\n}\r\n\r\n.hero-card i {\r\n    font-size: 3rem;\r\n    color: #3b82f6;\r\n    margin-bottom: 1rem;\r\n}\r\n\r\n.hero-card h3 {\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    margin-bottom: 0.5rem;\r\n    color: #1f2937;\r\n}\r\n\r\n\/* Section Headers *\/\r\n.section-header {\r\n    text-align: center;\r\n    margin-bottom: 4rem;\r\n}\r\n\r\n.section-header h2 {\r\n    font-size: 2.5rem;\r\n    font-weight: 700;\r\n    color: #1f2937;\r\n    margin-bottom: 1rem;\r\n}\r\n\r\n.section-header p {\r\n    font-size: 1.1rem;\r\n    color: #6b7280;\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n}\r\n\r\n\/* About Section *\/\r\n.about {\r\n    padding: 80px 0;\r\n    background: white;\r\n}\r\n\r\n.about-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n    gap: 2rem;\r\n}\r\n\r\n.about-card {\r\n    text-align: center;\r\n    padding: 2rem;\r\n    border-radius: 16px;\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.about-card:hover {\r\n    transform: translateY(-10px);\r\n}\r\n\r\n.card-icon {\r\n    width: 80px;\r\n    height: 80px;\r\n    background: linear-gradient(135deg, #3b82f6, #6366f1);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin: 0 auto 1.5rem;\r\n}\r\n\r\n.card-icon i {\r\n    font-size: 2rem;\r\n    color: white;\r\n}\r\n\r\n.about-card h3 {\r\n    font-size: 1.5rem;\r\n    font-weight: 600;\r\n    margin-bottom: 1rem;\r\n    color: #1f2937;\r\n}\r\n\r\n.about-card p {\r\n    color: #6b7280;\r\n    line-height: 1.6;\r\n}\r\n\r\n\/* Services Section *\/\r\n.services {\r\n    padding: 80px 0;\r\n    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n}\r\n\r\n.services-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n    gap: 2rem;\r\n}\r\n\r\n.service-card {\r\n    background: white;\r\n    padding: 2.5rem;\r\n    border-radius: 20px;\r\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.service-card:hover {\r\n    transform: translateY(-10px);\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.service-icon {\r\n    width: 70px;\r\n    height: 70px;\r\n    background: linear-gradient(135deg, #3b82f6, #6366f1);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.service-icon i {\r\n    font-size: 1.8rem;\r\n    color: white;\r\n}\r\n\r\n.service-card h3 {\r\n    font-size: 1.5rem;\r\n    font-weight: 600;\r\n    margin-bottom: 1rem;\r\n    color: #1f2937;\r\n}\r\n\r\n.service-card p {\r\n    color: #6b7280;\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.service-card ul {\r\n    list-style: none;\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.service-card li {\r\n    padding: 0.5rem 0;\r\n    color: #4b5563;\r\n    position: relative;\r\n    padding-left: 1.5rem;\r\n}\r\n\r\n.service-card li::before {\r\n    content: '\u2713';\r\n    position: absolute;\r\n    left: 0;\r\n    color: #10b981;\r\n    font-weight: bold;\r\n}\r\n\r\n.service-note {\r\n    font-size: 0.9rem;\r\n    color: #f59e0b;\r\n    font-style: italic;\r\n    margin-top: 1rem;\r\n}\r\n\r\n\/* Group Options Section *\/\r\n.group-options {\r\n    padding: 80px 0;\r\n    background: white;\r\n}\r\n\r\n.group-cards {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\r\n    gap: 3rem;\r\n    max-width: 1400px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.group-card {\r\n    background: white;\r\n    border: 3px solid #e5e7eb;\r\n    border-radius: 20px;\r\n    padding: 3rem;\r\n    text-align: left;\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n}\r\n\r\n.group-card.featured {\r\n    border-color: #3b82f6;\r\n    transform: scale(1.02);\r\n    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);\r\n}\r\n\r\n.group-card:hover {\r\n    transform: translateY(-10px);\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.group-card.featured:hover {\r\n    transform: scale(1.02) translateY(-10px);\r\n}\r\n\r\n.group-badge {\r\n    background: linear-gradient(135deg, #3b82f6, #6366f1);\r\n    color: white;\r\n    padding: 0.5rem 1rem;\r\n    border-radius: 20px;\r\n    font-weight: 600;\r\n    font-size: 0.9rem;\r\n    display: inline-block;\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.group-card h3 {\r\n    font-size: 2rem;\r\n    font-weight: 700;\r\n    margin-bottom: 2rem;\r\n    color: #1f2937;\r\n    text-align: center;\r\n}\r\n\r\n.group-types {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    gap: 0.5rem;\r\n    justify-content: center;\r\n    margin-bottom: 2rem;\r\n}\r\n\r\n.type-tag {\r\n    background: #f3f4f6;\r\n    color: #4b5563;\r\n    padding: 0.3rem 0.8rem;\r\n    border-radius: 15px;\r\n    font-size: 0.8rem;\r\n    font-weight: 500;\r\n}\r\n\r\n.group-content {\r\n    margin-bottom: 2rem;\r\n}\r\n\r\n.group-option {\r\n    background: #f8fafc;\r\n    padding: 1.5rem;\r\n    border-radius: 12px;\r\n    margin-bottom: 1.5rem;\r\n    border-left: 4px solid #3b82f6;\r\n}\r\n\r\n.group-option h4 {\r\n    color: #1f2937;\r\n    font-size: 1.2rem;\r\n    font-weight: 600;\r\n    margin-bottom: 1rem;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n}\r\n\r\n.group-option h4 i {\r\n    color: #3b82f6;\r\n}\r\n\r\n.group-option p {\r\n    color: #4b5563;\r\n    margin-bottom: 1rem;\r\n    line-height: 1.6;\r\n}\r\n\r\n.discount-list {\r\n    list-style: none;\r\n    margin: 1rem 0;\r\n}\r\n\r\n.discount-list li {\r\n    padding: 0.5rem 0;\r\n    color: #10b981;\r\n    font-weight: 600;\r\n    font-size: 1.1rem;\r\n}\r\n\r\n.conditions {\r\n    background: #fef3c7;\r\n    padding: 1rem;\r\n    border-radius: 8px;\r\n    border-left: 4px solid #f59e0b;\r\n    margin-top: 1rem;\r\n}\r\n\r\n.conditions p {\r\n    color: #92400e;\r\n    font-size: 0.9rem;\r\n    margin: 0;\r\n}\r\n\r\n.custom-program {\r\n    background: #e0f2fe;\r\n    padding: 1rem;\r\n    border-radius: 8px;\r\n    border-left: 4px solid #0284c7;\r\n    margin-top: 1rem;\r\n}\r\n\r\n.custom-program p {\r\n    color: #0c4a6e;\r\n    margin: 0;\r\n}\r\n\r\n.premium {\r\n    background: #000;\r\n    border-left-color: #f59e0b;\r\n}\r\n\r\n.service-benefits {\r\n    list-style: none;\r\n    margin: 1rem 0;\r\n}\r\n\r\n.service-benefits li {\r\n    padding: 0.5rem 0;\r\n    color: #4b5563;\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 0.5rem;\r\n}\r\n\r\n.service-benefits i {\r\n    color: #10b981;\r\n    margin-top: 0.2rem;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.highlight {\r\n    background: #dcfce7;\r\n    padding: 1rem;\r\n    border-radius: 8px;\r\n    color: #166534;\r\n    font-weight: 600;\r\n    text-align: center;\r\n    border-left: 4px solid #16a34a;\r\n}\r\n\r\n\r\n\r\n.why-section, .how-section, .who-section {\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.why-section h5, .how-section h5, .who-section h5 {\r\n    color: var(--bv-accent);\r\n    font-size: 1.1rem;\r\n    font-weight: 600;\r\n    margin-bottom: 0.5rem;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n}\r\n\r\n\r\n.how-section ul {\r\n    list-style: none;\r\n    margin-left: 1rem;\r\n}\r\n\r\n.how-section li {\r\n    padding: 0.25rem 0;\r\n    position: relative;\r\n}\r\n\r\n.how-section li::before {\r\n    content: '\u2192';\r\n    position: absolute;\r\n    left: -1rem;\r\n    color: #f59e0b;\r\n    font-weight: bold;\r\n}\r\n\r\n.additional-info {\r\n    background: #f1f5f9;\r\n    padding: 1.5rem;\r\n    border-radius: 12px;\r\n    margin-top: 1.5rem;\r\n    border-left: 4px solid #64748b;\r\n}\r\n\r\n.additional-info p {\r\n    color: #475569;\r\n    margin-bottom: 1rem;\r\n    line-height: 1.6;\r\n}\r\n\r\n.additional-info p:last-child {\r\n    margin-bottom: 0;\r\n}\r\n\r\n\/* Contact Section *\/\r\n.contact {\r\n    padding: 80px 0;\r\n    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);\r\n    color: white;\r\n}\r\n\r\n.contact .section-header h2,\r\n.contact .section-header p {\r\n    color: white;\r\n}\r\n\r\n.contact-content {\r\n    display: grid;\r\n    grid-template-columns: 1fr 2fr;\r\n    gap: 4rem;\r\n    align-items: start;\r\n}\r\n\r\n.contact-info h3 {\r\n    font-size: 1.8rem;\r\n    font-weight: 700;\r\n    margin-bottom: 2rem;\r\n    color: white;\r\n}\r\n\r\n.contact-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n    margin-bottom: 1.5rem;\r\n    color: #d1d5db;\r\n}\r\n\r\n.contact-item i {\r\n    width: 20px;\r\n    color: #3b82f6;\r\n}\r\n\r\n.contact-form {\r\n    background: white;\r\n    padding: 2.5rem;\r\n    border-radius: 20px;\r\n    color: #333;\r\n}\r\n\r\n.form-row {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 1rem;\r\n}\r\n\r\n.form-group {\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.form-group label {\r\n    display: block;\r\n    margin-bottom: 0.5rem;\r\n    font-weight: 600;\r\n    color: #374151;\r\n}\r\n\r\n.form-group input,\r\n.form-group select,\r\n.form-group textarea {\r\n    width: 100%;\r\n    padding: 12px 16px;\r\n    border: 2px solid #e5e7eb;\r\n    border-radius: 8px;\r\n    font-size: 1rem;\r\n    transition: border-color 0.3s ease;\r\n}\r\n\r\n.form-group input:focus,\r\n.form-group select:focus,\r\n.form-group textarea:focus {\r\n    outline: none;\r\n    border-color: #3b82f6;\r\n}\r\n\r\n.form-group textarea {\r\n    resize: vertical;\r\n    min-height: 120px;\r\n}\r\n\r\n\/* Footer *\/\r\n.footer {\r\n    background: #1f2937;\r\n    color: white;\r\n    padding: 60px 0 20px;\r\n}\r\n\r\n.footer-content {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n    gap: 3rem;\r\n    margin-bottom: 3rem;\r\n}\r\n\r\n.footer-section h3,\r\n.footer-section h4 {\r\n    margin-bottom: 1.5rem;\r\n    color: white;\r\n}\r\n\r\n.footer-section h3 {\r\n    font-size: 1.5rem;\r\n    background: linear-gradient(135deg, #3b82f6, #6366f1);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n}\r\n\r\n.footer-section p {\r\n    color: #d1d5db;\r\n    line-height: 1.6;\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.footer-section ul {\r\n    list-style: none;\r\n}\r\n\r\n.footer-section li {\r\n    margin-bottom: 0.8rem;\r\n}\r\n\r\n.footer-section a {\r\n    color: #d1d5db;\r\n    text-decoration: none;\r\n    transition: color 0.3s ease;\r\n}\r\n\r\n.footer-section a:hover {\r\n    color: #3b82f6;\r\n}\r\n\r\n.social-links {\r\n    display: flex;\r\n    gap: 1rem;\r\n}\r\n\r\n.social-links a {\r\n    width: 40px;\r\n    height: 40px;\r\n    background: #374151;\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.social-links a:hover {\r\n    background: #3b82f6;\r\n    transform: translateY(-2px);\r\n}\r\n\r\n.footer-bottom {\r\n    border-top: 1px solid #374151;\r\n    padding-top: 2rem;\r\n    text-align: center;\r\n    color: #9ca3af;\r\n}\r\n\r\n\/* Modal *\/\r\n.modal {\r\n    display: none;\r\n    position: fixed;\r\n    z-index: 2000;\r\n    left: 0;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n.modal-content {\r\n    background-color: white;\r\n    margin: 15% auto;\r\n    padding: 2rem;\r\n    border-radius: 20px;\r\n    width: 80%;\r\n    max-width: 500px;\r\n    text-align: center;\r\n}\r\n\r\n.close {\r\n    color: #aaa;\r\n    float: right;\r\n    font-size: 28px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n}\r\n\r\n.close:hover {\r\n    color: #000;\r\n}\r\n\r\n\/* Animations *\/\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.fade-in-up {\r\n    animation: fadeInUp 0.6s ease-out;\r\n}\r\n\r\n\/* Responsive Design *\/\r\n@media (max-width: 968px) {\r\n    .nav-menu {\r\n        position: fixed;\r\n        left: -100%;\r\n        top: 70px;\r\n        flex-direction: column;\r\n        background-color: white;\r\n        width: 100%;\r\n        text-align: center;\r\n        transition: 0.3s;\r\n        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);\r\n        padding: 2rem 0;\r\n    }\r\n\r\n    .nav-menu.active {\r\n        left: 0;\r\n    }\r\n\r\n    .nav-toggle {\r\n        display: flex;\r\n    }\r\n\r\n    .hero-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 2rem;\r\n        text-align: center;\r\n    }\r\n\r\n    .hero-title {\r\n        font-size: 2.5rem;\r\n    }\r\n\r\n    .contact-content {\r\n        grid-template-columns: 1fr;\r\n        gap: 2rem;\r\n    }\r\n\r\n    .form-row {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .group-cards {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .group-card.featured {\r\n        transform: none;\r\n    }\r\n\r\n    .hero-buttons {\r\n        justify-content: center;\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    .section-header h2 {\r\n        font-size: 2rem;\r\n    }\r\n\r\n    .services-grid,\r\n    .about-grid {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .btn {\r\n        padding: 12px 24px;\r\n        font-size: 0.9rem;\r\n    }\r\n\r\n    .container {\r\n        padding: 0 15px;\r\n    }\r\n\r\n    .hero {\r\n        padding: 100px 0 60px;\r\n    }\r\n\r\n    .about,\r\n    .services,\r\n    .group-options,\r\n    .contact {\r\n        padding: 60px 0;\r\n    }\r\n\r\n    .group-cards {\r\n        grid-template-columns: 1fr;\r\n    }\r\n\r\n    .group-card {\r\n        padding: 2rem;\r\n    }\r\n\r\n    .form-row {\r\n        grid-template-columns: 1fr;\r\n    }\r\n}\r\n\r\n\/* ===== Berger Voyages theme override (match screenshot) ===== *\/\r\n:root{\r\n  --bv-blue: #141368;         \/* deep royal blue *\/\r\n  --bv-blue-2: #282844;       \/* dark slate\/indigo *\/\r\n  --bv-cream: #F9F6F2;        \/* light cream bg *\/\r\n  --bv-text: #2a2a2a;         \/* main text *\/\r\n  --bv-muted: #6c6d77;        \/* muted text *\/\r\n  --bv-accent: #CD755E;       \/* warm red-orange *\/\r\n  --bv-accent-dark: #B65F4A;  \/* hover *\/\r\n  --bv-white: #ffffff;\r\n}\r\n\r\n\/* Base *\/\r\nbody{ color:var(--bv-text); }\r\n.section-header p,\r\n.about-card p,\r\n.service-card p,\r\n.group-option p,\r\n.additional-info p{ color:var(--bv-muted); }\r\n\r\n\/* Navbar *\/\r\n.navbar{\r\n  background: var(--bv-white) !important;\r\n  border-bottom: 1px solid rgba(20,19,104,.08);\r\n}\r\n.nav-link{ color:#3b3b46; }\r\n.nav-link:hover{ color:var(--bv-blue); }\r\n.nav-link::after{ background: var(--bv-blue); }\r\n\r\n\/* HERO *\/\r\n.hero{\r\n  background: var(--bv-cream);\r\n}\r\n.hero::before{ background:none; }           \/* remove the light polygon *\/\r\n.hero-title{ color: var(--bv-blue); }       \/* strong brand blue title *\/\r\n.gradient-text{\r\n  background: linear-gradient(135deg,var(--bv-blue), var(--bv-blue-2));\r\n  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;\r\n}\r\n.hero-subtitle{ color: #60606a; }\r\n\r\n\/* Buttons *\/\r\n.btn{ border-radius: 10px; }\r\n.btn-primary{\r\n  background: var(--bv-accent);\r\n  color: var(--bv-white);\r\n  box-shadow: 0 4px 14px rgba(205,117,94,.25);\r\n}\r\n.btn-primary:hover{ background: var(--bv-accent-dark); transform: translateY(-2px); }\r\n\r\n.btn-secondary{\r\n  background: transparent;\r\n  color: var(--bv-blue);\r\n  border: 2px solid var(--bv-blue);\r\n}\r\n.btn-secondary:hover{ background: var(--bv-blue); color: var(--bv-white); }\r\n\r\n.btn-outline{\r\n  color: var(--bv-accent);\r\n  border-color: var(--bv-accent);\r\n}\r\n.btn-outline:hover{ background: var(--bv-accent); color: var(--bv-white); }\r\n\r\n\/* Icon pills & accents *\/\r\n.card-icon,\r\n.service-icon,\r\n.group-badge{\r\n  background: linear-gradient(135deg,var(--bv-blue), var(--bv-blue-2));\r\n}\r\n.hero-card i{ color: var(--bv-blue); }\r\n\r\n\/* Sections *\/\r\n.about{ background: var(--bv-white); }\r\n.services{ background: var(--bv-cream); }\r\n.section-header h2{ color: var(--bv-blue); }\r\n\r\n\/* Service list ticks -> brand accent instead of green *\/\r\n.service-card li::before{ color: var(--bv-accent); }\r\n\r\n\/* Group cards *\/\r\n.group-card{ border-color:#e9e9ef; }\r\n.group-card.featured{\r\n  border-color: var(--bv-blue);\r\n  box-shadow: 0 18px 38px rgba(20,19,104,.18);\r\n}\r\n.group-option{ border-left-color: var(--bv-blue); background:#f6f7fb; }\r\n.service-benefits i{ color: var(--bv-accent); }\r\n.highlight{\r\n  background:#ffece5; color:#7c2f20; border-left-color: var(--bv-accent);\r\n}\r\n\r\n\/* Info boxes *\/\r\n.conditions{ background:#fff5e6; border-left-color:#f59e0b; } \/* keep \u201cconditions\u201d in amber *\/\r\n.custom-program{ background:#eef3ff; border-left-color: var(--bv-blue); }\r\n\r\n\/* Contact strip *\/\r\n.contact{\r\n  background: linear-gradient(135deg,var(--bv-blue), var(--bv-blue-2));\r\n}\r\n\r\n\/* Footer *\/\r\n.footer{\r\n  background: var(--bv-blue);\r\n}\r\n.footer-bottom{ border-top-color: rgba(255,255,255,.15); color:#cfd3ea; }\r\n.footer-section h3{ \r\n  background: linear-gradient(135deg,#ffffff,#d6daf7);\r\n  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;\r\n}\r\n.footer-section a:hover{ color:#ffb29c; }  \/* subtle warm hover *\/\r\n\r\n\/* Notifications, toasts *\/\r\n.notification{ background: var(--bv-accent) !important; }\r\n\r\n\/* Misc tweaks *\/\r\n.section-header p{ color:#767b8c; }\r\n.type-tag{ background:#eef0fb; color:var(--bv-blue); }\r\n\r\n\r\n\/* Smooth scrolling *\/\r\nhtml {\r\n    scroll-behavior: smooth;\r\n}\r\n\r\n\/* Loading animation *\/\r\n.loading {\r\n    opacity: 0;\r\n    transform: translateY(20px);\r\n    transition: all 0.6s ease;\r\n}\r\n\r\n.loading.loaded {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n}<\/style>\r\n    <script src=\"https:\/\/cdn.gpteng.co\/gptengineer.js\" type=\"module\"><\/script>\r\n    <script>\/\/ Navigation Mobile\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const navToggle = document.getElementById('nav-toggle');\r\n    const navMenu = document.getElementById('nav-menu');\r\n    const navLinks = document.querySelectorAll('.nav-link');\r\n\r\n    \/\/ Toggle mobile menu\r\n    navToggle.addEventListener('click', function() {\r\n        navMenu.classList.toggle('active');\r\n        \r\n        \/\/ Animate hamburger\r\n        const bars = navToggle.querySelectorAll('.bar');\r\n        bars.forEach((bar, index) => {\r\n            if (navMenu.classList.contains('active')) {\r\n                if (index === 0) bar.style.transform = 'rotate(-45deg) translate(-5px, 6px)';\r\n                if (index === 1) bar.style.opacity = '0';\r\n                if (index === 2) bar.style.transform = 'rotate(45deg) translate(-5px, -6px)';\r\n            } else {\r\n                bar.style.transform = 'none';\r\n                bar.style.opacity = '1';\r\n            }\r\n        });\r\n    });\r\n\r\n    \/\/ Close mobile menu when clicking on a link\r\n    navLinks.forEach(link => {\r\n        link.addEventListener('click', () => {\r\n            navMenu.classList.remove('active');\r\n            const bars = navToggle.querySelectorAll('.bar');\r\n            bars.forEach(bar => {\r\n                bar.style.transform = 'none';\r\n                bar.style.opacity = '1';\r\n            });\r\n        });\r\n    });\r\n\r\n    \/\/ Smooth scrolling for navigation links\r\n    navLinks.forEach(link => {\r\n        link.addEventListener('click', function(e) {\r\n            e.preventDefault();\r\n            const targetId = this.getAttribute('href');\r\n            const targetSection = document.querySelector(targetId);\r\n            \r\n            if (targetSection) {\r\n                const offsetTop = targetSection.offsetTop - 70; \/\/ Account for fixed navbar\r\n                window.scrollTo({\r\n                    top: offsetTop,\r\n                    behavior: 'smooth'\r\n                });\r\n            }\r\n        });\r\n    });\r\n\r\n    \/\/ Navbar background on scroll\r\n    window.addEventListener('scroll', function() {\r\n        const navbar = document.querySelector('.navbar');\r\n        if (window.scrollY > 50) {\r\n            navbar.style.background = 'rgba(255, 255, 255, 0.98)';\r\n            navbar.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';\r\n        } else {\r\n            navbar.style.background = 'rgba(255, 255, 255, 0.95)';\r\n            navbar.style.boxShadow = 'none';\r\n        }\r\n    });\r\n\r\n    \/\/ Contact form handling\r\n    const contactForm = document.getElementById('contactForm');\r\n    contactForm.addEventListener('submit', function(e) {\r\n        e.preventDefault();\r\n        \r\n        \/\/ Get form data\r\n        const formData = new FormData(contactForm);\r\n        const data = Object.fromEntries(formData);\r\n        \r\n        \/\/ Show success message (you can replace this with actual form submission)\r\n        showNotification('Votre demande a \u00e9t\u00e9 envoy\u00e9e avec succ\u00e8s ! Nous vous recontacterons rapidement.', 'success');\r\n        \r\n        \/\/ Reset form\r\n        contactForm.reset();\r\n        \r\n        \/\/ Here you would normally send the data to your server\r\n        console.log('Form data:', data);\r\n    });\r\n\r\n    \/\/ Scroll animations\r\n    const observerOptions = {\r\n        threshold: 0.1,\r\n        rootMargin: '0px 0px -50px 0px'\r\n    };\r\n\r\n    const observer = new IntersectionObserver(function(entries) {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.classList.add('fade-in-up');\r\n            }\r\n        });\r\n    }, observerOptions);\r\n\r\n    \/\/ Observe elements for animation\r\n    const animateElements = document.querySelectorAll('.about-card, .service-card, .group-card, .contact-form');\r\n    animateElements.forEach(el => {\r\n        el.classList.add('loading');\r\n        observer.observe(el);\r\n    });\r\n\r\n    \/\/ Modal functionality\r\n    const modal = document.getElementById('contactModal');\r\n    const closeModal = document.querySelector('.close');\r\n\r\n    if (closeModal) {\r\n        closeModal.addEventListener('click', function() {\r\n            modal.style.display = 'none';\r\n        });\r\n    }\r\n\r\n    window.addEventListener('click', function(e) {\r\n        if (e.target === modal) {\r\n            modal.style.display = 'none';\r\n        }\r\n    });\r\n});\r\n\r\n\/\/ Open contact form modal\r\nfunction openContactForm(groupType) {\r\n    const modal = document.getElementById('contactModal');\r\n    const modalTitle = document.getElementById('modalTitle');\r\n    const modalDescription = document.getElementById('modalDescription');\r\n    const typeGroupSelect = document.getElementById('type-groupe');\r\n    \r\n    if (groupType === 'mini-groupe') {\r\n        modalTitle.textContent = 'Demande de devis - Mini-groupe';\r\n        modalDescription.textContent = 'Remplissez ce formulaire pour votre groupe de 10 \u00e0 19 personnes.';\r\n        typeGroupSelect.value = 'mini-groupe';\r\n    } else if (groupType === 'groupe') {\r\n        modalTitle.textContent = 'Demande de devis - Groupe';\r\n        modalDescription.textContent = 'Remplissez ce formulaire pour votre groupe de 20 personnes et plus.';\r\n        typeGroupSelect.value = 'groupe';\r\n    }\r\n    \r\n    modal.style.display = 'block';\r\n    \r\n    \/\/ Scroll to contact form\r\n    setTimeout(() => {\r\n        document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });\r\n    }, 500);\r\n}\r\n\r\n\/\/ Show notification\r\nfunction showNotification(message, type = 'info') {\r\n    const notification = document.createElement('div');\r\n    notification.className = `notification notification-${type}`;\r\n    notification.innerHTML = `\r\n        <div class=\"notification-content\">\r\n            <i class=\"fas fa-${type === 'success' ? 'check-circle' : 'info-circle'}\"><\/i>\r\n            <span>${message}<\/span>\r\n        <\/div>\r\n    `;\r\n    \r\n    \/\/ Add notification styles\r\n    notification.style.cssText = `\r\n        position: fixed;\r\n        top: 90px;\r\n        right: 20px;\r\n        background: ${type === 'success' ? '#10b981' : '#3b82f6'};\r\n        color: white;\r\n        padding: 1rem 1.5rem;\r\n        border-radius: 10px;\r\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n        z-index: 2000;\r\n        transform: translateX(400px);\r\n        transition: transform 0.3s ease;\r\n    `;\r\n    \r\n    const notificationContent = notification.querySelector('.notification-content');\r\n    notificationContent.style.cssText = `\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 0.5rem;\r\n    `;\r\n    \r\n    document.body.appendChild(notification);\r\n    \r\n    \/\/ Show notification\r\n    setTimeout(() => {\r\n        notification.style.transform = 'translateX(0)';\r\n    }, 100);\r\n    \r\n    \/\/ Hide notification after 5 seconds\r\n    setTimeout(() => {\r\n        notification.style.transform = 'translateX(400px)';\r\n        setTimeout(() => {\r\n            document.body.removeChild(notification);\r\n        }, 300);\r\n    }, 5000);\r\n}\r\n\r\n\/\/ Form validation\r\nfunction validateForm(form) {\r\n    const requiredFields = form.querySelectorAll('[required]');\r\n    let isValid = true;\r\n    \r\n    requiredFields.forEach(field => {\r\n        if (!field.value.trim()) {\r\n            field.style.borderColor = '#ef4444';\r\n            isValid = false;\r\n        } else {\r\n            field.style.borderColor = '#e5e7eb';\r\n        }\r\n    });\r\n    \r\n    \/\/ Email validation\r\n    const emailField = form.querySelector('input[type=\"email\"]');\r\n    if (emailField && emailField.value) {\r\n        const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n        if (!emailRegex.test(emailField.value)) {\r\n            emailField.style.borderColor = '#ef4444';\r\n            isValid = false;\r\n        }\r\n    }\r\n    \r\n    return isValid;\r\n}\r\n\r\n\/\/ Smooth scroll to top button\r\nfunction addScrollToTopButton() {\r\n    const scrollBtn = document.createElement('button');\r\n    scrollBtn.innerHTML = '<i class=\"fas fa-arrow-up\"><\/i>';\r\n    scrollBtn.className = 'scroll-to-top';\r\n    scrollBtn.style.cssText = `\r\n        position: fixed;\r\n        bottom: 30px;\r\n        right: 30px;\r\n        width: 50px;\r\n        height: 50px;\r\n        background: linear-gradient(135deg, #3b82f6, #6366f1);\r\n        color: white;\r\n        border: none;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);\r\n        transition: all 0.3s ease;\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        z-index: 1000;\r\n    `;\r\n    \r\n    document.body.appendChild(scrollBtn);\r\n    \r\n    scrollBtn.addEventListener('click', () => {\r\n        window.scrollTo({\r\n            top: 0,\r\n            behavior: 'smooth'\r\n        });\r\n    });\r\n    \r\n    window.addEventListener('scroll', () => {\r\n        if (window.scrollY > 300) {\r\n            scrollBtn.style.opacity = '1';\r\n            scrollBtn.style.visibility = 'visible';\r\n        } else {\r\n            scrollBtn.style.opacity = '0';\r\n            scrollBtn.style.visibility = 'hidden';\r\n        }\r\n    });\r\n    \r\n    scrollBtn.addEventListener('mouseenter', () => {\r\n        scrollBtn.style.transform = 'translateY(-3px)';\r\n        scrollBtn.style.boxShadow = '0 8px 25px rgba(59, 130, 246, 0.4)';\r\n    });\r\n    \r\n    scrollBtn.addEventListener('mouseleave', () => {\r\n        scrollBtn.style.transform = 'translateY(0)';\r\n        scrollBtn.style.boxShadow = '0 4px 15px rgba(59, 130, 246, 0.3)';\r\n    });\r\n}\r\n\r\n\/\/ Initialize scroll to top button\r\ndocument.addEventListener('DOMContentLoaded', addScrollToTopButton);\r\n\r\n\/\/ Lazy loading for images (if you add images later)\r\nfunction initLazyLoading() {\r\n    const images = document.querySelectorAll('img[data-src]');\r\n    \r\n    const imageObserver = new IntersectionObserver((entries, observer) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                const img = entry.target;\r\n                img.src = img.dataset.src;\r\n                img.classList.remove('lazy');\r\n                imageObserver.unobserve(img);\r\n            }\r\n        });\r\n    });\r\n    \r\n    images.forEach(img => imageObserver.observe(img));\r\n}\r\n\r\n\/\/ Performance optimization: Debounced scroll handler\r\nfunction debounce(func, wait) {\r\n    let timeout;\r\n    return function executedFunction(...args) {\r\n        const later = () => {\r\n            clearTimeout(timeout);\r\n            func(...args);\r\n        };\r\n        clearTimeout(timeout);\r\n        timeout = setTimeout(later, wait);\r\n    };\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Votre voyage de r\u00eave sur mesure Fort d&#8217;une exp\u00e9rience de plus de 30 ans dans l&#8217;organisation de voyages, Berger Voyages est en mesure de concr\u00e9tiser tous vos projets. La diversit\u00e9 de notre offre et de nos savoir-faire nous permet de vous proposer des solutions en phase avec vos d\u00e9sirs et votre budget ! Nous sommes \u00e0 vos c\u00f4t\u00e9s pour vous offrir la meilleure exp\u00e9rience, et construire un voyage \u00e0 votre image. D\u00e9couvrir nos services 30+ ans d&#8217;exp\u00e9rience Votre voyage \u00e0 votre image Pourquoi choisir Berger Voyages ? La diversit\u00e9 de notre offre et de nos savoir-faire nous permet de vous proposer des solutions uniques 30 ans d&#8217;expertise Une exp\u00e9rience reconnue dans l&#8217;organisation de voyages de groupe Accompagnement personnalis\u00e9 Nous sommes \u00e0 vos c\u00f4t\u00e9s pour vous offrir la meilleure exp\u00e9rience Voyage sur mesure Construisez un voyage \u00e0 votre image selon vos d\u00e9sirs et budget Nos avantages exclusifs Des offres sp\u00e9cialement con\u00e7ues pour les groupes. R\u00e9ductions exclusives &#8211; Tarif d\u00e9gressif par tranche \u2013 plus le groupe est important plus le prix est r\u00e9duit (base 25-29 puis 30-34, 35-39,-40-44, 45-50 personnes). &#8211; 1 gratuit\u00e9 accord\u00e9e pour le groupe \u00e0 partir de 45 payants (la 46\u00e8me est donc gratuite). Voyages sur mesure Cr\u00e9ez votre programme personnalis\u00e9 Programme \u00e0 votre image Tarifs groupe exclusifs Dates flexibles Lieu de d\u00e9part privatif Service cl\u00e9 en main Organisation compl\u00e8te de A \u00e0 Z Gestion administrative Interlocuteur unique Suivi personnalis\u00e9 Paiement centralis\u00e9 Quelle est la taille de votre groupe ? Des solutions adapt\u00e9es selon le nombre de participants Groupe \u00c0 partir de 20 personnes Association\/Amicale Comit\u00e9 d&#8217;entreprise Groupe Sportif Famille\/Amis Voyage d&#8217;entreprise Cr\u00e9er votre Voyage Sur Mesure (r\u00e9serv\u00e9 \u00e0 votre groupe) \ud83c\udf0e Association\/Amicale : \u00c9laborez vos escapades culturelles pour vos adh\u00e9rents en toute s\u00e9r\u00e9nit\u00e9. Comit\u00e9 d&#8217;entreprise : CSE, confiez-nous l&#8217;organisation de vos projets. Groupe Sportif : Programmez vos voyages et d\u00e9placements pour supporter vos \u00e9quipes favorites. Famille\/Amis : Partagez des moments uniques et enrichissez-vous de souvenirs inoubliables. Voyage d&#8217;entreprise : F\u00e9d\u00e9rez vos \u00e9quipes : s\u00e9minaire, teambuilding\u2026 Nous sommes sp\u00e9cialistes dans l&#8217;organisation des voyages sur mesure. Cr\u00e9er votre Voyage Sur Mesure (ouvert \u00e0 d\u2019autres participants) \ud83c\udf0e Pourquoi ? Pour gagner de l&#8217;argent ! Parce que de plus en plus d&#8217;associations peinent \u00e0 remplir leurs voyages par manque d&#8217;adh\u00e9rents, manque de moyens, manque de temps ou manque de communications\u2026 Nous sommes en mesure de cr\u00e9er votre programme cl\u00e9 en main, r\u00e9pondant en tout point \u00e0 vos d\u00e9sirs et de le proposer parall\u00e8lement \u00e0 nos individuels pour optimiser le remplissage et obtenir ainsi le prix le plus avantageux. Vous pourrez ainsi r\u00e9aliser un programme sur mesure et b\u00e9n\u00e9ficier d&#8217;un tarif groupe. Comment ? En ins\u00e9rant \u00ab votre \u00bb programme \u00e9labor\u00e9 sur mesure, dans notre brochure annuelle. En ins\u00e9rant \u00ab votre \u00bb programme \u00e9labor\u00e9 sur mesure, sur notre site internet. Pour Qui ? Cette offre convient id\u00e9alement pour les groupes compos\u00e9s entre 20 et 30 personnes lors de la demande. Exprimez-nous vos souhaits avec anticipation, et nous \u00e9laborerons ensemble votre \u00ab programme sur mesure \u00bb pour le faire para\u00eetre dans notre prochaine brochure. Celle-ci sera propos\u00e9e \u00e0 notre client\u00e8le aux dates que vous aurez choisies pr\u00e9alablement et selon les visites de votre choix : ce type de demande personnalis\u00e9e est \u00e0 d\u00e9terminer avec votre conseiller voyage d\u00e8s septembre pour une r\u00e9alisation du voyage l&#8217;ann\u00e9e qui suit. \u00c0 partir de 35 personnes : vous avez la possibilit\u00e9 \u00e9galement de choisir un voyage dans notre brochure annuelle (pour individuels) et de le privatiser si ce dernier r\u00e9pond \u00e0 vos attentes sans modification. Demander un devis Contactez-nous Planifier votre projet de simple d\u00e9placement en groupe : N\u2019h\u00e9sitez pas \u00e0 consulter notre site de transport : www.bergervoyages.com Consultez nos Offres sp\u00e9ciales Groupes : Brochure journ\u00e9e Autre &times; Demande de devis Remplissez ce formulaire pour recevoir votre devis personnalis\u00e9.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_theme","meta":{"footnotes":""},"class_list":["post-1315","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/1315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/index.php\/wp-json\/wp\/v2\/comments?post=1315"}],"version-history":[{"count":159,"href":"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/1315\/revisions"}],"predecessor-version":[{"id":14032,"href":"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/index.php\/wp-json\/wp\/v2\/pages\/1315\/revisions\/14032"}],"wp:attachment":[{"href":"https:\/\/www.friendly-ellis.212-227-170-25.plesk.page\/index.php\/wp-json\/wp\/v2\/media?parent=1315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}