SR VOYAGES | Agence de Voyage N\u00b01 – R\u00e9servations Billets & H\u00f4tels<\/title>\n <meta name=\"description\" content=\"SR VOYAGES - Votre agence de voyage N\u00b01. R\u00e9servez vos billets d'avion, h\u00f4tels, circuits et s\u00e9jours aux meilleurs prix.\" \/>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"\/>\n <style>\n :root {\n --gold: #D4AF37;\n --gold-light: #f0d060;\n --navy: #0a1628;\n --navy2: #112244;\n --sky: #0ea5e9;\n --sky2: #38bdf8;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: #f8fafc;\n color: #1e293b;\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 SCROLLBAR \u2500\u2500 *\/\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: #0a1628; }\n ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }\n\n \/* \u2500\u2500 NAVBAR \u2500\u2500 *\/\n #navbar {\n position: fixed; top: 0; left: 0; right: 0; z-index: 1000;\n background: rgba(10,22,40,0.97);\n backdrop-filter: blur(12px);\n transition: all .3s ease;\n border-bottom: 1px solid rgba(212,175,55,0.2);\n }\n .nav-inner {\n max-width: 1280px; margin: auto;\n display: flex; align-items: center; justify-content: space-between;\n padding: 0 1.5rem; height: 68px;\n }\n .logo {\n display: flex; align-items: center; gap: .6rem;\n text-decoration: none;\n }\n .logo-img {\n height: 48px; width: auto; object-fit: contain;\n filter: drop-shadow(0 2px 8px rgba(212,175,55,0.35));\n transition: filter .3s;\n }\n .logo-img:hover { filter: drop-shadow(0 4px 16px rgba(212,175,55,0.6)); }\n .logo-text { color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: .5px; }\n .logo-text span { color: var(--gold); }\n\n .nav-links { display: flex; align-items: center; gap: .2rem; }\n .nav-links a {\n color: #cbd5e1; text-decoration: none; font-size: .88rem; font-weight: 500;\n padding: .45rem .85rem; border-radius: 6px; transition: all .2s;\n }\n .nav-links a:hover, .nav-links a.active { color: var(--gold); background: rgba(212,175,55,.1); }\n\n .btn-nav {\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n color: var(--navy) !important; font-weight: 700 !important;\n padding: .5rem 1.2rem !important; border-radius: 8px !important;\n }\n .btn-nav:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(212,175,55,.4); }\n\n .hamburger {\n display: none; flex-direction: column; cursor: pointer;\n gap: 5px; padding: .4rem;\n }\n .hamburger span {\n display: block; height: 2px; width: 24px;\n background: var(--gold); border-radius: 2px; transition: .3s;\n }\n .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }\n .hamburger.open span:nth-child(2) { opacity: 0; }\n .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }\n\n #mobile-menu {\n display: none; position: fixed; top: 68px; left: 0; right: 0;\n background: var(--navy); border-bottom: 2px solid var(--gold);\n z-index: 999; padding: 1rem 1.5rem;\n }\n #mobile-menu a {\n display: block; color: #cbd5e1; text-decoration: none;\n font-size: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.07);\n transition: color .2s;\n }\n #mobile-menu a:hover { color: var(--gold); }\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n #hero {\n min-height: 100vh;\n background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 50%, #0c3460 100%);\n position: relative; overflow: hidden;\n display: flex; align-items: center;\n }\n .hero-bg-shape {\n position: absolute; border-radius: 50%; filter: blur(80px); opacity: .15;\n pointer-events: none;\n }\n .hero-inner {\n max-width: 1280px; margin: auto; padding: 6rem 1.5rem 4rem;\n display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;\n }\n .hero-badge {\n display: inline-flex; align-items: center; gap: .5rem;\n background: rgba(212,175,55,.15); border: 1px solid rgba(212,175,55,.4);\n color: var(--gold); font-size: .8rem; font-weight: 600;\n padding: .35rem .9rem; border-radius: 20px; margin-bottom: 1.5rem;\n }\n .hero-title {\n font-size: clamp(2rem,4vw,3.4rem); font-weight: 900;\n color: #fff; line-height: 1.15; margin-bottom: 1.2rem;\n }\n .hero-title span { color: var(--gold); }\n .hero-desc {\n color: #94a3b8; font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem;\n }\n .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }\n .btn-primary {\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n color: var(--navy); font-weight: 700; font-size: .95rem;\n padding: .85rem 2rem; border-radius: 10px; border: none; cursor: pointer;\n text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;\n transition: all .3s;\n }\n .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(212,175,55,.5); }\n .btn-outline {\n background: transparent;\n border: 2px solid rgba(255,255,255,.3); color: #fff;\n font-weight: 600; font-size: .95rem;\n padding: .85rem 2rem; border-radius: 10px; cursor: pointer;\n text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;\n transition: all .3s;\n }\n .btn-outline:hover { border-color: var(--gold); color: var(--gold); }\n\n \/* stats *\/\n .hero-stats { display: flex; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; }\n .stat { text-align: center; }\n .stat-num { font-size: 1.8rem; font-weight: 900; color: var(--gold); line-height: 1; }\n .stat-label { color: #64748b; font-size: .78rem; margin-top: .2rem; }\n\n \/* hero visual *\/\n .hero-visual {\n position: relative;\n display: flex; align-items: center; justify-content: center;\n }\n .hero-plane-anim {\n position: relative; width: 100%; max-width: 480px;\n }\n .globe-container {\n width: 300px; height: 300px; border-radius: 50%;\n background: radial-gradient(circle at 35% 35%, #1e40af, #0c3460, #0a1628);\n border: 2px solid rgba(212,175,55,.3);\n margin: auto; position: relative;\n box-shadow: 0 0 60px rgba(14,165,233,.25), inset 0 0 40px rgba(0,0,0,.5);\n animation: globeSpin 20s linear infinite;\n overflow: hidden;\n }\n @keyframes globeSpin {\n 0% { box-shadow: 0 0 60px rgba(14,165,233,.25), inset 0 0 40px rgba(0,0,0,.5); }\n 50% { box-shadow: 0 0 100px rgba(212,175,55,.25), inset 0 0 40px rgba(0,0,0,.5); }\n 100% { box-shadow: 0 0 60px rgba(14,165,233,.25), inset 0 0 40px rgba(0,0,0,.5); }\n }\n .globe-lines {\n position: absolute; inset: 0; overflow: hidden; border-radius: 50%; opacity: .25;\n }\n .globe-line {\n position: absolute; left: 0; right: 0;\n height: 1px; background: rgba(255,255,255,.6);\n }\n .globe-line-v {\n position: absolute; top: 0; bottom: 0;\n width: 1px; background: rgba(255,255,255,.6);\n }\n .plane-orbit {\n position: absolute; top: 50%; left: 50%;\n width: 380px; height: 380px;\n margin: -190px 0 0 -190px;\n animation: orbitPlane 6s linear infinite;\n }\n @keyframes orbitPlane {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n .plane-dot {\n position: absolute; top: -12px; left: 50%;\n margin-left: -12px;\n width: 24px; height: 24px;\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: .85rem; color: var(--navy);\n box-shadow: 0 0 16px rgba(212,175,55,.8);\n animation: counterSpin 6s linear infinite;\n }\n @keyframes counterSpin {\n from { transform: rotate(0deg); }\n to { transform: rotate(-360deg); }\n }\n\n .info-cards {\n position: absolute; right: -20px; bottom: -20px;\n display: flex; flex-direction: column; gap: .6rem;\n }\n .info-card {\n background: rgba(255,255,255,.08); backdrop-filter: blur(12px);\n border: 1px solid rgba(255,255,255,.12); border-radius: 12px;\n padding: .7rem 1rem; display: flex; align-items: center; gap: .7rem;\n animation: floatCard 4s ease-in-out infinite;\n }\n .info-card:nth-child(2) { animation-delay: 1s; }\n @keyframes floatCard {\n 0%,100% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n }\n .info-card .ic-icon {\n width: 36px; height: 36px; background: linear-gradient(135deg,var(--gold),var(--gold-light));\n border-radius: 8px; display: flex; align-items: center; justify-content: center;\n color: var(--navy); font-size: .9rem; flex-shrink: 0;\n }\n .info-card .ic-title { color: #fff; font-size: .8rem; font-weight: 600; }\n .info-card .ic-sub { color: #94a3b8; font-size: .72rem; }\n\n \/* \u2500\u2500 SEARCH FORM \u2500\u2500 *\/\n #search-section {\n background: #fff;\n box-shadow: 0 4px 30px rgba(0,0,0,.08);\n }\n .search-wrapper {\n max-width: 1100px; margin: auto;\n }\n .search-tabs {\n display: flex; gap: 0; border-bottom: 2px solid #e2e8f0;\n }\n .stab {\n padding: .9rem 1.5rem; font-size: .88rem; font-weight: 600;\n color: #64748b; cursor: pointer; border-bottom: 2px solid transparent;\n margin-bottom: -2px; transition: all .2s; display: flex; align-items: center; gap: .4rem;\n background: transparent; border-top: none; border-left: none; border-right: none;\n }\n .stab.active { color: var(--navy); border-bottom-color: var(--gold); }\n .stab:hover { color: var(--navy); }\n\n .search-panel { display: none; padding: 1.5rem 0; }\n .search-panel.active { display: block; }\n\n .search-grid {\n display: grid; gap: 1rem;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n }\n .search-field label {\n display: block; font-size: .75rem; font-weight: 700;\n color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem;\n }\n .search-field input, .search-field select {\n width: 100%; padding: .75rem 1rem; border: 1.5px solid #e2e8f0;\n border-radius: 8px; font-size: .9rem; color: #1e293b;\n background: #f8fafc; transition: border .2s;\n outline: none;\n }\n .search-field input:focus, .search-field select:focus {\n border-color: var(--gold); background: #fff;\n }\n\n .btn-search {\n width: 100%; background: linear-gradient(135deg,var(--gold),var(--gold-light));\n color: var(--navy); font-weight: 800; font-size: 1rem;\n padding: .85rem; border: none; border-radius: 10px; cursor: pointer;\n margin-top: 1rem; transition: all .3s; display: flex; align-items: center;\n justify-content: center; gap: .5rem;\n }\n .btn-search:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,.5); }\n\n \/* \u2500\u2500 SECTION COMMONS \u2500\u2500 *\/\n .section { padding: 5rem 1.5rem; }\n .section-inner { max-width: 1280px; margin: auto; }\n .section-header { text-align: center; margin-bottom: 3rem; }\n .section-tag {\n display: inline-block;\n background: rgba(212,175,55,.12); color: var(--gold);\n font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;\n padding: .35rem .9rem; border-radius: 20px; margin-bottom: .8rem;\n }\n .section-title {\n font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900;\n color: var(--navy); line-height: 1.2;\n }\n .section-title span { color: var(--gold); }\n .section-sub { color: #64748b; font-size: 1rem; margin-top: .6rem; max-width: 600px; margin-left: auto; margin-right: auto; }\n\n \/* \u2500\u2500 DESTINATIONS CARDS \u2500\u2500 *\/\n #destinations { background: #f8fafc; }\n .dest-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n }\n .dest-card {\n border-radius: 16px; overflow: hidden;\n box-shadow: 0 4px 20px rgba(0,0,0,.08);\n transition: transform .3s, box-shadow .3s;\n cursor: pointer; position: relative;\n background: #fff;\n }\n .dest-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,.15); }\n .dest-img {\n height: 200px; position: relative; overflow: hidden;\n }\n .dest-img-bg {\n width: 100%; height: 100%; background-size: cover; background-position: center;\n transition: transform .5s;\n }\n .dest-card:hover .dest-img-bg { transform: scale(1.08); }\n .dest-img-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to bottom, transparent 40%, rgba(10,22,40,.8));\n }\n .dest-badge {\n position: absolute; top: 12px; right: 12px;\n background: var(--gold); color: var(--navy);\n font-size: .72rem; font-weight: 800;\n padding: .25rem .65rem; border-radius: 6px;\n }\n .dest-body { padding: 1.2rem; }\n .dest-country { font-size: .78rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }\n .dest-name { font-size: 1.15rem; font-weight: 800; color: var(--navy); margin: .2rem 0 .5rem; }\n .dest-info { display: flex; align-items: center; justify-content: space-between; }\n .dest-price { font-size: 1.3rem; font-weight: 900; color: var(--gold); }\n .dest-price-label { font-size: .72rem; color: #94a3b8; }\n .dest-rating { display: flex; align-items: center; gap: .25rem; color: var(--gold); font-size: .85rem; }\n\n \/* \u2500\u2500 SERVICES \u2500\u2500 *\/\n #services { background: var(--navy); }\n .services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 1.5rem;\n }\n .service-card {\n background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);\n border-radius: 16px; padding: 2rem 1.5rem; text-align: center;\n transition: all .3s; cursor: pointer;\n }\n .service-card:hover {\n background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.3);\n transform: translateY(-6px);\n }\n .service-icon {\n width: 64px; height: 64px; margin: 0 auto 1.2rem;\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n border-radius: 16px; display: flex; align-items: center; justify-content: center;\n font-size: 1.5rem; color: var(--navy);\n }\n .service-title { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }\n .service-desc { color: #94a3b8; font-size: .85rem; line-height: 1.6; }\n\n \/* \u2500\u2500 OFFRES \u2500\u2500 *\/\n .offres-grid {\n display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.5rem;\n }\n .offre-card {\n background: #fff; border-radius: 16px;\n box-shadow: 0 4px 20px rgba(0,0,0,.06);\n overflow: hidden; transition: transform .3s, box-shadow .3s;\n }\n .offre-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }\n .offre-header {\n padding: 1.5rem; display: flex; align-items: center; gap: 1rem;\n }\n .offre-icon {\n width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff;\n }\n .offre-title { font-size: 1.05rem; font-weight: 800; color: var(--navy); }\n .offre-sub { font-size: .82rem; color: #64748b; }\n .offre-body { padding: 0 1.5rem 1.5rem; }\n .offre-price-row { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }\n .offre-prix-from { font-size: .8rem; color: #94a3b8; }\n .offre-prix { font-size: 2rem; font-weight: 900; color: var(--gold); }\n .offre-currency { font-size: 1rem; font-weight: 700; color: var(--gold); }\n .offre-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }\n .offre-tag {\n background: #f1f5f9; color: #475569; font-size: .72rem;\n font-weight: 600; padding: .2rem .6rem; border-radius: 6px;\n }\n .btn-offre {\n width: 100%; padding: .7rem; border: none; border-radius: 8px;\n font-weight: 700; font-size: .9rem; cursor: pointer; transition: all .2s;\n }\n\n \/* \u2500\u2500 POURQUOI NOUS \u2500\u2500 *\/\n #why { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); }\n .why-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;\n }\n .why-list { display: flex; flex-direction: column; gap: 1.2rem; }\n .why-item {\n display: flex; gap: 1rem; align-items: flex-start;\n background: #fff; padding: 1.2rem; border-radius: 12px;\n box-shadow: 0 2px 12px rgba(0,0,0,.05); transition: transform .2s;\n }\n .why-item:hover { transform: translateX(6px); }\n .why-num {\n width: 44px; height: 44px; background: linear-gradient(135deg,var(--gold),var(--gold-light));\n border-radius: 10px; display: flex; align-items: center; justify-content: center;\n font-size: 1.1rem; font-weight: 900; color: var(--navy); flex-shrink: 0;\n }\n .why-title { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem; }\n .why-text { font-size: .85rem; color: #64748b; line-height: 1.5; }\n\n .why-visual {\n background: linear-gradient(135deg, var(--navy), var(--navy2));\n border-radius: 24px; padding: 2.5rem; text-align: center;\n box-shadow: 0 20px 60px rgba(10,22,40,.3);\n }\n .why-big-num {\n font-size: 5rem; font-weight: 900; color: var(--gold);\n line-height: 1; margin-bottom: .3rem;\n }\n .why-big-label { color: #94a3b8; font-size: 1rem; margin-bottom: 2rem; }\n .why-meters { display: flex; flex-direction: column; gap: 1rem; text-align: left; }\n .why-meter-label {\n display: flex; justify-content: space-between;\n font-size: .82rem; color: #94a3b8; margin-bottom: .35rem;\n }\n .why-meter-bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }\n .why-meter-fill { height: 100%; background: linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius: 3px; }\n\n \/* \u2500\u2500 TESTIMONIALS \u2500\u2500 *\/\n #temoignages { background: #fff; }\n .testi-carousel { position: relative; overflow: hidden; }\n .testi-track {\n display: flex; transition: transform .5s ease;\n }\n .testi-card {\n min-width: 100%; padding: 0 .5rem;\n }\n .testi-inner {\n background: #f8fafc; border-radius: 16px; padding: 2rem;\n border: 1px solid #e2e8f0;\n display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 1rem;\n }\n .testi-item {\n background: #fff; border-radius: 12px; padding: 1.5rem;\n box-shadow: 0 2px 12px rgba(0,0,0,.05);\n }\n .testi-stars { color: var(--gold); font-size: .9rem; margin-bottom: .8rem; }\n .testi-text { color: #475569; font-size: .88rem; line-height: 1.6; margin-bottom: 1rem; font-style: italic; }\n .testi-author { display: flex; align-items: center; gap: .7rem; }\n .testi-avatar {\n width: 40px; height: 40px; border-radius: 50%;\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n display: flex; align-items: center; justify-content: center;\n font-weight: 700; font-size: .9rem; color: var(--navy);\n }\n .testi-name { font-size: .88rem; font-weight: 700; color: var(--navy); }\n .testi-dest { font-size: .76rem; color: #94a3b8; }\n\n .testi-nav { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }\n .testi-dot {\n width: 10px; height: 10px; border-radius: 5px;\n background: #cbd5e1; cursor: pointer; transition: all .3s;\n }\n .testi-dot.active { background: var(--gold); width: 28px; }\n\n \/* \u2500\u2500 NEWSLETTER \u2500\u2500 *\/\n #newsletter {\n background: linear-gradient(135deg, var(--navy), var(--navy2));\n padding: 4rem 1.5rem; text-align: center;\n }\n .newsletter-title { font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 900; color: #fff; margin-bottom: .6rem; }\n .newsletter-sub { color: #94a3b8; font-size: .95rem; margin-bottom: 2rem; }\n .newsletter-form {\n max-width: 480px; margin: auto;\n display: flex; gap: .7rem; flex-wrap: wrap;\n }\n .newsletter-input {\n flex: 1; min-width: 200px; padding: .85rem 1.2rem;\n border: 1.5px solid rgba(212,175,55,.4); border-radius: 10px;\n background: rgba(255,255,255,.08); color: #fff; font-size: .95rem;\n outline: none; transition: border .2s;\n }\n .newsletter-input::placeholder { color: #64748b; }\n .newsletter-input:focus { border-color: var(--gold); }\n .btn-nl {\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n color: var(--navy); font-weight: 700; font-size: .95rem;\n padding: .85rem 1.5rem; border: none; border-radius: 10px; cursor: pointer;\n transition: all .3s; white-space: nowrap;\n }\n .btn-nl:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,.5); }\n\n \/* \u2500\u2500 CONTACT \u2500\u2500 *\/\n #contact { background: #f8fafc; }\n .contact-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;\n }\n .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }\n .contact-item {\n display: flex; gap: 1rem; align-items: flex-start;\n }\n .contact-icon {\n width: 48px; height: 48px; background: linear-gradient(135deg,var(--gold),var(--gold-light));\n border-radius: 12px; display: flex; align-items: center; justify-content: center;\n font-size: 1.1rem; color: var(--navy); flex-shrink: 0;\n }\n .contact-label { font-size: .8rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }\n .contact-val { font-size: .95rem; color: var(--navy); font-weight: 600; margin-top: .15rem; }\n\n .contact-form {\n background: #fff; border-radius: 20px; padding: 2rem;\n box-shadow: 0 8px 30px rgba(0,0,0,.07);\n }\n .form-group { margin-bottom: 1.1rem; }\n .form-group label { display: block; font-size: .8rem; font-weight: 700; color: #475569; margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em; }\n .form-control {\n width: 100%; padding: .8rem 1rem; border: 1.5px solid #e2e8f0;\n border-radius: 8px; font-size: .9rem; color: #1e293b;\n background: #f8fafc; transition: border .2s; outline: none;\n resize: none;\n }\n .form-control:focus { border-color: var(--gold); background: #fff; }\n .form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n #footer {\n background: var(--navy); color: #94a3b8;\n padding: 4rem 1.5rem 2rem;\n }\n .footer-inner {\n max-width: 1280px; margin: auto;\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;\n }\n .footer-brand-desc { font-size: .87rem; line-height: 1.7; color: #64748b; margin-top: .8rem; max-width: 240px; }\n .footer-social { display: flex; gap: .7rem; margin-top: 1.2rem; }\n .social-btn {\n width: 38px; height: 38px; border-radius: 8px;\n background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);\n display: flex; align-items: center; justify-content: center;\n color: #94a3b8; text-decoration: none; font-size: .9rem;\n transition: all .2s;\n }\n .social-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }\n .footer-col-title { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 1.2rem; }\n .footer-links { display: flex; flex-direction: column; gap: .55rem; }\n .footer-links a { color: #64748b; text-decoration: none; font-size: .85rem; transition: color .2s; }\n .footer-links a:hover { color: var(--gold); }\n .footer-bottom {\n max-width: 1280px; margin: 2.5rem auto 0;\n padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.06);\n display: flex; align-items: center; justify-content: space-between;\n flex-wrap: wrap; gap: 1rem;\n font-size: .8rem; color: #475569;\n }\n .footer-bottom a { color: #475569; text-decoration: none; }\n .footer-bottom a:hover { color: var(--gold); }\n\n \/* \u2500\u2500 MODAL \u2500\u2500 *\/\n .modal-overlay {\n position: fixed; inset: 0; background: rgba(0,0,0,.7);\n backdrop-filter: blur(8px);\n z-index: 2000; display: flex; align-items: center; justify-content: center;\n padding: 1rem; opacity: 0; pointer-events: none; transition: opacity .3s;\n }\n .modal-overlay.open { opacity: 1; pointer-events: all; }\n .modal-box {\n background: #fff; border-radius: 20px;\n max-width: 520px; width: 100%; padding: 2rem;\n transform: scale(.9); transition: transform .3s;\n max-height: 90vh; overflow-y: auto;\n }\n .modal-overlay.open .modal-box { transform: scale(1); }\n .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }\n .modal-title { font-size: 1.3rem; font-weight: 800; color: var(--navy); }\n .modal-close {\n width: 36px; height: 36px; border: none; background: #f1f5f9;\n border-radius: 8px; cursor: pointer; font-size: 1.1rem; color: #64748b;\n transition: all .2s;\n }\n .modal-close:hover { background: #fee2e2; color: #ef4444; }\n\n \/* \u2500\u2500 TOAST \u2500\u2500 *\/\n #toast {\n position: fixed; bottom: 1.5rem; right: 1.5rem;\n background: var(--navy); color: #fff; padding: 1rem 1.5rem;\n border-radius: 12px; border-left: 4px solid var(--gold);\n font-size: .88rem; font-weight: 600; z-index: 3000;\n transform: translateY(100px); opacity: 0; transition: all .4s;\n max-width: 320px;\n }\n #toast.show { transform: translateY(0); opacity: 1; }\n\n \/* \u2500\u2500 LOADER \u2500\u2500 *\/\n #loader {\n position: fixed; inset: 0; z-index: 9999;\n background: var(--navy);\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n transition: opacity .6s;\n }\n .loader-logo {\n font-size: 2.5rem; font-weight: 900; color: var(--gold);\n animation: pulse 1s ease-in-out infinite;\n }\n .loader-bar { width: 200px; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; margin-top: 1.5rem; overflow: hidden; }\n .loader-fill { height: 100%; background: linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius: 2px; animation: loadFill 2s ease forwards; }\n @keyframes loadFill { from { width: 0; } to { width: 100%; } }\n @keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: .8; } }\n\n \/* \u2500\u2500 SCROLL TOP \u2500\u2500 *\/\n #scrollTop {\n position: fixed; bottom: 1.5rem; left: 1.5rem;\n width: 44px; height: 44px;\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n color: var(--navy); border: none; border-radius: 10px; cursor: pointer;\n font-size: 1rem; opacity: 0; pointer-events: none; transition: all .3s;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 4px 16px rgba(212,175,55,.4);\n }\n #scrollTop.visible { opacity: 1; pointer-events: all; }\n #scrollTop:hover { transform: translateY(-3px); }\n\n \/* \u2500\u2500 COUNTER ANIMATION \u2500\u2500 *\/\n .count-el { transition: all .5s; }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 1024px) {\n .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }\n .hero-visual { display: none; }\n .why-grid { grid-template-columns: 1fr; }\n .contact-grid { grid-template-columns: 1fr; }\n .footer-inner { grid-template-columns: 1fr 1fr; }\n }\n @media (max-width: 768px) {\n .nav-links { display: none; }\n .hamburger { display: flex; }\n .hero-inner { padding-top: 5rem; }\n .info-cards { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; }\n .footer-inner { grid-template-columns: 1fr; }\n .form-grid2 { grid-template-columns: 1fr; }\n .search-grid { grid-template-columns: 1fr 1fr; }\n .testi-inner { grid-template-columns: 1fr; }\n }\n @media (max-width: 480px) {\n .search-grid { grid-template-columns: 1fr; }\n .hero-stats { gap: 1rem; }\n .section { padding: 3.5rem 1rem; }\n }\n\n \/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\n .fade-in { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }\n .fade-in.visible { opacity: 1; transform: translateY(0); }\n\n \/* \u2500\u2500 WHATSAPP FLOAT \u2500\u2500 *\/\n #wa-btn {\n position: fixed; bottom: 5rem; right: 1.5rem;\n width: 52px; height: 52px; background: #25d366;\n border-radius: 50%; display: flex; align-items: center; justify-content: center;\n color: #fff; font-size: 1.5rem; text-decoration: none; z-index: 900;\n box-shadow: 0 4px 20px rgba(37,211,102,.4);\n animation: waPulse 2s infinite;\n }\n @keyframes waPulse {\n 0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); }\n 50% { box-shadow: 0 4px 40px rgba(37,211,102,.7); }\n }\n <\/style>\n<\/head>\n<body>\n\n\n<div id=\"loader\">\n <div class=\"loader-logo\">\u2708 SR VOYAGES<\/div>\n <div class=\"loader-bar\"><div class=\"loader-fill\"><\/div><\/div>\n<\/div>\n\n\n<nav id=\"navbar\">\n <div class=\"nav-inner\">\n <a href=\"#\" class=\"logo\">\n <img decoding=\"async\" src=\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\" alt=\"SR VOYAGES\" class=\"logo-img\" onerror=\"this.onerror=null;this.style.display='none';this.parentNode.querySelector('.logo-fallback').style.display='flex';\" \/>\n <span class=\"logo-fallback\" style=\"display:none;align-items:center;gap:.5rem;\">\n <span style=\"width:44px;height:44px;background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;color:var(--navy);flex-shrink:0;\">SR<\/span>\n <span class=\"logo-text\">SR <span>VOYAGES<\/span><\/span>\n <\/span>\n <\/a>\n <div class=\"nav-links\">\n <a href=\"#hero\" class=\"active\">Accueil<\/a>\n <a href=\"#destinations\">Destinations<\/a>\n <a href=\"#services\">Services<\/a>\n <a href=\"#offres\">Offres<\/a>\n <a href=\"#temoignages\">Avis<\/a>\n <a href=\"#contact\">Contact<\/a>\n <a href=\"#contact\" class=\"btn-nav\">R\u00e9server<\/a>\n <\/div>\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Menu\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n <\/div>\n<\/nav>\n\n\n<div id=\"mobile-menu\">\n <a href=\"#hero\" onclick=\"closeMobile()\">\ud83c\udfe0 Accueil<\/a>\n <a href=\"#destinations\" onclick=\"closeMobile()\">\ud83c\udf0d Destinations<\/a>\n <a href=\"#services\" onclick=\"closeMobile()\">\u2699\ufe0f Services<\/a>\n <a href=\"#offres\" onclick=\"closeMobile()\">\ud83c\udf81 Offres<\/a>\n <a href=\"#temoignages\" onclick=\"closeMobile()\">\u2b50 Avis clients<\/a>\n <a href=\"#contact\" onclick=\"closeMobile()\">\ud83d\udcde Contact & R\u00e9servation<\/a>\n<\/div>\n\n\n<section id=\"hero\">\n <div style=\"position:absolute;inset:0;overflow:hidden;pointer-events:none;\">\n <div class=\"hero-bg-shape\" style=\"width:600px;height:600px;background:#0ea5e9;top:-150px;right:-100px;\"><\/div>\n <div class=\"hero-bg-shape\" style=\"width:400px;height:400px;background:var(--gold);bottom:-100px;left:-80px;\"><\/div>\n <\/div>\n <div class=\"hero-inner\">\n \n <div>\n <div class=\"hero-badge\">\n <i class=\"fa fa-star\"><\/i> Agence de Voyage N\u00b01\n <\/div>\n <h1 class=\"hero-title\">\n Voyagez avec <span>Confiance<\/span><br>et \u00c9l\u00e9gance\n <\/h1>\n <p class=\"hero-desc\">\n SR VOYAGES vous offre des exp\u00e9riences de voyage inoubliables \u00e0 travers le monde. Billets d’avion, h\u00f4tels de luxe, circuits organis\u00e9s et bien plus \u2014 tout en un seul endroit.\n <\/p>\n <div class=\"hero-btns\">\n <a href=\"#search-section\" class=\"btn-primary\"><i class=\"fa fa-search\"><\/i> Rechercher un vol<\/a>\n <a href=\"#destinations\" class=\"btn-outline\"><i class=\"fa fa-globe\"><\/i> Nos destinations<\/a>\n <\/div>\n <div class=\"hero-stats\">\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"15000\">0<\/div><div class=\"stat-label\">Clients satisfaits<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"120\">0<\/div><div class=\"stat-label\">Destinations<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"10\">0<\/div><div class=\"stat-label\">Ans d’exp\u00e9rience<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"98\">0<\/div><div class=\"stat-label\">% Satisfaction<\/div><\/div>\n <\/div>\n <\/div>\n \n <div class=\"hero-visual\">\n <div class=\"hero-plane-anim\">\n <div style=\"position:relative;width:300px;height:300px;margin:auto;\">\n <div class=\"globe-container\">\n <div class=\"globe-lines\">\n <div class=\"globe-line\" style=\"top:20%\"><\/div>\n <div class=\"globe-line\" style=\"top:40%\"><\/div>\n <div class=\"globe-line\" style=\"top:60%\"><\/div>\n <div class=\"globe-line\" style=\"top:80%\"><\/div>\n <div class=\"globe-line-v\" style=\"left:20%\"><\/div>\n <div class=\"globe-line-v\" style=\"left:40%\"><\/div>\n <div class=\"globe-line-v\" style=\"left:60%\"><\/div>\n <div class=\"globe-line-v\" style=\"left:80%\"><\/div>\n <\/div>\n <div style=\"position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;opacity:.3;\">\ud83c\udf0d<\/div>\n <\/div>\n <div class=\"plane-orbit\">\n <div class=\"plane-dot\">\u2708<\/div>\n <\/div>\n <\/div>\n <div class=\"info-cards\">\n <div class=\"info-card\">\n <div class=\"ic-icon\"><i class=\"fa fa-ticket-alt\"><\/i><\/div>\n <div>\n <div class=\"ic-title\">Billet disponible<\/div>\n <div class=\"ic-sub\">Paris \u2192 Dubai d\u00e8s 420\u20ac<\/div>\n <\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"ic-icon\"><i class=\"fa fa-hotel\"><\/i><\/div>\n <div>\n <div class=\"ic-title\">H\u00f4tel confirm\u00e9<\/div>\n <div class=\"ic-sub\">5\u2605 Marrakech, 89\u20ac\/nuit<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"search-section\" style=\"padding: 0 1.5rem;\">\n <div style=\"max-width:1100px;margin:auto;background:#fff;border-radius:20px;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.12);margin-top:-50px;position:relative;z-index:10;\">\n <div class=\"search-wrapper\">\n <div class=\"search-tabs\">\n <button class=\"stab active\" onclick=\"switchTab(this,'tab-vol')\"><i class=\"fa fa-plane\"><\/i> Vol<\/button>\n <button class=\"stab\" onclick=\"switchTab(this,'tab-hotel')\"><i class=\"fa fa-hotel\"><\/i> H\u00f4tel<\/button>\n <button class=\"stab\" onclick=\"switchTab(this,'tab-vh')\"><i class=\"fa fa-suitcase\"><\/i> Vol + H\u00f4tel<\/button>\n <button class=\"stab\" onclick=\"switchTab(this,'tab-circuit')\"><i class=\"fa fa-route\"><\/i> Circuit<\/button>\n <\/div>\n\n \n <div class=\"search-panel active\" id=\"tab-vol\">\n <div style=\"display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;\">\n <label style=\"display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#475569;cursor:pointer;\">\n <input type=\"radio\" name=\"vol-type\" value=\"aller-retour\" checked \/> Aller-retour\n <\/label>\n <label style=\"display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#475569;cursor:pointer;\">\n <input type=\"radio\" name=\"vol-type\" value=\"aller-simple\" \/> Aller simple\n <\/label>\n <label style=\"display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#475569;cursor:pointer;\">\n <input type=\"radio\" name=\"vol-type\" value=\"multi-dest\" \/> Multi-destinations\n <\/label>\n <\/div>\n <div class=\"search-grid\">\n <div class=\"search-field\">\n <label><i class=\"fa fa-plane-departure\"><\/i> D\u00e9part<\/label>\n <input type=\"text\" placeholder=\"Ville ou a\u00e9roport\" id=\"v-depart\" list=\"airports\" \/>\n <datalist id=\"airports\">\n <option value=\"Paris (CDG)\"><\/option>\n <option value=\"Lyon (LYS)\"><\/option>\n <option value=\"Marseille (MRS)\"><\/option>\n <option value=\"Nice (NCE)\"><\/option>\n <option value=\"Bordeaux (BOD)\"><\/option>\n <option value=\"Bruxelles (BRU)\"><\/option>\n <option value=\"Gen\u00e8ve (GVA)\"><\/option>\n <\/datalist>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-plane-arrival\"><\/i> Destination<\/label>\n <input type=\"text\" placeholder=\"Ville ou a\u00e9roport\" id=\"v-dest\" list=\"airports2\"\/>\n <datalist id=\"airports2\">\n <option value=\"Dubai (DXB)\"><\/option>\n <option value=\"Marrakech (RAK)\"><\/option>\n <option value=\"Istanbul (IST)\"><\/option>\n <option value=\"Tunis (TUN)\"><\/option>\n <option value=\"New York (JFK)\"><\/option>\n <option value=\"Bangkok (BKK)\"><\/option>\n <option value=\"Bali (DPS)\"><\/option>\n <option value=\"Dakar (DSS)\"><\/option>\n <\/datalist>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar\"><\/i> D\u00e9part<\/label>\n <input type=\"date\" id=\"v-date-dep\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar-check\"><\/i> Retour<\/label>\n <input type=\"date\" id=\"v-date-ret\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-users\"><\/i> Passagers<\/label>\n <select>\n <option>1 adulte<\/option>\n <option>2 adultes<\/option>\n <option>2 adultes, 1 enfant<\/option>\n <option>2 adultes, 2 enfants<\/option>\n <option>Groupe (+10)<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-star\"><\/i> Classe<\/label>\n <select>\n <option>\u00c9conomique<\/option>\n <option>Premium \u00e9conomique<\/option>\n <option>Business<\/option>\n <option>Premi\u00e8re classe<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button class=\"btn-search\" onclick=\"doSearch()\"><i class=\"fa fa-search\"><\/i> Rechercher des vols<\/button>\n <\/div>\n\n \n <div class=\"search-panel\" id=\"tab-hotel\">\n <div class=\"search-grid\">\n <div class=\"search-field\" style=\"grid-column: span 2;\">\n <label><i class=\"fa fa-map-marker-alt\"><\/i> Destination<\/label>\n <input type=\"text\" placeholder=\"Ville, r\u00e9gion ou h\u00f4tel\u2026\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar\"><\/i> Arriv\u00e9e<\/label>\n <input type=\"date\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar-check\"><\/i> D\u00e9part<\/label>\n <input type=\"date\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-moon\"><\/i> Nuits<\/label>\n <select>\n <option>1 nuit<\/option><option>2 nuits<\/option><option>3 nuits<\/option>\n <option>5 nuits<\/option><option>7 nuits<\/option><option>10 nuits<\/option><option>14 nuits<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-users\"><\/i> Occupants<\/label>\n <select>\n <option>1 chambre, 1 adulte<\/option>\n <option>1 chambre, 2 adultes<\/option>\n <option>2 chambres, 2 adultes<\/option>\n <option>1 chambre, 2 adultes, 1 enfant<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-star\"><\/i> \u00c9toiles min.<\/label>\n <select>\n <option>Tous<\/option><option>2\u2605 et +<\/option>\n <option>3\u2605 et +<\/option><option>4\u2605 et +<\/option><option>5\u2605<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button class=\"btn-search\" onclick=\"doSearch()\"><i class=\"fa fa-search\"><\/i> Rechercher des h\u00f4tels<\/button>\n <\/div>\n\n \n <div class=\"search-panel\" id=\"tab-vh\">\n <div class=\"search-grid\">\n <div class=\"search-field\">\n <label><i class=\"fa fa-plane-departure\"><\/i> D\u00e9part<\/label>\n <input type=\"text\" placeholder=\"Ville ou a\u00e9roport\" list=\"airports\"\/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-plane-arrival\"><\/i> Destination<\/label>\n <input type=\"text\" placeholder=\"Destination\" list=\"airports2\"\/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar\"><\/i> D\u00e9part<\/label>\n <input type=\"date\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar-check\"><\/i> Retour<\/label>\n <input type=\"date\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-users\"><\/i> Voyageurs<\/label>\n <select>\n <option>2 adultes<\/option><option>1 adulte<\/option>\n <option>2 adultes, 1 enfant<\/option><option>Famille<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-moon\"><\/i> Dur\u00e9e<\/label>\n <select>\n <option>7 nuits<\/option><option>3 nuits<\/option><option>5 nuits<\/option>\n <option>10 nuits<\/option><option>14 nuits<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button class=\"btn-search\" onclick=\"doSearch()\"><i class=\"fa fa-search\"><\/i> Rechercher Vol + H\u00f4tel<\/button>\n <\/div>\n\n \n <div class=\"search-panel\" id=\"tab-circuit\">\n <div class=\"search-grid\">\n <div class=\"search-field\" style=\"grid-column:span 2;\">\n <label><i class=\"fa fa-globe\"><\/i> Destination \/ Th\u00e8me<\/label>\n <select>\n <option>Toutes destinations<\/option>\n <option>Asie du Sud-Est<\/option><option>Maghreb<\/option>\n <option>Europe<\/option><option>Afrique<\/option>\n <option>Moyen-Orient<\/option><option>Am\u00e9rique<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar\"><\/i> Mois de d\u00e9part<\/label>\n <input type=\"month\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-clock\"><\/i> Dur\u00e9e<\/label>\n <select>\n <option>Toutes dur\u00e9es<\/option>\n <option>5 \u00e0 7 jours<\/option><option>8 \u00e0 12 jours<\/option>\n <option>13 \u00e0 21 jours<\/option><option>+21 jours<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-users\"><\/i> Voyageurs<\/label>\n <select>\n <option>Solo<\/option><option>Couple<\/option>\n <option>Famille<\/option><option>Groupe<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-tag\"><\/i> Budget max.<\/label>\n <select>\n <option>Tous budgets<\/option>\n <option>Jusqu’\u00e0 1 000\u20ac<\/option><option>Jusqu’\u00e0 2 000\u20ac<\/option>\n <option>Jusqu’\u00e0 3 500\u20ac<\/option><option>+3 500\u20ac<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button class=\"btn-search\" onclick=\"doSearch()\"><i class=\"fa fa-search\"><\/i> Trouver un circuit<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"destinations\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"section-header fade-in\">\n <div class=\"section-tag\">\ud83c\udf0d Top Destinations<\/div>\n <h2 class=\"section-title\">D\u00e9couvrez nos <span>Destinations<\/span> Phares<\/h2>\n <p class=\"section-sub\">Des escapades ensoleill\u00e9es aux aventures exotiques, choisissez la destination de vos r\u00eaves<\/p>\n <\/div>\n\n \n <div style=\"display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:2rem;\" class=\"fade-in\">\n <button class=\"dest-filter active\" onclick=\"filterDest(this,'tous')\">Tous<\/button>\n <button class=\"dest-filter\" onclick=\"filterDest(this,'afrique')\">Afrique<\/button>\n <button class=\"dest-filter\" onclick=\"filterDest(this,'europe')\">Europe<\/button>\n <button class=\"dest-filter\" onclick=\"filterDest(this,'asie')\">Asie<\/button>\n <button class=\"dest-filter\" onclick=\"filterDest(this,'moyen-orient')\">Moyen-Orient<\/button>\n <button class=\"dest-filter\" onclick=\"filterDest(this,'amerique')\">Am\u00e9rique<\/button>\n <\/div>\n\n <style>\n .dest-filter {\n padding: .45rem 1.1rem; border-radius: 20px; border: 1.5px solid #e2e8f0;\n background: #fff; color: #64748b; font-size: .83rem; font-weight: 600;\n cursor: pointer; transition: all .2s;\n }\n .dest-filter.active, .dest-filter:hover {\n background: var(--gold); border-color: var(--gold); color: var(--navy);\n }\n <\/style>\n\n <div class=\"dest-grid fade-in\" id=\"dest-grid\"><\/div>\n\n <div style=\"text-align:center;margin-top:2.5rem;\" class=\"fade-in\">\n <a href=\"#contact\" class=\"btn-primary\" style=\"display:inline-flex;\">\n <i class=\"fa fa-globe\"><\/i> Voir toutes nos destinations\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"services\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"section-header fade-in\">\n <div class=\"section-tag\" style=\"background:rgba(212,175,55,.2);color:var(--gold);\">\u2699\ufe0f Nos Services<\/div>\n <h2 class=\"section-title\" style=\"color:#fff;\">Tout ce dont vous avez <span>besoin<\/span><\/h2>\n <p class=\"section-sub\">Des services complets pour planifier chaque aspect de votre voyage<\/p>\n <\/div>\n <div class=\"services-grid fade-in\">\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-plane\"><\/i><\/div>\n <div class=\"service-title\">Billets d’avion<\/div>\n <div class=\"service-desc\">R\u00e9servez vos vols aux meilleurs tarifs \u2014 toutes compagnies, toutes destinations, classes \u00e9conomique \u00e0 premi\u00e8re classe.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-hotel\"><\/i><\/div>\n <div class=\"service-title\">H\u00f4tels & Resorts<\/div>\n <div class=\"service-desc\">Plus de 500 000 h\u00f4tels partenaires \u00e0 travers le monde, du budget \u00e9conomique au palace 5 \u00e9toiles.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-route\"><\/i><\/div>\n <div class=\"service-title\">Circuits organis\u00e9s<\/div>\n <div class=\"service-desc\">Circuits guid\u00e9s avec h\u00e9bergement, transport et guide local inclus. Partez l’esprit libre !<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-ship\"><\/i><\/div>\n <div class=\"service-title\">Croisi\u00e8res<\/div>\n <div class=\"service-desc\">Explorez la M\u00e9diterran\u00e9e, les Cara\u00efbes ou les fjords nordiques \u00e0 bord de paquebots de luxe.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-car\"><\/i><\/div>\n <div class=\"service-title\">Location de voitures<\/div>\n <div class=\"service-desc\">V\u00e9hicules disponibles dans +150 pays. R\u00e9servation flexible, assurance incluse.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-id-card\"><\/i><\/div>\n <div class=\"service-title\">Visas & Formalit\u00e9s<\/div>\n <div class=\"service-desc\">Assistance compl\u00e8te pour l’obtention de visas, assurances voyage et documents officiels.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-shield-alt\"><\/i><\/div>\n <div class=\"service-title\">Assurance voyage<\/div>\n <div class=\"service-desc\">Couverture m\u00e9dicale, annulation, bagages perdus et rapatriement \u2014 voyagez sereinement.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-users\"><\/i><\/div>\n <div class=\"service-title\">Voyages de groupe<\/div>\n <div class=\"service-desc\">Organisation compl\u00e8te pour groupes scolaires, s\u00e9minaires d’entreprise et voyages de noces.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"offres\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"section-header fade-in\">\n <div class=\"section-tag\">\ud83d\udd25 Offres Sp\u00e9ciales<\/div>\n <h2 class=\"section-title\">Nos <span>Meilleures<\/span> Promotions<\/h2>\n <p class=\"section-sub\">Des offres exclusives \u00e0 dur\u00e9e limit\u00e9e \u2014 profitez-en avant qu’elles disparaissent !<\/p>\n <\/div>\n\n \n <div style=\"background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:16px;padding:1.5rem 2rem;text-align:center;margin-bottom:2.5rem;display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;\" class=\"fade-in\">\n <div style=\"color:#fff;font-weight:700;font-size:1rem;\">\u23f0 Offres flash \u2014 expire dans :<\/div>\n <div style=\"display:flex;gap:1rem;\">\n <div style=\"text-align:center;\">\n <div style=\"background:rgba(212,175,55,.2);border:1px solid rgba(212,175,55,.4);border-radius:8px;padding:.5rem .9rem;font-size:1.5rem;font-weight:900;color:var(--gold);min-width:60px;\" id=\"cnt-h\">00<\/div>\n <div style=\"color:#64748b;font-size:.7rem;margin-top:.2rem;\">HEURES<\/div>\n <\/div>\n <div style=\"text-align:center;\">\n <div style=\"background:rgba(212,175,55,.2);border:1px solid rgba(212,175,55,.4);border-radius:8px;padding:.5rem .9rem;font-size:1.5rem;font-weight:900;color:var(--gold);min-width:60px;\" id=\"cnt-m\">00<\/div>\n <div style=\"color:#64748b;font-size:.7rem;margin-top:.2rem;\">MINUTES<\/div>\n <\/div>\n <div style=\"text-align:center;\">\n <div style=\"background:rgba(212,175,55,.2);border:1px solid rgba(212,175,55,.4);border-radius:8px;padding:.5rem .9rem;font-size:1.5rem;font-weight:900;color:var(--gold);min-width:60px;\" id=\"cnt-s\">00<\/div>\n <div style=\"color:#64748b;font-size:.7rem;margin-top:.2rem;\">SECONDES<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"offres-grid fade-in\" id=\"offres-grid\"><\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"why\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"why-grid\">\n <div class=\"fade-in\">\n <div class=\"section-tag\">\ud83d\udc8e Pourquoi SR VOYAGES<\/div>\n <h2 class=\"section-title\" style=\"margin-bottom:2rem;\">L’excellence \u00e0 votre <span>service<\/span><\/h2>\n <div class=\"why-list\">\n <div class=\"why-item\">\n <div class=\"why-num\">01<\/div>\n <div>\n <div class=\"why-title\">Meilleur prix garanti<\/div>\n <div class=\"why-text\">Nous vous remboursons la diff\u00e9rence si vous trouvez moins cher ailleurs. Notre promesse, votre s\u00e9r\u00e9nit\u00e9.<\/div>\n <\/div>\n <\/div>\n <div class=\"why-item\">\n <div class=\"why-num\">02<\/div>\n <div>\n <div class=\"why-title\">Experts certifi\u00e9s<\/div>\n <div class=\"why-text\">Notre \u00e9quipe de 30+ conseillers sp\u00e9cialis\u00e9s vous accompagne 7j\/7 pour planifier votre voyage parfait.<\/div>\n <\/div>\n <\/div>\n <div class=\"why-item\">\n <div class=\"why-num\">03<\/div>\n <div>\n <div class=\"why-title\">Assistance 24h\/24<\/div>\n <div class=\"why-text\">Un incident en voyage ? Notre service d’assistance est disponible 24h\/24 et 7j\/7 depuis n’importe quel pays.<\/div>\n <\/div>\n <\/div>\n <div class=\"why-item\">\n <div class=\"why-num\">04<\/div>\n <div>\n <div class=\"why-title\">Paiement s\u00e9curis\u00e9<\/div>\n <div class=\"why-text\">Paiement s\u00e9curis\u00e9 SSL, facilit\u00e9s en plusieurs fois sans frais, et remboursement garanti en cas d’annulation.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"fade-in\">\n <div class=\"why-visual\">\n <div class=\"why-big-num\" id=\"sat-counter\">98%<\/div>\n <div class=\"why-big-label\">Taux de satisfaction client<\/div>\n <div class=\"why-meters\">\n <div>\n <div class=\"why-meter-label\"><span>\ud83d\udeeb Vols ponctuels<\/span><span>96%<\/span><\/div>\n <div class=\"why-meter-bar\"><div class=\"why-meter-fill\" style=\"width:96%\"><\/div><\/div>\n <\/div>\n <div>\n <div class=\"why-meter-label\"><span>\ud83c\udfe8 Qualit\u00e9 h\u00e9bergements<\/span><span>97%<\/span><\/div>\n <div class=\"why-meter-bar\"><div class=\"why-meter-fill\" style=\"width:97%\"><\/div><\/div>\n <\/div>\n <div>\n <div class=\"why-meter-label\"><span>\ud83d\udcde Service client<\/span><span>99%<\/span><\/div>\n <div class=\"why-meter-bar\"><div class=\"why-meter-fill\" style=\"width:99%\"><\/div><\/div>\n <\/div>\n <div>\n <div class=\"why-meter-label\"><span>\ud83d\udcb0 Rapport qualit\u00e9\/prix<\/span><span>95%<\/span><\/div>\n <div class=\"why-meter-bar\"><div class=\"why-meter-fill\" style=\"width:95%\"><\/div><\/div>\n <\/div>\n <div>\n <div class=\"why-meter-label\"><span>\ud83d\udd01 Clients fid\u00e8les<\/span><span>87%<\/span><\/div>\n <div class=\"why-meter-bar\"><div class=\"why-meter-fill\" style=\"width:87%\"><\/div><\/div>\n <\/div>\n <\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem;\">\n <div style=\"background:rgba(255,255,255,.05);border-radius:10px;padding:1rem;text-align:center;\">\n <div style=\"font-size:1.4rem;font-weight:900;color:var(--gold);\">15K+<\/div>\n <div style=\"font-size:.75rem;color:#64748b;\">Voyageurs<\/div>\n <\/div>\n <div style=\"background:rgba(255,255,255,.05);border-radius:10px;padding:1rem;text-align:center;\">\n <div style=\"font-size:1.4rem;font-weight:900;color:var(--gold);\">120+<\/div>\n <div style=\"font-size:.75rem;color:#64748b;\">Destinations<\/div>\n <\/div>\n <div style=\"background:rgba(255,255,255,.05);border-radius:10px;padding:1rem;text-align:center;\">\n <div style=\"font-size:1.4rem;font-weight:900;color:var(--gold);\">10 ans<\/div>\n <div style=\"font-size:.75rem;color:#64748b;\">Exp\u00e9rience<\/div>\n <\/div>\n <div style=\"background:rgba(255,255,255,.05);border-radius:10px;padding:1rem;text-align:center;\">\n <div style=\"font-size:1.4rem;font-weight:900;color:var(--gold);\">30+<\/div>\n <div style=\"font-size:.75rem;color:#64748b;\">Experts<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"temoignages\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"section-header fade-in\">\n <div class=\"section-tag\">\u2b50 Avis Clients<\/div>\n <h2 class=\"section-title\">Ce que disent nos <span>voyageurs<\/span><\/h2>\n <p class=\"section-sub\">Des milliers de clients satisfaits partagent leur exp\u00e9rience avec SR VOYAGES<\/p>\n <\/div>\n <div class=\"testi-carousel fade-in\">\n <div class=\"testi-track\" id=\"testi-track\"><\/div>\n <div class=\"testi-nav\" id=\"testi-nav\"><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"newsletter\">\n <div style=\"max-width:700px;margin:auto;\">\n <div style=\"font-size:2.5rem;margin-bottom:1rem;\">\u2708\ufe0f<\/div>\n <h2 class=\"newsletter-title\">Recevez nos meilleures <span style=\"color:var(--gold)\">offres<\/span> en avant-premi\u00e8re<\/h2>\n <p class=\"newsletter-sub\">Inscrivez-vous \u00e0 notre newsletter et soyez le premier \u00e0 profiter de nos promotions exclusives et bons plans voyage.<\/p>\n <form class=\"newsletter-form\" onsubmit=\"subscribeNewsletter(event)\">\n <input class=\"newsletter-input\" type=\"email\" placeholder=\"Votre adresse e-mail\u2026\" required id=\"nl-email\"\/>\n <button type=\"submit\" class=\"btn-nl\"><i class=\"fa fa-paper-plane\"><\/i> S’inscrire<\/button>\n <\/form>\n <p style=\"color:#475569;font-size:.78rem;margin-top:.8rem;\">\ud83d\udd12 Vos donn\u00e9es sont 100% s\u00e9curis\u00e9es. D\u00e9sabonnement en 1 clic.<\/p>\n <\/div>\n<\/section>\n\n\n<section id=\"contact\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"section-header fade-in\">\n <div class=\"section-tag\">\ud83d\udcde Contact & R\u00e9servation<\/div>\n <h2 class=\"section-title\">Parlons de votre <span>prochain voyage<\/span><\/h2>\n <p class=\"section-sub\">Notre \u00e9quipe est disponible 6j\/7 pour vous conseiller et r\u00e9aliser votre devis personnalis\u00e9.<\/p>\n <\/div>\n <div class=\"contact-grid fade-in\">\n \n <div class=\"contact-info\">\n <div style=\"background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:20px;padding:2rem;color:#fff;margin-bottom:1rem;\">\n <h3 style=\"font-size:1.2rem;font-weight:800;margin-bottom:.5rem;\">Horaires d’ouverture<\/h3>\n <p style=\"color:#94a3b8;font-size:.87rem;line-height:1.6;\">\n Lundi \u2013 Vendredi : <strong style=\"color:var(--gold)\">08h00 \u2013 19h00<\/strong><br>\n Samedi : <strong style=\"color:var(--gold)\">09h00 \u2013 17h00<\/strong><br>\n Dimanche : <strong style=\"color:#ef4444;\">Ferm\u00e9<\/strong>\n <\/p>\n <div style=\"margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08);\">\n <div style=\"font-size:.8rem;color:#94a3b8;\">Assistance voyage 24h\/24 :<\/div>\n <div style=\"font-size:1.1rem;font-weight:800;color:var(--gold);\">+33 1 23 45 67 89<\/div>\n <\/div>\n <\/div>\n <div class=\"contact-item\">\n <div class=\"contact-icon\"><i class=\"fa fa-map-marker-alt\"><\/i><\/div>\n <div>\n <div class=\"contact-label\">Adresse<\/div>\n <div class=\"contact-val\">Av El Hadji Malick Sy, Quartier Randoul\u00e8ne Nord, Thi\u00e8s \u2014 S\u00e9n\u00e9gal<\/div>\n <\/div>\n <\/div>\n <div class=\"contact-item\">\n <div class=\"contact-icon\"><i class=\"fa fa-phone\"><\/i><\/div>\n <div>\n <div class=\"contact-label\">T\u00e9l\u00e9phone<\/div>\n <div class=\"contact-val\">\n <a href=\"tel:+221771437125\" style=\"color:var(--navy);text-decoration:none;display:block;\">+221 77 143 71 25<\/a>\n <a href=\"tel:+221770482193\" style=\"color:var(--navy);text-decoration:none;display:block;\">+221 77 048 21 93<\/a>\n <a href=\"tel:+221339532552\" style=\"color:var(--navy);text-decoration:none;display:block;\">+221 33 953 25 52<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"contact-item\">\n <div class=\"contact-icon\"><i class=\"fa fa-envelope\"><\/i><\/div>\n <div>\n <div class=\"contact-label\">Email<\/div>\n <div class=\"contact-val\"><a href=\"mailto:contact@srvoyages.com\" style=\"color:var(--navy);text-decoration:none;\">contact@srvoyages.com<\/a><\/div>\n <\/div>\n <\/div>\n <div class=\"contact-item\">\n <div class=\"contact-icon\"><i class=\"fab fa-whatsapp\"><\/i><\/div>\n <div>\n <div class=\"contact-label\">WhatsApp<\/div>\n <div class=\"contact-val\">\n <a href=\"https:\/\/wa.me\/221771437125\" target=\"_blank\" style=\"color:var(--navy);text-decoration:none;display:block;\">+221 77 143 71 25<\/a>\n <a href=\"https:\/\/wa.me\/221770482193\" target=\"_blank\" style=\"color:var(--navy);text-decoration:none;display:block;\">+221 77 048 21 93<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"contact-form\">\n <h3 style=\"font-size:1.3rem;font-weight:800;color:var(--navy);margin-bottom:1.5rem;\">\n <i class=\"fa fa-edit\" style=\"color:var(--gold);\"><\/i> Demande de devis \/ R\u00e9servation\n <\/h3>\n <form onsubmit=\"submitContact(event)\">\n <div class=\"form-grid2\">\n <div class=\"form-group\">\n <label>Pr\u00e9nom<\/label>\n <input class=\"form-control\" type=\"text\" placeholder=\"Jean\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Nom<\/label>\n <input class=\"form-control\" type=\"text\" placeholder=\"Dupont\" required \/>\n <\/div>\n <\/div>\n <div class=\"form-grid2\">\n <div class=\"form-group\">\n <label>Email<\/label>\n <input class=\"form-control\" type=\"email\" placeholder=\"jean@email.com\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>T\u00e9l\u00e9phone<\/label>\n <input class=\"form-control\" type=\"tel\" placeholder=\"+221 7X XXX XX XX\" \/>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Type de voyage<\/label>\n <select class=\"form-control\">\n <option>Vol seul<\/option>\n <option>H\u00f4tel seul<\/option>\n <option>Vol + H\u00f4tel<\/option>\n <option>Circuit organis\u00e9<\/option>\n <option>Croisi\u00e8re<\/option>\n <option>Voyage sur-mesure<\/option>\n <\/select>\n <\/div>\n <div class=\"form-grid2\">\n <div class=\"form-group\">\n <label>Destination souhait\u00e9e<\/label>\n <input class=\"form-control\" type=\"text\" placeholder=\"Ex: Marrakech, Dubai\u2026\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Date de d\u00e9part<\/label>\n <input class=\"form-control\" type=\"date\" \/>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Budget approximatif<\/label>\n <select class=\"form-control\">\n <option>Moins de 500\u20ac<\/option>\n <option>500\u20ac \u2013 1 000\u20ac<\/option>\n <option>1 000\u20ac \u2013 2 000\u20ac<\/option>\n <option>2 000\u20ac \u2013 5 000\u20ac<\/option>\n <option>Plus de 5 000\u20ac<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label>Votre message<\/label>\n <textarea class=\"form-control\" rows=\"4\" placeholder=\"D\u00e9crivez votre projet de voyage, vos pr\u00e9f\u00e9rences, questions\u2026\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn-search\" style=\"margin-top:0;\">\n <i class=\"fa fa-paper-plane\"><\/i> Envoyer ma demande\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer id=\"footer\">\n <div class=\"footer-inner\">\n <div>\n <a href=\"#\" class=\"logo\" style=\"margin-bottom:.8rem;display:inline-flex;\">\n <img decoding=\"async\" src=\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\" alt=\"SR VOYAGES\" style=\"height:44px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(212,175,55,0.35));\" onerror=\"this.onerror=null;this.style.display='none';this.nextElementSibling.style.display='flex';\" \/>\n <span style=\"display:none;align-items:center;gap:.4rem;\"><span style=\"width:38px;height:38px;background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:900;color:var(--navy);flex-shrink:0;\">SR<\/span><span class=\"logo-text\" style=\"font-size:1.1rem;\">SR <span>VOYAGES<\/span><\/span><\/span>\n <\/a>\n <p class=\"footer-brand-desc\">Votre agence de voyage de confiance depuis 2015. R\u00e9servation de billets, h\u00f4tels, circuits et s\u00e9jours sur mesure aux meilleurs prix.<\/p>\n <div class=\"footer-social\">\n <a href=\"#\" class=\"social-btn\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\" class=\"social-btn\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"#\" class=\"social-btn\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"#\" class=\"social-btn\" aria-label=\"YouTube\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <a href=\"#\" class=\"social-btn\" aria-label=\"WhatsApp\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n <\/div>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Services<\/div>\n <div class=\"footer-links\">\n <a href=\"#services\">Billets d’avion<\/a>\n <a href=\"#services\">H\u00f4tels & Resorts<\/a>\n <a href=\"#services\">Circuits organis\u00e9s<\/a>\n <a href=\"#services\">Croisi\u00e8res<\/a>\n <a href=\"#services\">Location voiture<\/a>\n <a href=\"#services\">Assurance voyage<\/a>\n <\/div>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Destinations<\/div>\n <div class=\"footer-links\">\n <a href=\"#destinations\">Marrakech<\/a>\n <a href=\"#destinations\">Dubai<\/a>\n <a href=\"#destinations\">Istanbul<\/a>\n <a href=\"#destinations\">Bali<\/a>\n <a href=\"#destinations\">Dakar<\/a>\n <a href=\"#destinations\">Paris<\/a>\n <\/div>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Informations<\/div>\n <div class=\"footer-links\">\n <a href=\"#\">\u00c0 propos de nous<\/a>\n <a href=\"#\">Conditions g\u00e9n\u00e9rales<\/a>\n <a href=\"#\">Politique de confidentialit\u00e9<\/a>\n <a href=\"#\">FAQ<\/a>\n <a href=\"#contact\">Recrutement<\/a>\n <a href=\"#contact\">Partenaires<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <div>\u00a9 2025 <strong style=\"color:var(--gold);\">SR VOYAGES<\/strong>. Tous droits r\u00e9serv\u00e9s.<\/div>\n <div style=\"display:flex;gap:1rem;flex-wrap:wrap;\">\n <span>\ud83d\udd12 Paiement s\u00e9curis\u00e9<\/span>\n <span>\u2708\ufe0f IATA Certifi\u00e9<\/span>\n <span>\ud83c\udfc6 Agence N\u00b01<\/span>\n <\/div>\n <div style=\"display:flex;gap:.7rem;align-items:center;\">\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a4\/Mastercard_2019_logo.svg\" alt=\"Mastercard\" style=\"height:22px;opacity:.5;\"\/>\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/5e\/Visa_Inc._logo.svg\" alt=\"Visa\" style=\"height:18px;opacity:.5;\"\/>\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b5\/PayPal.svg\" alt=\"PayPal\" style=\"height:22px;opacity:.5;\"\/>\n <\/div>\n <\/div>\n<\/footer>\n\n\n\n<div class=\"modal-overlay\" id=\"search-modal\" onclick=\"closeModal('search-modal')\">\n <div class=\"modal-box\" onclick=\"event.stopPropagation()\">\n <div class=\"modal-header\">\n <div class=\"modal-title\">\ud83d\udd0d R\u00e9sultats de recherche<\/div>\n <button class=\"modal-close\" onclick=\"closeModal('search-modal')\">\u2715<\/button>\n <\/div>\n <div id=\"search-results-content\">\n <div style=\"text-align:center;padding:2rem;\">\n <div style=\"font-size:3rem;margin-bottom:1rem;\">\u2708\ufe0f<\/div>\n <div style=\"font-size:1rem;color:#64748b;\">Recherche en cours\u2026<\/div>\n <div style=\"margin-top:1.5rem;height:4px;background:#f1f5f9;border-radius:2px;overflow:hidden;\">\n <div style=\"height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:2px;animation:loadFill 2s ease forwards;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"modal-overlay\" id=\"booking-modal\" onclick=\"closeModal('booking-modal')\">\n <div class=\"modal-box\" onclick=\"event.stopPropagation()\">\n <div class=\"modal-header\">\n <div class=\"modal-title\" id=\"booking-title\">\ud83d\udccb R\u00e9servation<\/div>\n <button class=\"modal-close\" onclick=\"closeModal('booking-modal')\">\u2715<\/button>\n <\/div>\n <div id=\"booking-content\"><\/div>\n <\/div>\n<\/div>\n\n\n<a href=\"https:\/\/wa.me\/221771437125\" id=\"wa-btn\" target=\"_blank\" aria-label=\"WhatsApp\">\n <i class=\"fab fa-whatsapp\"><\/i>\n<\/a>\n\n<button id=\"scrollTop\" onclick=\"window.scrollTo({top:0,behavior:'smooth'})\" aria-label=\"Haut de page\">\n <i class=\"fa fa-arrow-up\"><\/i>\n<\/button>\n\n\n<div id=\"toast\"><\/div>\n\n\n<script>\n\/\/ \u2500\u2500\u2500 DATA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst DESTINATIONS = [\n {name:'Marrakech', country:'Maroc', continent:'afrique', price:'349', rating:4.8, reviews:512, badge:'Populaire', emoji:'\ud83d\udd4c', colors:['#ea580c','#f97316'], desc:'La ville rouge aux mille saveurs'},\n {name:'Dubai', country:'\u00c9mirats Arabes', continent:'moyen-orient', price:'520', rating:4.9, reviews:781, badge:'Coup de \u2764\ufe0f', emoji:'\ud83c\udfd9\ufe0f', colors:['#0ea5e9','#38bdf8'], desc:'Luxe et modernit\u00e9 au d\u00e9sert'},\n {name:'Istanbul', country:'T\u00fcrkiye', continent:'europe', price:'299', rating:4.7, reviews:634, badge:'Bestseller', emoji:'\ud83d\udd4c', colors:['#dc2626','#f87171'], desc:'Le pont entre Orient et Occident'},\n {name:'Bali', country:'Indon\u00e9sie', continent:'asie', price:'820', rating:4.9, reviews:920, badge:'Exotique', emoji:'\ud83c\udf34', colors:['#16a34a','#4ade80'], desc:'L\\'\u00eele des Dieux'},\n {name:'Dakar', country:'S\u00e9n\u00e9gal', continent:'afrique', price:'390', rating:4.6, reviews:289, badge:'Nouveaut\u00e9', emoji:'\ud83c\udf0a', colors:['#7c3aed','#a78bfa'], desc:'La Teranga \u00e0 son meilleur'},\n {name:'Santorini', country:'Gr\u00e8ce', continent:'europe', price:'650', rating:4.9, reviews:1023, badge:'Romance', emoji:'\ud83c\udfdb\ufe0f', colors:['#2563eb','#60a5fa'], desc:'Couchers de soleil l\u00e9gendaires'},\n {name:'New York', country:'\u00c9tats-Unis', continent:'amerique', price:'720', rating:4.8, reviews:845, badge:'Iconic', emoji:'\ud83d\uddfd', colors:['#1e293b','#475569'], desc:'La ville qui ne dort jamais'},\n {name:'Tokyo', country:'Japon', continent:'asie', price:'980', rating:4.9, reviews:1100, badge:'Top Asie', emoji:'\u26e9\ufe0f', colors:['#be123c','#fb7185'], desc:'Futurisme et traditions mill\u00e9naires'},\n {name:'Casablanca', country:'Maroc', continent:'afrique', price:'199', rating:4.5, reviews:340, badge:'Promo', emoji:'\ud83c\udfd9\ufe0f', colors:['#0c4a6e','#0ea5e9'], desc:'La ville blanche du Maghreb'},\n {name:'Maldives', country:'Maldives', continent:'asie', price:'1490', rating:5.0, reviews:665, badge:'Luxe', emoji:'\ud83c\udfdd\ufe0f', colors:['#0d9488','#2dd4bf'], desc:'Le paradis sur terre'},\n {name:'Barcelone', country:'Espagne', continent:'europe', price:'280', rating:4.7, reviews:912, badge:'Week-end', emoji:'\ud83c\udfd7\ufe0f', colors:['#ca8a04','#facc15'], desc:'Gaud\u00ed, soleil et tapas'},\n {name:'Tunis', country:'Tunisie', continent:'afrique', price:'169', rating:4.4, reviews:408, badge:'Bon plan', emoji:'\ud83c\udffa', colors:['#dc2626','#fca5a5'], desc:'Histoire et plages cristallines'},\n];\n\nconst OFFRES = [\n {\n title:'Escapade Dubai 7 nuits',\n sub:'Vol A\/R + H\u00f4tel 5\u2605 + Transferts',\n icon:'\ud83c\udfd9\ufe0f', iconBg:'linear-gradient(135deg,#0ea5e9,#38bdf8)',\n prix:'1290', devise:'\u20ac', perPers:true,\n tags:['7 nuits','Vol inclus','H\u00f4tel 5\u2605','Transferts'],\n color:'#0ea5e9',\n btnLabel:'Je r\u00e9serve', btnStyle:'background:linear-gradient(135deg,#0ea5e9,#38bdf8);color:#fff;',\n id:'offre-dubai'\n },\n {\n title:'Marrakech Express 4 nuits',\n sub:'Vol + Riad 4\u2605 + Petit-d\u00e9jeuner',\n icon:'\ud83d\udd4c', iconBg:'linear-gradient(135deg,#ea580c,#f97316)',\n prix:'549', devise:'\u20ac', perPers:true,\n tags:['4 nuits','Vol inclus','Riad 4\u2605','Pdj inclus'],\n color:'#ea580c',\n btnLabel:'R\u00e9server maintenant', btnStyle:'background:linear-gradient(135deg,#ea580c,#f97316);color:#fff;',\n id:'offre-marrakech'\n },\n {\n title:'Circuit Asie du Sud-Est 15J',\n sub:'Tha\u00eflande + Vietnam + Cambodge',\n icon:'\ud83c\udf0f', iconBg:'linear-gradient(135deg,#16a34a,#4ade80)',\n prix:'2490', devise:'\u20ac', perPers:true,\n tags:['15 jours','H\u00f4tels inclus','Guide FR','Vol AR'],\n color:'#16a34a',\n btnLabel:'Voir le programme', btnStyle:'background:linear-gradient(135deg,#16a34a,#4ade80);color:#fff;',\n id:'offre-asie'\n },\n {\n title:'Maldives Lune de Miel',\n sub:'Villa sur pilotis + All Inclusive',\n icon:'\ud83c\udfdd\ufe0f', iconBg:'linear-gradient(135deg,#0d9488,#2dd4bf)',\n prix:'3200', devise:'\u20ac', perPers:false,\n tags:['7 nuits','Villa pilotis','All Inclusive','Romance'],\n color:'#0d9488',\n btnLabel:'Demander un devis', btnStyle:'background:linear-gradient(135deg,#0d9488,#2dd4bf);color:#fff;',\n id:'offre-maldives'\n },\n {\n title:'Dakar & S\u00e9n\u00e9gal 8 jours',\n sub:'Vol + H\u00f4tel + Excursions incluses',\n icon:'\ud83c\udf0a', iconBg:'linear-gradient(135deg,#7c3aed,#a78bfa)',\n prix:'890', devise:'\u20ac', perPers:true,\n tags:['8 jours','Vol inclus','Excursions','Guide local'],\n color:'#7c3aed',\n btnLabel:'R\u00e9server', btnStyle:'background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;',\n id:'offre-dakar'\n },\n {\n title:'Istanbul Long Week-end',\n sub:'3 nuits H\u00f4tel 4\u2605 + Visite guid\u00e9e',\n icon:'\ud83d\udd4c', iconBg:'linear-gradient(135deg,#dc2626,#f87171)',\n prix:'380', devise:'\u20ac', perPers:true,\n tags:['3 nuits','Vol inclus','Visite guid\u00e9e','D\u00eener'],\n color:'#dc2626',\n btnLabel:'R\u00e9server', btnStyle:'background:linear-gradient(135deg,#dc2626,#f87171);color:#fff;',\n id:'offre-istanbul'\n }\n];\n\nconst TESTIMONIALS = [\n [\n {stars:5, text:'\"Agence exceptionnelle ! Nous avons r\u00e9serv\u00e9 notre voyage de noces aux Maldives via SR VOYAGES. Tout \u00e9tait parfait, de la r\u00e9servation jusqu\\'au retour. Je recommande vivement !\"', name:'Sophie M.', dest:'Maldives \u2014 Lune de miel', init:'SM'},\n {stars:5, text:'\"Vol Paris-Dubai \u00e0 un prix imbattable, h\u00f4tel 5\u2605 magnifique. L\\'\u00e9quipe SR VOYAGES a r\u00e9pondu \u00e0 toutes mes questions rapidement. Service irr\u00e9prochable.\"', name:'Karim B.', dest:'Dubai \u2014 Voyage d\\'affaires', init:'KB'},\n {stars:5, text:'\"Circuit au Maroc parfaitement organis\u00e9. Guides comp\u00e9tents, h\u00e9bergements de qualit\u00e9, programme vari\u00e9. Une exp\u00e9rience inoubliable pour toute la famille !\"', name:'Nathalie L.', dest:'Marrakech & Sahara', init:'NL'},\n ],\n [\n {stars:5, text:'\"Voyageurs r\u00e9guliers chez SR VOYAGES depuis 3 ans. Les prix sont toujours les meilleurs et le service client est toujours au top. Merci \u00e0 toute l\\'\u00e9quipe !\"', name:'Alexandre D.', dest:'Bali \u2014 S\u00e9jour d\u00e9tente', init:'AD'},\n {stars:4, text:'\"Premi\u00e8re fois que je r\u00e9servais via une agence en ligne. L\\'exp\u00e9rience SR VOYAGES m\\'a conquis ! Devis rapide, tout clair et transparent. Je reviendrai !\"', name:'Fatima R.', dest:'Istanbul \u2014 Week-end', init:'FR'},\n {stars:5, text:'\"Circuit Asie du Sud-Est de r\u00eave ! 15 jours parfaitement planifi\u00e9s entre Bangkok, Hano\u00ef et Angkor Vat. Guide francophone exceptionnel. Merci SR VOYAGES !\"', name:'Pierre-Luc V.', dest:'Asie du Sud-Est', init:'PV'},\n ]\n];\n\n\/\/ \u2500\u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nwindow.addEventListener('DOMContentLoaded', () => {\n setTimeout(() => {\n const loader = document.getElementById('loader');\n loader.style.opacity = '0';\n setTimeout(() => loader.remove(), 600);\n }, 2200);\n\n renderDestinations(DESTINATIONS);\n renderOffres();\n renderTestimonials();\n initCountdown();\n initScrollSpy();\n initFadeIn();\n initCounterAnimation();\n setMinDates();\n});\n\n\/\/ \u2500\u2500\u2500 DESTINATIONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet currentFilter = 'tous';\n\nfunction renderDestinations(list) {\n const grid = document.getElementById('dest-grid');\n const filtered = currentFilter === 'tous' ? list : list.filter(d => d.continent === currentFilter);\n grid.innerHTML = filtered.map(d => `\n <div class=\"dest-card\" onclick=\"openBooking('${d.name}', '${d.price}')\">\n <div class=\"dest-img\">\n <div class=\"dest-img-bg\" style=\"background:linear-gradient(135deg,${d.colors[0]},${d.colors[1]});display:flex;align-items:center;justify-content:center;\">\n <span style=\"font-size:4rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));\">${d.emoji}<\/span>\n <\/div>\n <div class=\"dest-img-overlay\"><\/div>\n <div class=\"dest-badge\">${d.badge}<\/div>\n <\/div>\n <div class=\"dest-body\">\n <div class=\"dest-country\">${d.country}<\/div>\n <div class=\"dest-name\">${d.name}<\/div>\n <div style=\"font-size:.78rem;color:#94a3b8;margin-bottom:.6rem;\">${d.desc}<\/div>\n <div class=\"dest-info\">\n <div>\n <div class=\"dest-price-label\">\u00c0 partir de<\/div>\n <div class=\"dest-price\">${d.price}\u20ac <span style=\"font-size:.7rem;color:#94a3b8;font-weight:400;\">\/ pers.<\/span><\/div>\n <\/div>\n <div>\n <div class=\"dest-rating\">\n ${'\u2605'.repeat(Math.floor(d.rating))} <span style=\"color:#64748b;font-size:.75rem;\">${d.rating} (${d.reviews})<\/span>\n <\/div>\n <div style=\"font-size:.7rem;color:#94a3b8;text-align:right;margin-top:.2rem;\">avis clients<\/div>\n <\/div>\n <\/div>\n <div style=\"margin-top:.8rem;padding-top:.8rem;border-top:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center;\">\n <span style=\"font-size:.75rem;color:#64748b;\">\u2708\ufe0f Vol inclus possible<\/span>\n <button onclick=\"event.stopPropagation();openBooking('${d.name}','${d.price}')\"\n style=\"background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);border:none;border-radius:6px;padding:.35rem .9rem;font-size:.78rem;font-weight:700;cursor:pointer;\">\n R\u00e9server\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n `).join('');\n}\n\nfunction filterDest(btn, cat) {\n document.querySelectorAll('.dest-filter').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n currentFilter = cat;\n renderDestinations(DESTINATIONS);\n}\n\n\/\/ \u2500\u2500\u2500 OFFRES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction renderOffres() {\n const grid = document.getElementById('offres-grid');\n grid.innerHTML = OFFRES.map(o => `\n <div class=\"offre-card\">\n <div class=\"offre-header\">\n <div class=\"offre-icon\" style=\"background:${o.iconBg};\">${o.icon}<\/div>\n <div>\n <div class=\"offre-title\">${o.title}<\/div>\n <div class=\"offre-sub\">${o.sub}<\/div>\n <\/div>\n <\/div>\n <div class=\"offre-body\">\n <div class=\"offre-price-row\">\n <div class=\"offre-prix-from\">\u00c0 partir de<\/div>\n <div class=\"offre-prix\">${o.prix}<\/div>\n <div class=\"offre-currency\">${o.devise}<\/div>\n ${o.perPers ? '<div style=\"font-size:.75rem;color:#94a3b8;align-self:flex-end;\">\/pers.<\/div>' : '<div style=\"font-size:.75rem;color:#94a3b8;align-self:flex-end;\">\/couple<\/div>'}\n <\/div>\n <div class=\"offre-tags\">\n ${o.tags.map(t => `<span class=\"offre-tag\">${t}<\/span>`).join('')}\n <\/div>\n <button class=\"btn-offre\" style=\"${o.btnStyle}\" onclick=\"openBooking('${o.title}','${o.prix}')\">\n ${o.btnLabel} \u2192\n <\/button>\n <\/div>\n <\/div>\n `).join('');\n}\n\n\/\/ \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet testiIdx = 0;\nfunction renderTestimonials() {\n const track = document.getElementById('testi-track');\n const nav = document.getElementById('testi-nav');\n track.innerHTML = TESTIMONIALS.map((group, gi) => `\n <div class=\"testi-card\">\n <div class=\"testi-inner\">\n ${group.map(t => `\n <div class=\"testi-item\">\n <div class=\"testi-stars\">${'\u2605'.repeat(t.stars)}<\/div>\n <div class=\"testi-text\">${t.text}<\/div>\n <div class=\"testi-author\">\n <div class=\"testi-avatar\">${t.init}<\/div>\n <div>\n <div class=\"testi-name\">${t.name}<\/div>\n <div class=\"testi-dest\">\ud83d\udccd ${t.dest}<\/div>\n <\/div>\n <\/div>\n <\/div>\n `).join('')}\n <\/div>\n <\/div>\n `).join('');\n\n nav.innerHTML = TESTIMONIALS.map((_,i) => `\n <div class=\"testi-dot ${i===0?'active':''}\" onclick=\"goTesti(${i})\"><\/div>\n `).join('');\n}\n\nfunction goTesti(idx) {\n testiIdx = idx;\n document.getElementById('testi-track').style.transform = `translateX(-${idx * 100}%)`;\n document.querySelectorAll('.testi-dot').forEach((d,i) => d.classList.toggle('active', i===idx));\n}\n\nsetInterval(() => goTesti((testiIdx + 1) % TESTIMONIALS.length), 5000);\n\n\/\/ \u2500\u2500\u2500 COUNTDOWN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction initCountdown() {\n \/\/ Set end time to 24h from now\n if (!localStorage.getItem('srv_countdown_end')) {\n localStorage.setItem('srv_countdown_end', Date.now() + 24 * 3600 * 1000);\n }\n const end = parseInt(localStorage.getItem('srv_countdown_end'));\n function tick() {\n const diff = end - Date.now();\n if (diff <= 0) {\n localStorage.removeItem('srv_countdown_end');\n document.getElementById('cnt-h').textContent = '00';\n document.getElementById('cnt-m').textContent = '00';\n document.getElementById('cnt-s').textContent = '00';\n return;\n }\n const h = Math.floor(diff \/ 3600000);\n const m = Math.floor((diff % 3600000) \/ 60000);\n const s = Math.floor((diff % 60000) \/ 1000);\n document.getElementById('cnt-h').textContent = String(h).padStart(2,'0');\n document.getElementById('cnt-m').textContent = String(m).padStart(2,'0');\n document.getElementById('cnt-s').textContent = String(s).padStart(2,'0');\n }\n tick();\n setInterval(tick, 1000);\n}\n\n\/\/ \u2500\u2500\u2500 COUNTER ANIMATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction initCounterAnimation() {\n const counters = document.querySelectorAll('[data-target]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (!entry.isIntersecting) return;\n const el = entry.target;\n const target = +el.dataset.target;\n const suffix = target >= 100 ? (target === 98 ? '%' : '+') : (target === 10 ? ' ans' : '+');\n let cur = 0;\n const step = target \/ 50;\n const timer = setInterval(() => {\n cur = Math.min(cur + step, target);\n el.textContent = Math.floor(cur).toLocaleString('fr') + suffix;\n if (cur >= target) clearInterval(timer);\n }, 30);\n observer.unobserve(el);\n });\n }, { threshold: .5 });\n counters.forEach(c => observer.observe(c));\n}\n\n\/\/ \u2500\u2500\u2500 FADE IN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction initFadeIn() {\n const elems = document.querySelectorAll('.fade-in');\n const obs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }\n });\n }, { threshold: .1 });\n elems.forEach(el => obs.observe(el));\n}\n\n\/\/ \u2500\u2500\u2500 SEARCH TABS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction switchTab(btn, panelId) {\n document.querySelectorAll('.stab').forEach(b => b.classList.remove('active'));\n document.querySelectorAll('.search-panel').forEach(p => p.classList.remove('active'));\n btn.classList.add('active');\n document.getElementById(panelId).classList.add('active');\n}\n\n\/\/ \u2500\u2500\u2500 SEARCH \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction doSearch() {\n openModal('search-modal');\n const results = [\n { airline:'Air France', dep:'08h30', arr:'13h45', duration:'5h15', stops:'Direct', price:'420', logo:'\u2708\ufe0f' },\n { airline:'Turkish Airlines', dep:'10h15', arr:'16h30', duration:'6h15', stops:'Direct', price:'359', logo:'\ud83c\uddf9\ud83c\uddf7' },\n { airline:'Emirates', dep:'14h00', arr:'22h15', duration:'8h15', stops:'1 escale', price:'480', logo:'\ud83c\udde6\ud83c\uddea' },\n { airline:'Transavia', dep:'06h45', arr:'12h10', duration:'5h25', stops:'Direct', price:'289', logo:'\ud83d\udfe2' },\n ];\n setTimeout(() => {\n document.getElementById('search-results-content').innerHTML = `\n <div style=\"margin-bottom:1rem;padding:.6rem 1rem;background:#f0fdf4;border-radius:8px;border-left:3px solid #16a34a;font-size:.85rem;color:#166534;font-weight:600;\">\n \u2705 ${results.length} r\u00e9sultats trouv\u00e9s\n <\/div>\n ${results.map((r,i) => `\n <div style=\"border:1.5px solid #e2e8f0;border-radius:12px;padding:1rem;margin-bottom:.8rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;transition:border .2s;cursor:pointer;\"\n onmouseenter=\"this.style.borderColor='var(--gold)'\" onmouseleave=\"this.style.borderColor='#e2e8f0'\">\n <div style=\"display:flex;align-items:center;gap:.7rem;\">\n <span style=\"font-size:1.5rem;\">${r.logo}<\/span>\n <div>\n <div style=\"font-weight:700;color:var(--navy);font-size:.9rem;\">${r.airline}<\/div>\n <div style=\"font-size:.75rem;color:#94a3b8;\">${r.stops}<\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;\">\n <div style=\"font-weight:700;color:var(--navy);\">${r.dep} \u2192 ${r.arr}<\/div>\n <div style=\"font-size:.75rem;color:#94a3b8;\">${r.duration}<\/div>\n <\/div>\n <div style=\"text-align:right;\">\n <div style=\"font-size:1.3rem;font-weight:900;color:var(--gold);\">${r.price}\u20ac<\/div>\n <button onclick=\"showToast('\u2705 Vol ${r.airline} ajout\u00e9 ! Notre \u00e9quipe vous contacte.');closeModal('search-modal')\"\n style=\"background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);border:none;border-radius:6px;padding:.35rem .8rem;font-size:.78rem;font-weight:700;cursor:pointer;margin-top:.3rem;\">\n S\u00e9lectionner\n <\/button>\n <\/div>\n <\/div>\n `).join('')}\n `;\n }, 1800);\n}\n\n\/\/ \u2500\u2500\u2500 BOOKING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction openBooking(name, price) {\n document.getElementById('booking-title').textContent = `\ud83d\udccb R\u00e9server \u2014 ${name}`;\n document.getElementById('booking-content').innerHTML = `\n <div style=\"background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:12px;padding:1.2rem;margin-bottom:1.2rem;text-align:center;\">\n <div style=\"font-size:.85rem;color:#94a3b8;\">Offre s\u00e9lectionn\u00e9e<\/div>\n <div style=\"font-size:1.2rem;font-weight:800;color:#fff;\">${name}<\/div>\n <div style=\"font-size:1.8rem;font-weight:900;color:var(--gold);\">\u00c0 partir de ${price}\u20ac<\/div>\n <\/div>\n <form onsubmit=\"submitBooking(event,'${name}')\">\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem;\">\n <div>\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">Pr\u00e9nom<\/label>\n <input type=\"text\" placeholder=\"Pr\u00e9nom\" required style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;\" onfocus=\"this.style.borderColor='var(--gold)'\" onblur=\"this.style.borderColor='#e2e8f0'\"\/>\n <\/div>\n <div>\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">Nom<\/label>\n <input type=\"text\" placeholder=\"Nom\" required style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;\" onfocus=\"this.style.borderColor='var(--gold)'\" onblur=\"this.style.borderColor='#e2e8f0'\"\/>\n <\/div>\n <\/div>\n <div style=\"margin-bottom:.8rem;\">\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">Email<\/label>\n <input type=\"email\" placeholder=\"votre@email.com\" required style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;\" onfocus=\"this.style.borderColor='var(--gold)'\" onblur=\"this.style.borderColor='#e2e8f0'\"\/>\n <\/div>\n <div style=\"margin-bottom:.8rem;\">\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">T\u00e9l\u00e9phone<\/label>\n <input type=\"tel\" placeholder=\"+221 7X XXX XX XX\" style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;\" onfocus=\"this.style.borderColor='var(--gold)'\" onblur=\"this.style.borderColor='#e2e8f0'\"\/>\n <\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem;\">\n <div>\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">Date de d\u00e9part<\/label>\n <input type=\"date\" style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;\" onfocus=\"this.style.borderColor='var(--gold)'\" onblur=\"this.style.borderColor='#e2e8f0'\"\/>\n <\/div>\n <div>\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">Nb. personnes<\/label>\n <select style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;background:#fff;\">\n <option>1 personne<\/option><option>2 personnes<\/option>\n <option>3 personnes<\/option><option>4 personnes<\/option><option>Groupe<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button type=\"submit\" style=\"width:100%;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);font-weight:800;font-size:1rem;padding:.85rem;border:none;border-radius:10px;cursor:pointer;margin-top:.3rem;transition:all .3s;\" onmouseover=\"this.style.transform='translateY(-2px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n \u2708\ufe0f Confirmer ma r\u00e9servation\n <\/button>\n <p style=\"text-align:center;font-size:.76rem;color:#94a3b8;margin-top:.7rem;\">\ud83d\udd12 R\u00e9servation s\u00e9curis\u00e9e \u2014 Sans engagement imm\u00e9diat<\/p>\n <\/form>\n `;\n openModal('booking-modal');\n}\n\nfunction submitBooking(e, name) {\n e.preventDefault();\n closeModal('booking-modal');\n showToast(`\ud83c\udf89 Demande de r\u00e9servation pour ${name} re\u00e7ue ! Notre \u00e9quipe vous contacte sous 2h.`);\n}\n\n\/\/ \u2500\u2500\u2500 MODALS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction openModal(id) { document.getElementById(id).classList.add('open'); document.body.style.overflow='hidden'; }\nfunction closeModal(id) { document.getElementById(id).classList.remove('open'); document.body.style.overflow=''; }\n\n\/\/ \u2500\u2500\u2500 CONTACT FORM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction submitContact(e) {\n e.preventDefault();\n e.target.reset();\n showToast('\u2705 Votre demande a bien \u00e9t\u00e9 envoy\u00e9e ! Nous vous r\u00e9pondons dans les 2 heures.');\n}\n\n\/\/ \u2500\u2500\u2500 NEWSLETTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction subscribeNewsletter(e) {\n e.preventDefault();\n document.getElementById('nl-email').value = '';\n showToast('\ud83c\udf89 Inscription r\u00e9ussie ! Bienvenue dans la famille SR VOYAGES.');\n}\n\n\/\/ \u2500\u2500\u2500 TOAST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction showToast(msg) {\n const t = document.getElementById('toast');\n t.textContent = msg;\n t.classList.add('show');\n setTimeout(() => t.classList.remove('show'), 4000);\n}\n\n\/\/ \u2500\u2500\u2500 HAMBURGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst ham = document.getElementById('hamburger');\nconst mob = document.getElementById('mobile-menu');\nham.addEventListener('click', () => {\n ham.classList.toggle('open');\n mob.style.display = mob.style.display === 'block' ? 'none' : 'block';\n});\nfunction closeMobile() {\n ham.classList.remove('open');\n mob.style.display = 'none';\n}\n\n\/\/ \u2500\u2500\u2500 SCROLL SPY + SCROLL TOP \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction initScrollSpy() {\n const st = document.getElementById('scrollTop');\n window.addEventListener('scroll', () => {\n const sy = window.scrollY;\n \/\/ scroll top btn\n st.classList.toggle('visible', sy > 400);\n \/\/ navbar shadow\n document.getElementById('navbar').style.boxShadow = sy > 40 ? '0 4px 20px rgba(0,0,0,.3)' : '';\n \/\/ active nav link\n const sections = ['hero','destinations','services','offres','temoignages','contact'];\n let current = '';\n sections.forEach(id => {\n const s = document.getElementById(id);\n if (s && s.getBoundingClientRect().top < 100) current = id;\n });\n document.querySelectorAll('.nav-links a').forEach(a => {\n a.classList.toggle('active', a.getAttribute('href') === '#' + current);\n });\n });\n}\n\n\/\/ \u2500\u2500\u2500 DATES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction setMinDates() {\n const today = new Date().toISOString().split('T')[0];\n document.querySelectorAll('input[type=date]').forEach(inp => inp.min = today);\n}\n\n\/\/ \u2500\u2500\u2500 KEYBOARD ESC \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\ndocument.addEventListener('keydown', e => {\n if (e.key === 'Escape') {\n closeModal('search-modal');\n closeModal('booking-modal');\n closeMobile();\n }\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>SR VOYAGES | Agence de Voyage N\u00b01 – R\u00e9servations Billets & H\u00f4tels \u2708 SR VOYAGES SR SR VOYAGES Accueil Destinations Services Offres Avis Contact R\u00e9server \ud83c\udfe0 Accueil \ud83c\udf0d Destinations \u2699\ufe0f Services \ud83c\udf81 Offres \u2b50 Avis clients \ud83d\udcde Contact & R\u00e9servation Agence de Voyage N\u00b01 Voyagez avec Confianceet \u00c9l\u00e9gance SR VOYAGES vous offre des exp\u00e9riences de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-100","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Billet-avion - SR VOYAGES<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/srvoyages.com\/?page_id=100\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Billet-avion - SR VOYAGES\" \/>\n<meta property=\"og:description\" content=\"SR VOYAGES | Agence de Voyage N\u00b01 – R\u00e9servations Billets & H\u00f4tels \u2708 SR VOYAGES SR SR VOYAGES Accueil Destinations Services Offres Avis Contact R\u00e9server \ud83c\udfe0 Accueil \ud83c\udf0d Destinations \u2699\ufe0f Services \ud83c\udf81 Offres \u2b50 Avis clients \ud83d\udcde Contact & R\u00e9servation Agence de Voyage N\u00b01 Voyagez avec Confianceet \u00c9l\u00e9gance SR VOYAGES vous offre des exp\u00e9riences de […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/srvoyages.com\/?page_id=100\" \/>\n<meta property=\"og:site_name\" content=\"SR VOYAGES\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-04T21:39:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/srvoyages.com\/?page_id=100\",\"url\":\"https:\/\/srvoyages.com\/?page_id=100\",\"name\":\"Billet-avion - SR VOYAGES\",\"isPartOf\":{\"@id\":\"https:\/\/srvoyages.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/srvoyages.com\/?page_id=100#primaryimage\"},\"image\":{\"@id\":\"https:\/\/srvoyages.com\/?page_id=100#primaryimage\"},\"thumbnailUrl\":\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\",\"datePublished\":\"2026-04-04T21:17:36+00:00\",\"dateModified\":\"2026-04-04T21:39:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/srvoyages.com\/?page_id=100#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/srvoyages.com\/?page_id=100\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/srvoyages.com\/?page_id=100#primaryimage\",\"url\":\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\",\"contentUrl\":\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\",\"width\":1024,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/srvoyages.com\/?page_id=100#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/srvoyages.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Billet-avion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/srvoyages.com\/#website\",\"url\":\"https:\/\/srvoyages.com\/\",\"name\":\"SR VOYAGES\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/srvoyages.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n","yoast_head_json":{"title":"Billet-avion - SR VOYAGES","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/srvoyages.com\/?page_id=100","og_locale":"en_US","og_type":"article","og_title":"Billet-avion - SR VOYAGES","og_description":"SR VOYAGES | Agence de Voyage N\u00b01 – R\u00e9servations Billets & H\u00f4tels \u2708 SR VOYAGES SR SR VOYAGES Accueil Destinations Services Offres Avis Contact R\u00e9server \ud83c\udfe0 Accueil \ud83c\udf0d Destinations \u2699\ufe0f Services \ud83c\udf81 Offres \u2b50 Avis clients \ud83d\udcde Contact & R\u00e9servation Agence de Voyage N\u00b01 Voyagez avec Confianceet \u00c9l\u00e9gance SR VOYAGES vous offre des exp\u00e9riences de […]","og_url":"https:\/\/srvoyages.com\/?page_id=100","og_site_name":"SR VOYAGES","article_modified_time":"2026-04-04T21:39:09+00:00","og_image":[{"url":"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/srvoyages.com\/?page_id=100","url":"https:\/\/srvoyages.com\/?page_id=100","name":"Billet-avion - SR VOYAGES","isPartOf":{"@id":"https:\/\/srvoyages.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/srvoyages.com\/?page_id=100#primaryimage"},"image":{"@id":"https:\/\/srvoyages.com\/?page_id=100#primaryimage"},"thumbnailUrl":"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png","datePublished":"2026-04-04T21:17:36+00:00","dateModified":"2026-04-04T21:39:09+00:00","breadcrumb":{"@id":"https:\/\/srvoyages.com\/?page_id=100#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/srvoyages.com\/?page_id=100"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/srvoyages.com\/?page_id=100#primaryimage","url":"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png","contentUrl":"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png","width":1024,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/srvoyages.com\/?page_id=100#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/srvoyages.com\/"},{"@type":"ListItem","position":2,"name":"Billet-avion"}]},{"@type":"WebSite","@id":"https:\/\/srvoyages.com\/#website","url":"https:\/\/srvoyages.com\/","name":"SR VOYAGES","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/srvoyages.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"brizy_media":[],"_links":{"self":[{"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/pages\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/srvoyages.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=100"}],"version-history":[{"count":3,"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/pages\/100\/revisions"}],"predecessor-version":[{"id":104,"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/pages\/100\/revisions\/104"}],"wp:attachment":[{"href":"https:\/\/srvoyages.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":100,"date":"2026-04-04T21:17:36","date_gmt":"2026-04-04T21:17:36","guid":{"rendered":"https:\/\/srvoyages.com\/?page_id=100"},"modified":"2026-04-04T21:39:09","modified_gmt":"2026-04-04T21:39:09","slug":"100-2","status":"publish","type":"page","link":"https:\/\/srvoyages.com\/?page_id=100","title":{"rendered":"Billet-avion"},"content":{"rendered":"\n\n\n\n \n \n SR VOYAGES | Agence de Voyage N\u00b01 – R\u00e9servations Billets & H\u00f4tels<\/title>\n <meta name=\"description\" content=\"SR VOYAGES - Votre agence de voyage N\u00b01. R\u00e9servez vos billets d'avion, h\u00f4tels, circuits et s\u00e9jours aux meilleurs prix.\" \/>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"\/>\n <style>\n :root {\n --gold: #D4AF37;\n --gold-light: #f0d060;\n --navy: #0a1628;\n --navy2: #112244;\n --sky: #0ea5e9;\n --sky2: #38bdf8;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n html { scroll-behavior: smooth; }\n\n body {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: #f8fafc;\n color: #1e293b;\n overflow-x: hidden;\n }\n\n \/* \u2500\u2500 SCROLLBAR \u2500\u2500 *\/\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: #0a1628; }\n ::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }\n\n \/* \u2500\u2500 NAVBAR \u2500\u2500 *\/\n #navbar {\n position: fixed; top: 0; left: 0; right: 0; z-index: 1000;\n background: rgba(10,22,40,0.97);\n backdrop-filter: blur(12px);\n transition: all .3s ease;\n border-bottom: 1px solid rgba(212,175,55,0.2);\n }\n .nav-inner {\n max-width: 1280px; margin: auto;\n display: flex; align-items: center; justify-content: space-between;\n padding: 0 1.5rem; height: 68px;\n }\n .logo {\n display: flex; align-items: center; gap: .6rem;\n text-decoration: none;\n }\n .logo-img {\n height: 48px; width: auto; object-fit: contain;\n filter: drop-shadow(0 2px 8px rgba(212,175,55,0.35));\n transition: filter .3s;\n }\n .logo-img:hover { filter: drop-shadow(0 4px 16px rgba(212,175,55,0.6)); }\n .logo-text { color: #fff; font-size: 1.35rem; font-weight: 800; letter-spacing: .5px; }\n .logo-text span { color: var(--gold); }\n\n .nav-links { display: flex; align-items: center; gap: .2rem; }\n .nav-links a {\n color: #cbd5e1; text-decoration: none; font-size: .88rem; font-weight: 500;\n padding: .45rem .85rem; border-radius: 6px; transition: all .2s;\n }\n .nav-links a:hover, .nav-links a.active { color: var(--gold); background: rgba(212,175,55,.1); }\n\n .btn-nav {\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n color: var(--navy) !important; font-weight: 700 !important;\n padding: .5rem 1.2rem !important; border-radius: 8px !important;\n }\n .btn-nav:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(212,175,55,.4); }\n\n .hamburger {\n display: none; flex-direction: column; cursor: pointer;\n gap: 5px; padding: .4rem;\n }\n .hamburger span {\n display: block; height: 2px; width: 24px;\n background: var(--gold); border-radius: 2px; transition: .3s;\n }\n .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }\n .hamburger.open span:nth-child(2) { opacity: 0; }\n .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }\n\n #mobile-menu {\n display: none; position: fixed; top: 68px; left: 0; right: 0;\n background: var(--navy); border-bottom: 2px solid var(--gold);\n z-index: 999; padding: 1rem 1.5rem;\n }\n #mobile-menu a {\n display: block; color: #cbd5e1; text-decoration: none;\n font-size: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.07);\n transition: color .2s;\n }\n #mobile-menu a:hover { color: var(--gold); }\n\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\n #hero {\n min-height: 100vh;\n background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 50%, #0c3460 100%);\n position: relative; overflow: hidden;\n display: flex; align-items: center;\n }\n .hero-bg-shape {\n position: absolute; border-radius: 50%; filter: blur(80px); opacity: .15;\n pointer-events: none;\n }\n .hero-inner {\n max-width: 1280px; margin: auto; padding: 6rem 1.5rem 4rem;\n display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;\n }\n .hero-badge {\n display: inline-flex; align-items: center; gap: .5rem;\n background: rgba(212,175,55,.15); border: 1px solid rgba(212,175,55,.4);\n color: var(--gold); font-size: .8rem; font-weight: 600;\n padding: .35rem .9rem; border-radius: 20px; margin-bottom: 1.5rem;\n }\n .hero-title {\n font-size: clamp(2rem,4vw,3.4rem); font-weight: 900;\n color: #fff; line-height: 1.15; margin-bottom: 1.2rem;\n }\n .hero-title span { color: var(--gold); }\n .hero-desc {\n color: #94a3b8; font-size: 1.05rem; line-height: 1.7; margin-bottom: 2rem;\n }\n .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }\n .btn-primary {\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n color: var(--navy); font-weight: 700; font-size: .95rem;\n padding: .85rem 2rem; border-radius: 10px; border: none; cursor: pointer;\n text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;\n transition: all .3s;\n }\n .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(212,175,55,.5); }\n .btn-outline {\n background: transparent;\n border: 2px solid rgba(255,255,255,.3); color: #fff;\n font-weight: 600; font-size: .95rem;\n padding: .85rem 2rem; border-radius: 10px; cursor: pointer;\n text-decoration: none; display: inline-flex; align-items: center; gap: .5rem;\n transition: all .3s;\n }\n .btn-outline:hover { border-color: var(--gold); color: var(--gold); }\n\n \/* stats *\/\n .hero-stats { display: flex; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; }\n .stat { text-align: center; }\n .stat-num { font-size: 1.8rem; font-weight: 900; color: var(--gold); line-height: 1; }\n .stat-label { color: #64748b; font-size: .78rem; margin-top: .2rem; }\n\n \/* hero visual *\/\n .hero-visual {\n position: relative;\n display: flex; align-items: center; justify-content: center;\n }\n .hero-plane-anim {\n position: relative; width: 100%; max-width: 480px;\n }\n .globe-container {\n width: 300px; height: 300px; border-radius: 50%;\n background: radial-gradient(circle at 35% 35%, #1e40af, #0c3460, #0a1628);\n border: 2px solid rgba(212,175,55,.3);\n margin: auto; position: relative;\n box-shadow: 0 0 60px rgba(14,165,233,.25), inset 0 0 40px rgba(0,0,0,.5);\n animation: globeSpin 20s linear infinite;\n overflow: hidden;\n }\n @keyframes globeSpin {\n 0% { box-shadow: 0 0 60px rgba(14,165,233,.25), inset 0 0 40px rgba(0,0,0,.5); }\n 50% { box-shadow: 0 0 100px rgba(212,175,55,.25), inset 0 0 40px rgba(0,0,0,.5); }\n 100% { box-shadow: 0 0 60px rgba(14,165,233,.25), inset 0 0 40px rgba(0,0,0,.5); }\n }\n .globe-lines {\n position: absolute; inset: 0; overflow: hidden; border-radius: 50%; opacity: .25;\n }\n .globe-line {\n position: absolute; left: 0; right: 0;\n height: 1px; background: rgba(255,255,255,.6);\n }\n .globe-line-v {\n position: absolute; top: 0; bottom: 0;\n width: 1px; background: rgba(255,255,255,.6);\n }\n .plane-orbit {\n position: absolute; top: 50%; left: 50%;\n width: 380px; height: 380px;\n margin: -190px 0 0 -190px;\n animation: orbitPlane 6s linear infinite;\n }\n @keyframes orbitPlane {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n .plane-dot {\n position: absolute; top: -12px; left: 50%;\n margin-left: -12px;\n width: 24px; height: 24px;\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: .85rem; color: var(--navy);\n box-shadow: 0 0 16px rgba(212,175,55,.8);\n animation: counterSpin 6s linear infinite;\n }\n @keyframes counterSpin {\n from { transform: rotate(0deg); }\n to { transform: rotate(-360deg); }\n }\n\n .info-cards {\n position: absolute; right: -20px; bottom: -20px;\n display: flex; flex-direction: column; gap: .6rem;\n }\n .info-card {\n background: rgba(255,255,255,.08); backdrop-filter: blur(12px);\n border: 1px solid rgba(255,255,255,.12); border-radius: 12px;\n padding: .7rem 1rem; display: flex; align-items: center; gap: .7rem;\n animation: floatCard 4s ease-in-out infinite;\n }\n .info-card:nth-child(2) { animation-delay: 1s; }\n @keyframes floatCard {\n 0%,100% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n }\n .info-card .ic-icon {\n width: 36px; height: 36px; background: linear-gradient(135deg,var(--gold),var(--gold-light));\n border-radius: 8px; display: flex; align-items: center; justify-content: center;\n color: var(--navy); font-size: .9rem; flex-shrink: 0;\n }\n .info-card .ic-title { color: #fff; font-size: .8rem; font-weight: 600; }\n .info-card .ic-sub { color: #94a3b8; font-size: .72rem; }\n\n \/* \u2500\u2500 SEARCH FORM \u2500\u2500 *\/\n #search-section {\n background: #fff;\n box-shadow: 0 4px 30px rgba(0,0,0,.08);\n }\n .search-wrapper {\n max-width: 1100px; margin: auto;\n }\n .search-tabs {\n display: flex; gap: 0; border-bottom: 2px solid #e2e8f0;\n }\n .stab {\n padding: .9rem 1.5rem; font-size: .88rem; font-weight: 600;\n color: #64748b; cursor: pointer; border-bottom: 2px solid transparent;\n margin-bottom: -2px; transition: all .2s; display: flex; align-items: center; gap: .4rem;\n background: transparent; border-top: none; border-left: none; border-right: none;\n }\n .stab.active { color: var(--navy); border-bottom-color: var(--gold); }\n .stab:hover { color: var(--navy); }\n\n .search-panel { display: none; padding: 1.5rem 0; }\n .search-panel.active { display: block; }\n\n .search-grid {\n display: grid; gap: 1rem;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n }\n .search-field label {\n display: block; font-size: .75rem; font-weight: 700;\n color: #64748b; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem;\n }\n .search-field input, .search-field select {\n width: 100%; padding: .75rem 1rem; border: 1.5px solid #e2e8f0;\n border-radius: 8px; font-size: .9rem; color: #1e293b;\n background: #f8fafc; transition: border .2s;\n outline: none;\n }\n .search-field input:focus, .search-field select:focus {\n border-color: var(--gold); background: #fff;\n }\n\n .btn-search {\n width: 100%; background: linear-gradient(135deg,var(--gold),var(--gold-light));\n color: var(--navy); font-weight: 800; font-size: 1rem;\n padding: .85rem; border: none; border-radius: 10px; cursor: pointer;\n margin-top: 1rem; transition: all .3s; display: flex; align-items: center;\n justify-content: center; gap: .5rem;\n }\n .btn-search:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,.5); }\n\n \/* \u2500\u2500 SECTION COMMONS \u2500\u2500 *\/\n .section { padding: 5rem 1.5rem; }\n .section-inner { max-width: 1280px; margin: auto; }\n .section-header { text-align: center; margin-bottom: 3rem; }\n .section-tag {\n display: inline-block;\n background: rgba(212,175,55,.12); color: var(--gold);\n font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;\n padding: .35rem .9rem; border-radius: 20px; margin-bottom: .8rem;\n }\n .section-title {\n font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900;\n color: var(--navy); line-height: 1.2;\n }\n .section-title span { color: var(--gold); }\n .section-sub { color: #64748b; font-size: 1rem; margin-top: .6rem; max-width: 600px; margin-left: auto; margin-right: auto; }\n\n \/* \u2500\u2500 DESTINATIONS CARDS \u2500\u2500 *\/\n #destinations { background: #f8fafc; }\n .dest-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 1.5rem;\n }\n .dest-card {\n border-radius: 16px; overflow: hidden;\n box-shadow: 0 4px 20px rgba(0,0,0,.08);\n transition: transform .3s, box-shadow .3s;\n cursor: pointer; position: relative;\n background: #fff;\n }\n .dest-card:hover { transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0,0,0,.15); }\n .dest-img {\n height: 200px; position: relative; overflow: hidden;\n }\n .dest-img-bg {\n width: 100%; height: 100%; background-size: cover; background-position: center;\n transition: transform .5s;\n }\n .dest-card:hover .dest-img-bg { transform: scale(1.08); }\n .dest-img-overlay {\n position: absolute; inset: 0;\n background: linear-gradient(to bottom, transparent 40%, rgba(10,22,40,.8));\n }\n .dest-badge {\n position: absolute; top: 12px; right: 12px;\n background: var(--gold); color: var(--navy);\n font-size: .72rem; font-weight: 800;\n padding: .25rem .65rem; border-radius: 6px;\n }\n .dest-body { padding: 1.2rem; }\n .dest-country { font-size: .78rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }\n .dest-name { font-size: 1.15rem; font-weight: 800; color: var(--navy); margin: .2rem 0 .5rem; }\n .dest-info { display: flex; align-items: center; justify-content: space-between; }\n .dest-price { font-size: 1.3rem; font-weight: 900; color: var(--gold); }\n .dest-price-label { font-size: .72rem; color: #94a3b8; }\n .dest-rating { display: flex; align-items: center; gap: .25rem; color: var(--gold); font-size: .85rem; }\n\n \/* \u2500\u2500 SERVICES \u2500\u2500 *\/\n #services { background: var(--navy); }\n .services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 1.5rem;\n }\n .service-card {\n background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);\n border-radius: 16px; padding: 2rem 1.5rem; text-align: center;\n transition: all .3s; cursor: pointer;\n }\n .service-card:hover {\n background: rgba(212,175,55,.1); border-color: rgba(212,175,55,.3);\n transform: translateY(-6px);\n }\n .service-icon {\n width: 64px; height: 64px; margin: 0 auto 1.2rem;\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n border-radius: 16px; display: flex; align-items: center; justify-content: center;\n font-size: 1.5rem; color: var(--navy);\n }\n .service-title { color: #fff; font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; }\n .service-desc { color: #94a3b8; font-size: .85rem; line-height: 1.6; }\n\n \/* \u2500\u2500 OFFRES \u2500\u2500 *\/\n .offres-grid {\n display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.5rem;\n }\n .offre-card {\n background: #fff; border-radius: 16px;\n box-shadow: 0 4px 20px rgba(0,0,0,.06);\n overflow: hidden; transition: transform .3s, box-shadow .3s;\n }\n .offre-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.12); }\n .offre-header {\n padding: 1.5rem; display: flex; align-items: center; gap: 1rem;\n }\n .offre-icon {\n width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;\n display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #fff;\n }\n .offre-title { font-size: 1.05rem; font-weight: 800; color: var(--navy); }\n .offre-sub { font-size: .82rem; color: #64748b; }\n .offre-body { padding: 0 1.5rem 1.5rem; }\n .offre-price-row { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }\n .offre-prix-from { font-size: .8rem; color: #94a3b8; }\n .offre-prix { font-size: 2rem; font-weight: 900; color: var(--gold); }\n .offre-currency { font-size: 1rem; font-weight: 700; color: var(--gold); }\n .offre-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }\n .offre-tag {\n background: #f1f5f9; color: #475569; font-size: .72rem;\n font-weight: 600; padding: .2rem .6rem; border-radius: 6px;\n }\n .btn-offre {\n width: 100%; padding: .7rem; border: none; border-radius: 8px;\n font-weight: 700; font-size: .9rem; cursor: pointer; transition: all .2s;\n }\n\n \/* \u2500\u2500 POURQUOI NOUS \u2500\u2500 *\/\n #why { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); }\n .why-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;\n }\n .why-list { display: flex; flex-direction: column; gap: 1.2rem; }\n .why-item {\n display: flex; gap: 1rem; align-items: flex-start;\n background: #fff; padding: 1.2rem; border-radius: 12px;\n box-shadow: 0 2px 12px rgba(0,0,0,.05); transition: transform .2s;\n }\n .why-item:hover { transform: translateX(6px); }\n .why-num {\n width: 44px; height: 44px; background: linear-gradient(135deg,var(--gold),var(--gold-light));\n border-radius: 10px; display: flex; align-items: center; justify-content: center;\n font-size: 1.1rem; font-weight: 900; color: var(--navy); flex-shrink: 0;\n }\n .why-title { font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem; }\n .why-text { font-size: .85rem; color: #64748b; line-height: 1.5; }\n\n .why-visual {\n background: linear-gradient(135deg, var(--navy), var(--navy2));\n border-radius: 24px; padding: 2.5rem; text-align: center;\n box-shadow: 0 20px 60px rgba(10,22,40,.3);\n }\n .why-big-num {\n font-size: 5rem; font-weight: 900; color: var(--gold);\n line-height: 1; margin-bottom: .3rem;\n }\n .why-big-label { color: #94a3b8; font-size: 1rem; margin-bottom: 2rem; }\n .why-meters { display: flex; flex-direction: column; gap: 1rem; text-align: left; }\n .why-meter-label {\n display: flex; justify-content: space-between;\n font-size: .82rem; color: #94a3b8; margin-bottom: .35rem;\n }\n .why-meter-bar { height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }\n .why-meter-fill { height: 100%; background: linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius: 3px; }\n\n \/* \u2500\u2500 TESTIMONIALS \u2500\u2500 *\/\n #temoignages { background: #fff; }\n .testi-carousel { position: relative; overflow: hidden; }\n .testi-track {\n display: flex; transition: transform .5s ease;\n }\n .testi-card {\n min-width: 100%; padding: 0 .5rem;\n }\n .testi-inner {\n background: #f8fafc; border-radius: 16px; padding: 2rem;\n border: 1px solid #e2e8f0;\n display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 1rem;\n }\n .testi-item {\n background: #fff; border-radius: 12px; padding: 1.5rem;\n box-shadow: 0 2px 12px rgba(0,0,0,.05);\n }\n .testi-stars { color: var(--gold); font-size: .9rem; margin-bottom: .8rem; }\n .testi-text { color: #475569; font-size: .88rem; line-height: 1.6; margin-bottom: 1rem; font-style: italic; }\n .testi-author { display: flex; align-items: center; gap: .7rem; }\n .testi-avatar {\n width: 40px; height: 40px; border-radius: 50%;\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n display: flex; align-items: center; justify-content: center;\n font-weight: 700; font-size: .9rem; color: var(--navy);\n }\n .testi-name { font-size: .88rem; font-weight: 700; color: var(--navy); }\n .testi-dest { font-size: .76rem; color: #94a3b8; }\n\n .testi-nav { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }\n .testi-dot {\n width: 10px; height: 10px; border-radius: 5px;\n background: #cbd5e1; cursor: pointer; transition: all .3s;\n }\n .testi-dot.active { background: var(--gold); width: 28px; }\n\n \/* \u2500\u2500 NEWSLETTER \u2500\u2500 *\/\n #newsletter {\n background: linear-gradient(135deg, var(--navy), var(--navy2));\n padding: 4rem 1.5rem; text-align: center;\n }\n .newsletter-title { font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 900; color: #fff; margin-bottom: .6rem; }\n .newsletter-sub { color: #94a3b8; font-size: .95rem; margin-bottom: 2rem; }\n .newsletter-form {\n max-width: 480px; margin: auto;\n display: flex; gap: .7rem; flex-wrap: wrap;\n }\n .newsletter-input {\n flex: 1; min-width: 200px; padding: .85rem 1.2rem;\n border: 1.5px solid rgba(212,175,55,.4); border-radius: 10px;\n background: rgba(255,255,255,.08); color: #fff; font-size: .95rem;\n outline: none; transition: border .2s;\n }\n .newsletter-input::placeholder { color: #64748b; }\n .newsletter-input:focus { border-color: var(--gold); }\n .btn-nl {\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n color: var(--navy); font-weight: 700; font-size: .95rem;\n padding: .85rem 1.5rem; border: none; border-radius: 10px; cursor: pointer;\n transition: all .3s; white-space: nowrap;\n }\n .btn-nl:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,175,55,.5); }\n\n \/* \u2500\u2500 CONTACT \u2500\u2500 *\/\n #contact { background: #f8fafc; }\n .contact-grid {\n display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start;\n }\n .contact-info { display: flex; flex-direction: column; gap: 1.5rem; }\n .contact-item {\n display: flex; gap: 1rem; align-items: flex-start;\n }\n .contact-icon {\n width: 48px; height: 48px; background: linear-gradient(135deg,var(--gold),var(--gold-light));\n border-radius: 12px; display: flex; align-items: center; justify-content: center;\n font-size: 1.1rem; color: var(--navy); flex-shrink: 0;\n }\n .contact-label { font-size: .8rem; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }\n .contact-val { font-size: .95rem; color: var(--navy); font-weight: 600; margin-top: .15rem; }\n\n .contact-form {\n background: #fff; border-radius: 20px; padding: 2rem;\n box-shadow: 0 8px 30px rgba(0,0,0,.07);\n }\n .form-group { margin-bottom: 1.1rem; }\n .form-group label { display: block; font-size: .8rem; font-weight: 700; color: #475569; margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em; }\n .form-control {\n width: 100%; padding: .8rem 1rem; border: 1.5px solid #e2e8f0;\n border-radius: 8px; font-size: .9rem; color: #1e293b;\n background: #f8fafc; transition: border .2s; outline: none;\n resize: none;\n }\n .form-control:focus { border-color: var(--gold); background: #fff; }\n .form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\n\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\n #footer {\n background: var(--navy); color: #94a3b8;\n padding: 4rem 1.5rem 2rem;\n }\n .footer-inner {\n max-width: 1280px; margin: auto;\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;\n }\n .footer-brand-desc { font-size: .87rem; line-height: 1.7; color: #64748b; margin-top: .8rem; max-width: 240px; }\n .footer-social { display: flex; gap: .7rem; margin-top: 1.2rem; }\n .social-btn {\n width: 38px; height: 38px; border-radius: 8px;\n background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);\n display: flex; align-items: center; justify-content: center;\n color: #94a3b8; text-decoration: none; font-size: .9rem;\n transition: all .2s;\n }\n .social-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }\n .footer-col-title { color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: 1.2rem; }\n .footer-links { display: flex; flex-direction: column; gap: .55rem; }\n .footer-links a { color: #64748b; text-decoration: none; font-size: .85rem; transition: color .2s; }\n .footer-links a:hover { color: var(--gold); }\n .footer-bottom {\n max-width: 1280px; margin: 2.5rem auto 0;\n padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.06);\n display: flex; align-items: center; justify-content: space-between;\n flex-wrap: wrap; gap: 1rem;\n font-size: .8rem; color: #475569;\n }\n .footer-bottom a { color: #475569; text-decoration: none; }\n .footer-bottom a:hover { color: var(--gold); }\n\n \/* \u2500\u2500 MODAL \u2500\u2500 *\/\n .modal-overlay {\n position: fixed; inset: 0; background: rgba(0,0,0,.7);\n backdrop-filter: blur(8px);\n z-index: 2000; display: flex; align-items: center; justify-content: center;\n padding: 1rem; opacity: 0; pointer-events: none; transition: opacity .3s;\n }\n .modal-overlay.open { opacity: 1; pointer-events: all; }\n .modal-box {\n background: #fff; border-radius: 20px;\n max-width: 520px; width: 100%; padding: 2rem;\n transform: scale(.9); transition: transform .3s;\n max-height: 90vh; overflow-y: auto;\n }\n .modal-overlay.open .modal-box { transform: scale(1); }\n .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }\n .modal-title { font-size: 1.3rem; font-weight: 800; color: var(--navy); }\n .modal-close {\n width: 36px; height: 36px; border: none; background: #f1f5f9;\n border-radius: 8px; cursor: pointer; font-size: 1.1rem; color: #64748b;\n transition: all .2s;\n }\n .modal-close:hover { background: #fee2e2; color: #ef4444; }\n\n \/* \u2500\u2500 TOAST \u2500\u2500 *\/\n #toast {\n position: fixed; bottom: 1.5rem; right: 1.5rem;\n background: var(--navy); color: #fff; padding: 1rem 1.5rem;\n border-radius: 12px; border-left: 4px solid var(--gold);\n font-size: .88rem; font-weight: 600; z-index: 3000;\n transform: translateY(100px); opacity: 0; transition: all .4s;\n max-width: 320px;\n }\n #toast.show { transform: translateY(0); opacity: 1; }\n\n \/* \u2500\u2500 LOADER \u2500\u2500 *\/\n #loader {\n position: fixed; inset: 0; z-index: 9999;\n background: var(--navy);\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n transition: opacity .6s;\n }\n .loader-logo {\n font-size: 2.5rem; font-weight: 900; color: var(--gold);\n animation: pulse 1s ease-in-out infinite;\n }\n .loader-bar { width: 200px; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; margin-top: 1.5rem; overflow: hidden; }\n .loader-fill { height: 100%; background: linear-gradient(90deg,var(--gold),var(--gold-light)); border-radius: 2px; animation: loadFill 2s ease forwards; }\n @keyframes loadFill { from { width: 0; } to { width: 100%; } }\n @keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: .8; } }\n\n \/* \u2500\u2500 SCROLL TOP \u2500\u2500 *\/\n #scrollTop {\n position: fixed; bottom: 1.5rem; left: 1.5rem;\n width: 44px; height: 44px;\n background: linear-gradient(135deg,var(--gold),var(--gold-light));\n color: var(--navy); border: none; border-radius: 10px; cursor: pointer;\n font-size: 1rem; opacity: 0; pointer-events: none; transition: all .3s;\n display: flex; align-items: center; justify-content: center;\n box-shadow: 0 4px 16px rgba(212,175,55,.4);\n }\n #scrollTop.visible { opacity: 1; pointer-events: all; }\n #scrollTop:hover { transform: translateY(-3px); }\n\n \/* \u2500\u2500 COUNTER ANIMATION \u2500\u2500 *\/\n .count-el { transition: all .5s; }\n\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\n @media (max-width: 1024px) {\n .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }\n .hero-visual { display: none; }\n .why-grid { grid-template-columns: 1fr; }\n .contact-grid { grid-template-columns: 1fr; }\n .footer-inner { grid-template-columns: 1fr 1fr; }\n }\n @media (max-width: 768px) {\n .nav-links { display: none; }\n .hamburger { display: flex; }\n .hero-inner { padding-top: 5rem; }\n .info-cards { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; }\n .footer-inner { grid-template-columns: 1fr; }\n .form-grid2 { grid-template-columns: 1fr; }\n .search-grid { grid-template-columns: 1fr 1fr; }\n .testi-inner { grid-template-columns: 1fr; }\n }\n @media (max-width: 480px) {\n .search-grid { grid-template-columns: 1fr; }\n .hero-stats { gap: 1rem; }\n .section { padding: 3.5rem 1rem; }\n }\n\n \/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\n .fade-in { opacity: 0; transform: translateY(30px); transition: opacity .6s ease, transform .6s ease; }\n .fade-in.visible { opacity: 1; transform: translateY(0); }\n\n \/* \u2500\u2500 WHATSAPP FLOAT \u2500\u2500 *\/\n #wa-btn {\n position: fixed; bottom: 5rem; right: 1.5rem;\n width: 52px; height: 52px; background: #25d366;\n border-radius: 50%; display: flex; align-items: center; justify-content: center;\n color: #fff; font-size: 1.5rem; text-decoration: none; z-index: 900;\n box-shadow: 0 4px 20px rgba(37,211,102,.4);\n animation: waPulse 2s infinite;\n }\n @keyframes waPulse {\n 0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); }\n 50% { box-shadow: 0 4px 40px rgba(37,211,102,.7); }\n }\n <\/style>\n<\/head>\n<body>\n\n\n<div id=\"loader\">\n <div class=\"loader-logo\">\u2708 SR VOYAGES<\/div>\n <div class=\"loader-bar\"><div class=\"loader-fill\"><\/div><\/div>\n<\/div>\n\n\n<nav id=\"navbar\">\n <div class=\"nav-inner\">\n <a href=\"#\" class=\"logo\">\n <img decoding=\"async\" src=\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\" alt=\"SR VOYAGES\" class=\"logo-img\" onerror=\"this.onerror=null;this.style.display='none';this.parentNode.querySelector('.logo-fallback').style.display='flex';\" \/>\n <span class=\"logo-fallback\" style=\"display:none;align-items:center;gap:.5rem;\">\n <span style=\"width:44px;height:44px;background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;color:var(--navy);flex-shrink:0;\">SR<\/span>\n <span class=\"logo-text\">SR <span>VOYAGES<\/span><\/span>\n <\/span>\n <\/a>\n <div class=\"nav-links\">\n <a href=\"#hero\" class=\"active\">Accueil<\/a>\n <a href=\"#destinations\">Destinations<\/a>\n <a href=\"#services\">Services<\/a>\n <a href=\"#offres\">Offres<\/a>\n <a href=\"#temoignages\">Avis<\/a>\n <a href=\"#contact\">Contact<\/a>\n <a href=\"#contact\" class=\"btn-nav\">R\u00e9server<\/a>\n <\/div>\n <button class=\"hamburger\" id=\"hamburger\" aria-label=\"Menu\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n <\/div>\n<\/nav>\n\n\n<div id=\"mobile-menu\">\n <a href=\"#hero\" onclick=\"closeMobile()\">\ud83c\udfe0 Accueil<\/a>\n <a href=\"#destinations\" onclick=\"closeMobile()\">\ud83c\udf0d Destinations<\/a>\n <a href=\"#services\" onclick=\"closeMobile()\">\u2699\ufe0f Services<\/a>\n <a href=\"#offres\" onclick=\"closeMobile()\">\ud83c\udf81 Offres<\/a>\n <a href=\"#temoignages\" onclick=\"closeMobile()\">\u2b50 Avis clients<\/a>\n <a href=\"#contact\" onclick=\"closeMobile()\">\ud83d\udcde Contact & R\u00e9servation<\/a>\n<\/div>\n\n\n<section id=\"hero\">\n <div style=\"position:absolute;inset:0;overflow:hidden;pointer-events:none;\">\n <div class=\"hero-bg-shape\" style=\"width:600px;height:600px;background:#0ea5e9;top:-150px;right:-100px;\"><\/div>\n <div class=\"hero-bg-shape\" style=\"width:400px;height:400px;background:var(--gold);bottom:-100px;left:-80px;\"><\/div>\n <\/div>\n <div class=\"hero-inner\">\n \n <div>\n <div class=\"hero-badge\">\n <i class=\"fa fa-star\"><\/i> Agence de Voyage N\u00b01\n <\/div>\n <h1 class=\"hero-title\">\n Voyagez avec <span>Confiance<\/span><br>et \u00c9l\u00e9gance\n <\/h1>\n <p class=\"hero-desc\">\n SR VOYAGES vous offre des exp\u00e9riences de voyage inoubliables \u00e0 travers le monde. Billets d’avion, h\u00f4tels de luxe, circuits organis\u00e9s et bien plus \u2014 tout en un seul endroit.\n <\/p>\n <div class=\"hero-btns\">\n <a href=\"#search-section\" class=\"btn-primary\"><i class=\"fa fa-search\"><\/i> Rechercher un vol<\/a>\n <a href=\"#destinations\" class=\"btn-outline\"><i class=\"fa fa-globe\"><\/i> Nos destinations<\/a>\n <\/div>\n <div class=\"hero-stats\">\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"15000\">0<\/div><div class=\"stat-label\">Clients satisfaits<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"120\">0<\/div><div class=\"stat-label\">Destinations<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"10\">0<\/div><div class=\"stat-label\">Ans d’exp\u00e9rience<\/div><\/div>\n <div class=\"stat\"><div class=\"stat-num\" data-target=\"98\">0<\/div><div class=\"stat-label\">% Satisfaction<\/div><\/div>\n <\/div>\n <\/div>\n \n <div class=\"hero-visual\">\n <div class=\"hero-plane-anim\">\n <div style=\"position:relative;width:300px;height:300px;margin:auto;\">\n <div class=\"globe-container\">\n <div class=\"globe-lines\">\n <div class=\"globe-line\" style=\"top:20%\"><\/div>\n <div class=\"globe-line\" style=\"top:40%\"><\/div>\n <div class=\"globe-line\" style=\"top:60%\"><\/div>\n <div class=\"globe-line\" style=\"top:80%\"><\/div>\n <div class=\"globe-line-v\" style=\"left:20%\"><\/div>\n <div class=\"globe-line-v\" style=\"left:40%\"><\/div>\n <div class=\"globe-line-v\" style=\"left:60%\"><\/div>\n <div class=\"globe-line-v\" style=\"left:80%\"><\/div>\n <\/div>\n <div style=\"position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3rem;opacity:.3;\">\ud83c\udf0d<\/div>\n <\/div>\n <div class=\"plane-orbit\">\n <div class=\"plane-dot\">\u2708<\/div>\n <\/div>\n <\/div>\n <div class=\"info-cards\">\n <div class=\"info-card\">\n <div class=\"ic-icon\"><i class=\"fa fa-ticket-alt\"><\/i><\/div>\n <div>\n <div class=\"ic-title\">Billet disponible<\/div>\n <div class=\"ic-sub\">Paris \u2192 Dubai d\u00e8s 420\u20ac<\/div>\n <\/div>\n <\/div>\n <div class=\"info-card\">\n <div class=\"ic-icon\"><i class=\"fa fa-hotel\"><\/i><\/div>\n <div>\n <div class=\"ic-title\">H\u00f4tel confirm\u00e9<\/div>\n <div class=\"ic-sub\">5\u2605 Marrakech, 89\u20ac\/nuit<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"search-section\" style=\"padding: 0 1.5rem;\">\n <div style=\"max-width:1100px;margin:auto;background:#fff;border-radius:20px;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.12);margin-top:-50px;position:relative;z-index:10;\">\n <div class=\"search-wrapper\">\n <div class=\"search-tabs\">\n <button class=\"stab active\" onclick=\"switchTab(this,'tab-vol')\"><i class=\"fa fa-plane\"><\/i> Vol<\/button>\n <button class=\"stab\" onclick=\"switchTab(this,'tab-hotel')\"><i class=\"fa fa-hotel\"><\/i> H\u00f4tel<\/button>\n <button class=\"stab\" onclick=\"switchTab(this,'tab-vh')\"><i class=\"fa fa-suitcase\"><\/i> Vol + H\u00f4tel<\/button>\n <button class=\"stab\" onclick=\"switchTab(this,'tab-circuit')\"><i class=\"fa fa-route\"><\/i> Circuit<\/button>\n <\/div>\n\n \n <div class=\"search-panel active\" id=\"tab-vol\">\n <div style=\"display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;\">\n <label style=\"display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#475569;cursor:pointer;\">\n <input type=\"radio\" name=\"vol-type\" value=\"aller-retour\" checked \/> Aller-retour\n <\/label>\n <label style=\"display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#475569;cursor:pointer;\">\n <input type=\"radio\" name=\"vol-type\" value=\"aller-simple\" \/> Aller simple\n <\/label>\n <label style=\"display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#475569;cursor:pointer;\">\n <input type=\"radio\" name=\"vol-type\" value=\"multi-dest\" \/> Multi-destinations\n <\/label>\n <\/div>\n <div class=\"search-grid\">\n <div class=\"search-field\">\n <label><i class=\"fa fa-plane-departure\"><\/i> D\u00e9part<\/label>\n <input type=\"text\" placeholder=\"Ville ou a\u00e9roport\" id=\"v-depart\" list=\"airports\" \/>\n <datalist id=\"airports\">\n <option value=\"Paris (CDG)\"><\/option>\n <option value=\"Lyon (LYS)\"><\/option>\n <option value=\"Marseille (MRS)\"><\/option>\n <option value=\"Nice (NCE)\"><\/option>\n <option value=\"Bordeaux (BOD)\"><\/option>\n <option value=\"Bruxelles (BRU)\"><\/option>\n <option value=\"Gen\u00e8ve (GVA)\"><\/option>\n <\/datalist>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-plane-arrival\"><\/i> Destination<\/label>\n <input type=\"text\" placeholder=\"Ville ou a\u00e9roport\" id=\"v-dest\" list=\"airports2\"\/>\n <datalist id=\"airports2\">\n <option value=\"Dubai (DXB)\"><\/option>\n <option value=\"Marrakech (RAK)\"><\/option>\n <option value=\"Istanbul (IST)\"><\/option>\n <option value=\"Tunis (TUN)\"><\/option>\n <option value=\"New York (JFK)\"><\/option>\n <option value=\"Bangkok (BKK)\"><\/option>\n <option value=\"Bali (DPS)\"><\/option>\n <option value=\"Dakar (DSS)\"><\/option>\n <\/datalist>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar\"><\/i> D\u00e9part<\/label>\n <input type=\"date\" id=\"v-date-dep\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar-check\"><\/i> Retour<\/label>\n <input type=\"date\" id=\"v-date-ret\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-users\"><\/i> Passagers<\/label>\n <select>\n <option>1 adulte<\/option>\n <option>2 adultes<\/option>\n <option>2 adultes, 1 enfant<\/option>\n <option>2 adultes, 2 enfants<\/option>\n <option>Groupe (+10)<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-star\"><\/i> Classe<\/label>\n <select>\n <option>\u00c9conomique<\/option>\n <option>Premium \u00e9conomique<\/option>\n <option>Business<\/option>\n <option>Premi\u00e8re classe<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button class=\"btn-search\" onclick=\"doSearch()\"><i class=\"fa fa-search\"><\/i> Rechercher des vols<\/button>\n <\/div>\n\n \n <div class=\"search-panel\" id=\"tab-hotel\">\n <div class=\"search-grid\">\n <div class=\"search-field\" style=\"grid-column: span 2;\">\n <label><i class=\"fa fa-map-marker-alt\"><\/i> Destination<\/label>\n <input type=\"text\" placeholder=\"Ville, r\u00e9gion ou h\u00f4tel\u2026\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar\"><\/i> Arriv\u00e9e<\/label>\n <input type=\"date\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar-check\"><\/i> D\u00e9part<\/label>\n <input type=\"date\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-moon\"><\/i> Nuits<\/label>\n <select>\n <option>1 nuit<\/option><option>2 nuits<\/option><option>3 nuits<\/option>\n <option>5 nuits<\/option><option>7 nuits<\/option><option>10 nuits<\/option><option>14 nuits<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-users\"><\/i> Occupants<\/label>\n <select>\n <option>1 chambre, 1 adulte<\/option>\n <option>1 chambre, 2 adultes<\/option>\n <option>2 chambres, 2 adultes<\/option>\n <option>1 chambre, 2 adultes, 1 enfant<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-star\"><\/i> \u00c9toiles min.<\/label>\n <select>\n <option>Tous<\/option><option>2\u2605 et +<\/option>\n <option>3\u2605 et +<\/option><option>4\u2605 et +<\/option><option>5\u2605<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button class=\"btn-search\" onclick=\"doSearch()\"><i class=\"fa fa-search\"><\/i> Rechercher des h\u00f4tels<\/button>\n <\/div>\n\n \n <div class=\"search-panel\" id=\"tab-vh\">\n <div class=\"search-grid\">\n <div class=\"search-field\">\n <label><i class=\"fa fa-plane-departure\"><\/i> D\u00e9part<\/label>\n <input type=\"text\" placeholder=\"Ville ou a\u00e9roport\" list=\"airports\"\/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-plane-arrival\"><\/i> Destination<\/label>\n <input type=\"text\" placeholder=\"Destination\" list=\"airports2\"\/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar\"><\/i> D\u00e9part<\/label>\n <input type=\"date\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar-check\"><\/i> Retour<\/label>\n <input type=\"date\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-users\"><\/i> Voyageurs<\/label>\n <select>\n <option>2 adultes<\/option><option>1 adulte<\/option>\n <option>2 adultes, 1 enfant<\/option><option>Famille<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-moon\"><\/i> Dur\u00e9e<\/label>\n <select>\n <option>7 nuits<\/option><option>3 nuits<\/option><option>5 nuits<\/option>\n <option>10 nuits<\/option><option>14 nuits<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button class=\"btn-search\" onclick=\"doSearch()\"><i class=\"fa fa-search\"><\/i> Rechercher Vol + H\u00f4tel<\/button>\n <\/div>\n\n \n <div class=\"search-panel\" id=\"tab-circuit\">\n <div class=\"search-grid\">\n <div class=\"search-field\" style=\"grid-column:span 2;\">\n <label><i class=\"fa fa-globe\"><\/i> Destination \/ Th\u00e8me<\/label>\n <select>\n <option>Toutes destinations<\/option>\n <option>Asie du Sud-Est<\/option><option>Maghreb<\/option>\n <option>Europe<\/option><option>Afrique<\/option>\n <option>Moyen-Orient<\/option><option>Am\u00e9rique<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-calendar\"><\/i> Mois de d\u00e9part<\/label>\n <input type=\"month\" \/>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-clock\"><\/i> Dur\u00e9e<\/label>\n <select>\n <option>Toutes dur\u00e9es<\/option>\n <option>5 \u00e0 7 jours<\/option><option>8 \u00e0 12 jours<\/option>\n <option>13 \u00e0 21 jours<\/option><option>+21 jours<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-users\"><\/i> Voyageurs<\/label>\n <select>\n <option>Solo<\/option><option>Couple<\/option>\n <option>Famille<\/option><option>Groupe<\/option>\n <\/select>\n <\/div>\n <div class=\"search-field\">\n <label><i class=\"fa fa-tag\"><\/i> Budget max.<\/label>\n <select>\n <option>Tous budgets<\/option>\n <option>Jusqu’\u00e0 1 000\u20ac<\/option><option>Jusqu’\u00e0 2 000\u20ac<\/option>\n <option>Jusqu’\u00e0 3 500\u20ac<\/option><option>+3 500\u20ac<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button class=\"btn-search\" onclick=\"doSearch()\"><i class=\"fa fa-search\"><\/i> Trouver un circuit<\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"destinations\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"section-header fade-in\">\n <div class=\"section-tag\">\ud83c\udf0d Top Destinations<\/div>\n <h2 class=\"section-title\">D\u00e9couvrez nos <span>Destinations<\/span> Phares<\/h2>\n <p class=\"section-sub\">Des escapades ensoleill\u00e9es aux aventures exotiques, choisissez la destination de vos r\u00eaves<\/p>\n <\/div>\n\n \n <div style=\"display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:2rem;\" class=\"fade-in\">\n <button class=\"dest-filter active\" onclick=\"filterDest(this,'tous')\">Tous<\/button>\n <button class=\"dest-filter\" onclick=\"filterDest(this,'afrique')\">Afrique<\/button>\n <button class=\"dest-filter\" onclick=\"filterDest(this,'europe')\">Europe<\/button>\n <button class=\"dest-filter\" onclick=\"filterDest(this,'asie')\">Asie<\/button>\n <button class=\"dest-filter\" onclick=\"filterDest(this,'moyen-orient')\">Moyen-Orient<\/button>\n <button class=\"dest-filter\" onclick=\"filterDest(this,'amerique')\">Am\u00e9rique<\/button>\n <\/div>\n\n <style>\n .dest-filter {\n padding: .45rem 1.1rem; border-radius: 20px; border: 1.5px solid #e2e8f0;\n background: #fff; color: #64748b; font-size: .83rem; font-weight: 600;\n cursor: pointer; transition: all .2s;\n }\n .dest-filter.active, .dest-filter:hover {\n background: var(--gold); border-color: var(--gold); color: var(--navy);\n }\n <\/style>\n\n <div class=\"dest-grid fade-in\" id=\"dest-grid\"><\/div>\n\n <div style=\"text-align:center;margin-top:2.5rem;\" class=\"fade-in\">\n <a href=\"#contact\" class=\"btn-primary\" style=\"display:inline-flex;\">\n <i class=\"fa fa-globe\"><\/i> Voir toutes nos destinations\n <\/a>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"services\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"section-header fade-in\">\n <div class=\"section-tag\" style=\"background:rgba(212,175,55,.2);color:var(--gold);\">\u2699\ufe0f Nos Services<\/div>\n <h2 class=\"section-title\" style=\"color:#fff;\">Tout ce dont vous avez <span>besoin<\/span><\/h2>\n <p class=\"section-sub\">Des services complets pour planifier chaque aspect de votre voyage<\/p>\n <\/div>\n <div class=\"services-grid fade-in\">\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-plane\"><\/i><\/div>\n <div class=\"service-title\">Billets d’avion<\/div>\n <div class=\"service-desc\">R\u00e9servez vos vols aux meilleurs tarifs \u2014 toutes compagnies, toutes destinations, classes \u00e9conomique \u00e0 premi\u00e8re classe.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-hotel\"><\/i><\/div>\n <div class=\"service-title\">H\u00f4tels & Resorts<\/div>\n <div class=\"service-desc\">Plus de 500 000 h\u00f4tels partenaires \u00e0 travers le monde, du budget \u00e9conomique au palace 5 \u00e9toiles.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-route\"><\/i><\/div>\n <div class=\"service-title\">Circuits organis\u00e9s<\/div>\n <div class=\"service-desc\">Circuits guid\u00e9s avec h\u00e9bergement, transport et guide local inclus. Partez l’esprit libre !<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-ship\"><\/i><\/div>\n <div class=\"service-title\">Croisi\u00e8res<\/div>\n <div class=\"service-desc\">Explorez la M\u00e9diterran\u00e9e, les Cara\u00efbes ou les fjords nordiques \u00e0 bord de paquebots de luxe.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-car\"><\/i><\/div>\n <div class=\"service-title\">Location de voitures<\/div>\n <div class=\"service-desc\">V\u00e9hicules disponibles dans +150 pays. R\u00e9servation flexible, assurance incluse.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-id-card\"><\/i><\/div>\n <div class=\"service-title\">Visas & Formalit\u00e9s<\/div>\n <div class=\"service-desc\">Assistance compl\u00e8te pour l’obtention de visas, assurances voyage et documents officiels.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-shield-alt\"><\/i><\/div>\n <div class=\"service-title\">Assurance voyage<\/div>\n <div class=\"service-desc\">Couverture m\u00e9dicale, annulation, bagages perdus et rapatriement \u2014 voyagez sereinement.<\/div>\n <\/div>\n <div class=\"service-card\">\n <div class=\"service-icon\"><i class=\"fa fa-users\"><\/i><\/div>\n <div class=\"service-title\">Voyages de groupe<\/div>\n <div class=\"service-desc\">Organisation compl\u00e8te pour groupes scolaires, s\u00e9minaires d’entreprise et voyages de noces.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"offres\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"section-header fade-in\">\n <div class=\"section-tag\">\ud83d\udd25 Offres Sp\u00e9ciales<\/div>\n <h2 class=\"section-title\">Nos <span>Meilleures<\/span> Promotions<\/h2>\n <p class=\"section-sub\">Des offres exclusives \u00e0 dur\u00e9e limit\u00e9e \u2014 profitez-en avant qu’elles disparaissent !<\/p>\n <\/div>\n\n \n <div style=\"background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:16px;padding:1.5rem 2rem;text-align:center;margin-bottom:2.5rem;display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;\" class=\"fade-in\">\n <div style=\"color:#fff;font-weight:700;font-size:1rem;\">\u23f0 Offres flash \u2014 expire dans :<\/div>\n <div style=\"display:flex;gap:1rem;\">\n <div style=\"text-align:center;\">\n <div style=\"background:rgba(212,175,55,.2);border:1px solid rgba(212,175,55,.4);border-radius:8px;padding:.5rem .9rem;font-size:1.5rem;font-weight:900;color:var(--gold);min-width:60px;\" id=\"cnt-h\">00<\/div>\n <div style=\"color:#64748b;font-size:.7rem;margin-top:.2rem;\">HEURES<\/div>\n <\/div>\n <div style=\"text-align:center;\">\n <div style=\"background:rgba(212,175,55,.2);border:1px solid rgba(212,175,55,.4);border-radius:8px;padding:.5rem .9rem;font-size:1.5rem;font-weight:900;color:var(--gold);min-width:60px;\" id=\"cnt-m\">00<\/div>\n <div style=\"color:#64748b;font-size:.7rem;margin-top:.2rem;\">MINUTES<\/div>\n <\/div>\n <div style=\"text-align:center;\">\n <div style=\"background:rgba(212,175,55,.2);border:1px solid rgba(212,175,55,.4);border-radius:8px;padding:.5rem .9rem;font-size:1.5rem;font-weight:900;color:var(--gold);min-width:60px;\" id=\"cnt-s\">00<\/div>\n <div style=\"color:#64748b;font-size:.7rem;margin-top:.2rem;\">SECONDES<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"offres-grid fade-in\" id=\"offres-grid\"><\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"why\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"why-grid\">\n <div class=\"fade-in\">\n <div class=\"section-tag\">\ud83d\udc8e Pourquoi SR VOYAGES<\/div>\n <h2 class=\"section-title\" style=\"margin-bottom:2rem;\">L’excellence \u00e0 votre <span>service<\/span><\/h2>\n <div class=\"why-list\">\n <div class=\"why-item\">\n <div class=\"why-num\">01<\/div>\n <div>\n <div class=\"why-title\">Meilleur prix garanti<\/div>\n <div class=\"why-text\">Nous vous remboursons la diff\u00e9rence si vous trouvez moins cher ailleurs. Notre promesse, votre s\u00e9r\u00e9nit\u00e9.<\/div>\n <\/div>\n <\/div>\n <div class=\"why-item\">\n <div class=\"why-num\">02<\/div>\n <div>\n <div class=\"why-title\">Experts certifi\u00e9s<\/div>\n <div class=\"why-text\">Notre \u00e9quipe de 30+ conseillers sp\u00e9cialis\u00e9s vous accompagne 7j\/7 pour planifier votre voyage parfait.<\/div>\n <\/div>\n <\/div>\n <div class=\"why-item\">\n <div class=\"why-num\">03<\/div>\n <div>\n <div class=\"why-title\">Assistance 24h\/24<\/div>\n <div class=\"why-text\">Un incident en voyage ? Notre service d’assistance est disponible 24h\/24 et 7j\/7 depuis n’importe quel pays.<\/div>\n <\/div>\n <\/div>\n <div class=\"why-item\">\n <div class=\"why-num\">04<\/div>\n <div>\n <div class=\"why-title\">Paiement s\u00e9curis\u00e9<\/div>\n <div class=\"why-text\">Paiement s\u00e9curis\u00e9 SSL, facilit\u00e9s en plusieurs fois sans frais, et remboursement garanti en cas d’annulation.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"fade-in\">\n <div class=\"why-visual\">\n <div class=\"why-big-num\" id=\"sat-counter\">98%<\/div>\n <div class=\"why-big-label\">Taux de satisfaction client<\/div>\n <div class=\"why-meters\">\n <div>\n <div class=\"why-meter-label\"><span>\ud83d\udeeb Vols ponctuels<\/span><span>96%<\/span><\/div>\n <div class=\"why-meter-bar\"><div class=\"why-meter-fill\" style=\"width:96%\"><\/div><\/div>\n <\/div>\n <div>\n <div class=\"why-meter-label\"><span>\ud83c\udfe8 Qualit\u00e9 h\u00e9bergements<\/span><span>97%<\/span><\/div>\n <div class=\"why-meter-bar\"><div class=\"why-meter-fill\" style=\"width:97%\"><\/div><\/div>\n <\/div>\n <div>\n <div class=\"why-meter-label\"><span>\ud83d\udcde Service client<\/span><span>99%<\/span><\/div>\n <div class=\"why-meter-bar\"><div class=\"why-meter-fill\" style=\"width:99%\"><\/div><\/div>\n <\/div>\n <div>\n <div class=\"why-meter-label\"><span>\ud83d\udcb0 Rapport qualit\u00e9\/prix<\/span><span>95%<\/span><\/div>\n <div class=\"why-meter-bar\"><div class=\"why-meter-fill\" style=\"width:95%\"><\/div><\/div>\n <\/div>\n <div>\n <div class=\"why-meter-label\"><span>\ud83d\udd01 Clients fid\u00e8les<\/span><span>87%<\/span><\/div>\n <div class=\"why-meter-bar\"><div class=\"why-meter-fill\" style=\"width:87%\"><\/div><\/div>\n <\/div>\n <\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem;\">\n <div style=\"background:rgba(255,255,255,.05);border-radius:10px;padding:1rem;text-align:center;\">\n <div style=\"font-size:1.4rem;font-weight:900;color:var(--gold);\">15K+<\/div>\n <div style=\"font-size:.75rem;color:#64748b;\">Voyageurs<\/div>\n <\/div>\n <div style=\"background:rgba(255,255,255,.05);border-radius:10px;padding:1rem;text-align:center;\">\n <div style=\"font-size:1.4rem;font-weight:900;color:var(--gold);\">120+<\/div>\n <div style=\"font-size:.75rem;color:#64748b;\">Destinations<\/div>\n <\/div>\n <div style=\"background:rgba(255,255,255,.05);border-radius:10px;padding:1rem;text-align:center;\">\n <div style=\"font-size:1.4rem;font-weight:900;color:var(--gold);\">10 ans<\/div>\n <div style=\"font-size:.75rem;color:#64748b;\">Exp\u00e9rience<\/div>\n <\/div>\n <div style=\"background:rgba(255,255,255,.05);border-radius:10px;padding:1rem;text-align:center;\">\n <div style=\"font-size:1.4rem;font-weight:900;color:var(--gold);\">30+<\/div>\n <div style=\"font-size:.75rem;color:#64748b;\">Experts<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"temoignages\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"section-header fade-in\">\n <div class=\"section-tag\">\u2b50 Avis Clients<\/div>\n <h2 class=\"section-title\">Ce que disent nos <span>voyageurs<\/span><\/h2>\n <p class=\"section-sub\">Des milliers de clients satisfaits partagent leur exp\u00e9rience avec SR VOYAGES<\/p>\n <\/div>\n <div class=\"testi-carousel fade-in\">\n <div class=\"testi-track\" id=\"testi-track\"><\/div>\n <div class=\"testi-nav\" id=\"testi-nav\"><\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<section id=\"newsletter\">\n <div style=\"max-width:700px;margin:auto;\">\n <div style=\"font-size:2.5rem;margin-bottom:1rem;\">\u2708\ufe0f<\/div>\n <h2 class=\"newsletter-title\">Recevez nos meilleures <span style=\"color:var(--gold)\">offres<\/span> en avant-premi\u00e8re<\/h2>\n <p class=\"newsletter-sub\">Inscrivez-vous \u00e0 notre newsletter et soyez le premier \u00e0 profiter de nos promotions exclusives et bons plans voyage.<\/p>\n <form class=\"newsletter-form\" onsubmit=\"subscribeNewsletter(event)\">\n <input class=\"newsletter-input\" type=\"email\" placeholder=\"Votre adresse e-mail\u2026\" required id=\"nl-email\"\/>\n <button type=\"submit\" class=\"btn-nl\"><i class=\"fa fa-paper-plane\"><\/i> S’inscrire<\/button>\n <\/form>\n <p style=\"color:#475569;font-size:.78rem;margin-top:.8rem;\">\ud83d\udd12 Vos donn\u00e9es sont 100% s\u00e9curis\u00e9es. D\u00e9sabonnement en 1 clic.<\/p>\n <\/div>\n<\/section>\n\n\n<section id=\"contact\" class=\"section\">\n <div class=\"section-inner\">\n <div class=\"section-header fade-in\">\n <div class=\"section-tag\">\ud83d\udcde Contact & R\u00e9servation<\/div>\n <h2 class=\"section-title\">Parlons de votre <span>prochain voyage<\/span><\/h2>\n <p class=\"section-sub\">Notre \u00e9quipe est disponible 6j\/7 pour vous conseiller et r\u00e9aliser votre devis personnalis\u00e9.<\/p>\n <\/div>\n <div class=\"contact-grid fade-in\">\n \n <div class=\"contact-info\">\n <div style=\"background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:20px;padding:2rem;color:#fff;margin-bottom:1rem;\">\n <h3 style=\"font-size:1.2rem;font-weight:800;margin-bottom:.5rem;\">Horaires d’ouverture<\/h3>\n <p style=\"color:#94a3b8;font-size:.87rem;line-height:1.6;\">\n Lundi \u2013 Vendredi : <strong style=\"color:var(--gold)\">08h00 \u2013 19h00<\/strong><br>\n Samedi : <strong style=\"color:var(--gold)\">09h00 \u2013 17h00<\/strong><br>\n Dimanche : <strong style=\"color:#ef4444;\">Ferm\u00e9<\/strong>\n <\/p>\n <div style=\"margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08);\">\n <div style=\"font-size:.8rem;color:#94a3b8;\">Assistance voyage 24h\/24 :<\/div>\n <div style=\"font-size:1.1rem;font-weight:800;color:var(--gold);\">+33 1 23 45 67 89<\/div>\n <\/div>\n <\/div>\n <div class=\"contact-item\">\n <div class=\"contact-icon\"><i class=\"fa fa-map-marker-alt\"><\/i><\/div>\n <div>\n <div class=\"contact-label\">Adresse<\/div>\n <div class=\"contact-val\">Av El Hadji Malick Sy, Quartier Randoul\u00e8ne Nord, Thi\u00e8s \u2014 S\u00e9n\u00e9gal<\/div>\n <\/div>\n <\/div>\n <div class=\"contact-item\">\n <div class=\"contact-icon\"><i class=\"fa fa-phone\"><\/i><\/div>\n <div>\n <div class=\"contact-label\">T\u00e9l\u00e9phone<\/div>\n <div class=\"contact-val\">\n <a href=\"tel:+221771437125\" style=\"color:var(--navy);text-decoration:none;display:block;\">+221 77 143 71 25<\/a>\n <a href=\"tel:+221770482193\" style=\"color:var(--navy);text-decoration:none;display:block;\">+221 77 048 21 93<\/a>\n <a href=\"tel:+221339532552\" style=\"color:var(--navy);text-decoration:none;display:block;\">+221 33 953 25 52<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"contact-item\">\n <div class=\"contact-icon\"><i class=\"fa fa-envelope\"><\/i><\/div>\n <div>\n <div class=\"contact-label\">Email<\/div>\n <div class=\"contact-val\"><a href=\"mailto:contact@srvoyages.com\" style=\"color:var(--navy);text-decoration:none;\">contact@srvoyages.com<\/a><\/div>\n <\/div>\n <\/div>\n <div class=\"contact-item\">\n <div class=\"contact-icon\"><i class=\"fab fa-whatsapp\"><\/i><\/div>\n <div>\n <div class=\"contact-label\">WhatsApp<\/div>\n <div class=\"contact-val\">\n <a href=\"https:\/\/wa.me\/221771437125\" target=\"_blank\" style=\"color:var(--navy);text-decoration:none;display:block;\">+221 77 143 71 25<\/a>\n <a href=\"https:\/\/wa.me\/221770482193\" target=\"_blank\" style=\"color:var(--navy);text-decoration:none;display:block;\">+221 77 048 21 93<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"contact-form\">\n <h3 style=\"font-size:1.3rem;font-weight:800;color:var(--navy);margin-bottom:1.5rem;\">\n <i class=\"fa fa-edit\" style=\"color:var(--gold);\"><\/i> Demande de devis \/ R\u00e9servation\n <\/h3>\n <form onsubmit=\"submitContact(event)\">\n <div class=\"form-grid2\">\n <div class=\"form-group\">\n <label>Pr\u00e9nom<\/label>\n <input class=\"form-control\" type=\"text\" placeholder=\"Jean\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>Nom<\/label>\n <input class=\"form-control\" type=\"text\" placeholder=\"Dupont\" required \/>\n <\/div>\n <\/div>\n <div class=\"form-grid2\">\n <div class=\"form-group\">\n <label>Email<\/label>\n <input class=\"form-control\" type=\"email\" placeholder=\"jean@email.com\" required \/>\n <\/div>\n <div class=\"form-group\">\n <label>T\u00e9l\u00e9phone<\/label>\n <input class=\"form-control\" type=\"tel\" placeholder=\"+221 7X XXX XX XX\" \/>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Type de voyage<\/label>\n <select class=\"form-control\">\n <option>Vol seul<\/option>\n <option>H\u00f4tel seul<\/option>\n <option>Vol + H\u00f4tel<\/option>\n <option>Circuit organis\u00e9<\/option>\n <option>Croisi\u00e8re<\/option>\n <option>Voyage sur-mesure<\/option>\n <\/select>\n <\/div>\n <div class=\"form-grid2\">\n <div class=\"form-group\">\n <label>Destination souhait\u00e9e<\/label>\n <input class=\"form-control\" type=\"text\" placeholder=\"Ex: Marrakech, Dubai\u2026\" \/>\n <\/div>\n <div class=\"form-group\">\n <label>Date de d\u00e9part<\/label>\n <input class=\"form-control\" type=\"date\" \/>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label>Budget approximatif<\/label>\n <select class=\"form-control\">\n <option>Moins de 500\u20ac<\/option>\n <option>500\u20ac \u2013 1 000\u20ac<\/option>\n <option>1 000\u20ac \u2013 2 000\u20ac<\/option>\n <option>2 000\u20ac \u2013 5 000\u20ac<\/option>\n <option>Plus de 5 000\u20ac<\/option>\n <\/select>\n <\/div>\n <div class=\"form-group\">\n <label>Votre message<\/label>\n <textarea class=\"form-control\" rows=\"4\" placeholder=\"D\u00e9crivez votre projet de voyage, vos pr\u00e9f\u00e9rences, questions\u2026\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn-search\" style=\"margin-top:0;\">\n <i class=\"fa fa-paper-plane\"><\/i> Envoyer ma demande\n <\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n\n<footer id=\"footer\">\n <div class=\"footer-inner\">\n <div>\n <a href=\"#\" class=\"logo\" style=\"margin-bottom:.8rem;display:inline-flex;\">\n <img decoding=\"async\" src=\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\" alt=\"SR VOYAGES\" style=\"height:44px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(212,175,55,0.35));\" onerror=\"this.onerror=null;this.style.display='none';this.nextElementSibling.style.display='flex';\" \/>\n <span style=\"display:none;align-items:center;gap:.4rem;\"><span style=\"width:38px;height:38px;background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:900;color:var(--navy);flex-shrink:0;\">SR<\/span><span class=\"logo-text\" style=\"font-size:1.1rem;\">SR <span>VOYAGES<\/span><\/span><\/span>\n <\/a>\n <p class=\"footer-brand-desc\">Votre agence de voyage de confiance depuis 2015. R\u00e9servation de billets, h\u00f4tels, circuits et s\u00e9jours sur mesure aux meilleurs prix.<\/p>\n <div class=\"footer-social\">\n <a href=\"#\" class=\"social-btn\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n <a href=\"#\" class=\"social-btn\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"#\" class=\"social-btn\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"><\/i><\/a>\n <a href=\"#\" class=\"social-btn\" aria-label=\"YouTube\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <a href=\"#\" class=\"social-btn\" aria-label=\"WhatsApp\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n <\/div>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Services<\/div>\n <div class=\"footer-links\">\n <a href=\"#services\">Billets d’avion<\/a>\n <a href=\"#services\">H\u00f4tels & Resorts<\/a>\n <a href=\"#services\">Circuits organis\u00e9s<\/a>\n <a href=\"#services\">Croisi\u00e8res<\/a>\n <a href=\"#services\">Location voiture<\/a>\n <a href=\"#services\">Assurance voyage<\/a>\n <\/div>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Destinations<\/div>\n <div class=\"footer-links\">\n <a href=\"#destinations\">Marrakech<\/a>\n <a href=\"#destinations\">Dubai<\/a>\n <a href=\"#destinations\">Istanbul<\/a>\n <a href=\"#destinations\">Bali<\/a>\n <a href=\"#destinations\">Dakar<\/a>\n <a href=\"#destinations\">Paris<\/a>\n <\/div>\n <\/div>\n <div>\n <div class=\"footer-col-title\">Informations<\/div>\n <div class=\"footer-links\">\n <a href=\"#\">\u00c0 propos de nous<\/a>\n <a href=\"#\">Conditions g\u00e9n\u00e9rales<\/a>\n <a href=\"#\">Politique de confidentialit\u00e9<\/a>\n <a href=\"#\">FAQ<\/a>\n <a href=\"#contact\">Recrutement<\/a>\n <a href=\"#contact\">Partenaires<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <div>\u00a9 2025 <strong style=\"color:var(--gold);\">SR VOYAGES<\/strong>. Tous droits r\u00e9serv\u00e9s.<\/div>\n <div style=\"display:flex;gap:1rem;flex-wrap:wrap;\">\n <span>\ud83d\udd12 Paiement s\u00e9curis\u00e9<\/span>\n <span>\u2708\ufe0f IATA Certifi\u00e9<\/span>\n <span>\ud83c\udfc6 Agence N\u00b01<\/span>\n <\/div>\n <div style=\"display:flex;gap:.7rem;align-items:center;\">\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a4\/Mastercard_2019_logo.svg\" alt=\"Mastercard\" style=\"height:22px;opacity:.5;\"\/>\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/5e\/Visa_Inc._logo.svg\" alt=\"Visa\" style=\"height:18px;opacity:.5;\"\/>\n <img decoding=\"async\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b5\/PayPal.svg\" alt=\"PayPal\" style=\"height:22px;opacity:.5;\"\/>\n <\/div>\n <\/div>\n<\/footer>\n\n\n\n<div class=\"modal-overlay\" id=\"search-modal\" onclick=\"closeModal('search-modal')\">\n <div class=\"modal-box\" onclick=\"event.stopPropagation()\">\n <div class=\"modal-header\">\n <div class=\"modal-title\">\ud83d\udd0d R\u00e9sultats de recherche<\/div>\n <button class=\"modal-close\" onclick=\"closeModal('search-modal')\">\u2715<\/button>\n <\/div>\n <div id=\"search-results-content\">\n <div style=\"text-align:center;padding:2rem;\">\n <div style=\"font-size:3rem;margin-bottom:1rem;\">\u2708\ufe0f<\/div>\n <div style=\"font-size:1rem;color:#64748b;\">Recherche en cours\u2026<\/div>\n <div style=\"margin-top:1.5rem;height:4px;background:#f1f5f9;border-radius:2px;overflow:hidden;\">\n <div style=\"height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-light));border-radius:2px;animation:loadFill 2s ease forwards;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"modal-overlay\" id=\"booking-modal\" onclick=\"closeModal('booking-modal')\">\n <div class=\"modal-box\" onclick=\"event.stopPropagation()\">\n <div class=\"modal-header\">\n <div class=\"modal-title\" id=\"booking-title\">\ud83d\udccb R\u00e9servation<\/div>\n <button class=\"modal-close\" onclick=\"closeModal('booking-modal')\">\u2715<\/button>\n <\/div>\n <div id=\"booking-content\"><\/div>\n <\/div>\n<\/div>\n\n\n<a href=\"https:\/\/wa.me\/221771437125\" id=\"wa-btn\" target=\"_blank\" aria-label=\"WhatsApp\">\n <i class=\"fab fa-whatsapp\"><\/i>\n<\/a>\n\n<button id=\"scrollTop\" onclick=\"window.scrollTo({top:0,behavior:'smooth'})\" aria-label=\"Haut de page\">\n <i class=\"fa fa-arrow-up\"><\/i>\n<\/button>\n\n\n<div id=\"toast\"><\/div>\n\n\n<script>\n\/\/ \u2500\u2500\u2500 DATA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst DESTINATIONS = [\n {name:'Marrakech', country:'Maroc', continent:'afrique', price:'349', rating:4.8, reviews:512, badge:'Populaire', emoji:'\ud83d\udd4c', colors:['#ea580c','#f97316'], desc:'La ville rouge aux mille saveurs'},\n {name:'Dubai', country:'\u00c9mirats Arabes', continent:'moyen-orient', price:'520', rating:4.9, reviews:781, badge:'Coup de \u2764\ufe0f', emoji:'\ud83c\udfd9\ufe0f', colors:['#0ea5e9','#38bdf8'], desc:'Luxe et modernit\u00e9 au d\u00e9sert'},\n {name:'Istanbul', country:'T\u00fcrkiye', continent:'europe', price:'299', rating:4.7, reviews:634, badge:'Bestseller', emoji:'\ud83d\udd4c', colors:['#dc2626','#f87171'], desc:'Le pont entre Orient et Occident'},\n {name:'Bali', country:'Indon\u00e9sie', continent:'asie', price:'820', rating:4.9, reviews:920, badge:'Exotique', emoji:'\ud83c\udf34', colors:['#16a34a','#4ade80'], desc:'L\\'\u00eele des Dieux'},\n {name:'Dakar', country:'S\u00e9n\u00e9gal', continent:'afrique', price:'390', rating:4.6, reviews:289, badge:'Nouveaut\u00e9', emoji:'\ud83c\udf0a', colors:['#7c3aed','#a78bfa'], desc:'La Teranga \u00e0 son meilleur'},\n {name:'Santorini', country:'Gr\u00e8ce', continent:'europe', price:'650', rating:4.9, reviews:1023, badge:'Romance', emoji:'\ud83c\udfdb\ufe0f', colors:['#2563eb','#60a5fa'], desc:'Couchers de soleil l\u00e9gendaires'},\n {name:'New York', country:'\u00c9tats-Unis', continent:'amerique', price:'720', rating:4.8, reviews:845, badge:'Iconic', emoji:'\ud83d\uddfd', colors:['#1e293b','#475569'], desc:'La ville qui ne dort jamais'},\n {name:'Tokyo', country:'Japon', continent:'asie', price:'980', rating:4.9, reviews:1100, badge:'Top Asie', emoji:'\u26e9\ufe0f', colors:['#be123c','#fb7185'], desc:'Futurisme et traditions mill\u00e9naires'},\n {name:'Casablanca', country:'Maroc', continent:'afrique', price:'199', rating:4.5, reviews:340, badge:'Promo', emoji:'\ud83c\udfd9\ufe0f', colors:['#0c4a6e','#0ea5e9'], desc:'La ville blanche du Maghreb'},\n {name:'Maldives', country:'Maldives', continent:'asie', price:'1490', rating:5.0, reviews:665, badge:'Luxe', emoji:'\ud83c\udfdd\ufe0f', colors:['#0d9488','#2dd4bf'], desc:'Le paradis sur terre'},\n {name:'Barcelone', country:'Espagne', continent:'europe', price:'280', rating:4.7, reviews:912, badge:'Week-end', emoji:'\ud83c\udfd7\ufe0f', colors:['#ca8a04','#facc15'], desc:'Gaud\u00ed, soleil et tapas'},\n {name:'Tunis', country:'Tunisie', continent:'afrique', price:'169', rating:4.4, reviews:408, badge:'Bon plan', emoji:'\ud83c\udffa', colors:['#dc2626','#fca5a5'], desc:'Histoire et plages cristallines'},\n];\n\nconst OFFRES = [\n {\n title:'Escapade Dubai 7 nuits',\n sub:'Vol A\/R + H\u00f4tel 5\u2605 + Transferts',\n icon:'\ud83c\udfd9\ufe0f', iconBg:'linear-gradient(135deg,#0ea5e9,#38bdf8)',\n prix:'1290', devise:'\u20ac', perPers:true,\n tags:['7 nuits','Vol inclus','H\u00f4tel 5\u2605','Transferts'],\n color:'#0ea5e9',\n btnLabel:'Je r\u00e9serve', btnStyle:'background:linear-gradient(135deg,#0ea5e9,#38bdf8);color:#fff;',\n id:'offre-dubai'\n },\n {\n title:'Marrakech Express 4 nuits',\n sub:'Vol + Riad 4\u2605 + Petit-d\u00e9jeuner',\n icon:'\ud83d\udd4c', iconBg:'linear-gradient(135deg,#ea580c,#f97316)',\n prix:'549', devise:'\u20ac', perPers:true,\n tags:['4 nuits','Vol inclus','Riad 4\u2605','Pdj inclus'],\n color:'#ea580c',\n btnLabel:'R\u00e9server maintenant', btnStyle:'background:linear-gradient(135deg,#ea580c,#f97316);color:#fff;',\n id:'offre-marrakech'\n },\n {\n title:'Circuit Asie du Sud-Est 15J',\n sub:'Tha\u00eflande + Vietnam + Cambodge',\n icon:'\ud83c\udf0f', iconBg:'linear-gradient(135deg,#16a34a,#4ade80)',\n prix:'2490', devise:'\u20ac', perPers:true,\n tags:['15 jours','H\u00f4tels inclus','Guide FR','Vol AR'],\n color:'#16a34a',\n btnLabel:'Voir le programme', btnStyle:'background:linear-gradient(135deg,#16a34a,#4ade80);color:#fff;',\n id:'offre-asie'\n },\n {\n title:'Maldives Lune de Miel',\n sub:'Villa sur pilotis + All Inclusive',\n icon:'\ud83c\udfdd\ufe0f', iconBg:'linear-gradient(135deg,#0d9488,#2dd4bf)',\n prix:'3200', devise:'\u20ac', perPers:false,\n tags:['7 nuits','Villa pilotis','All Inclusive','Romance'],\n color:'#0d9488',\n btnLabel:'Demander un devis', btnStyle:'background:linear-gradient(135deg,#0d9488,#2dd4bf);color:#fff;',\n id:'offre-maldives'\n },\n {\n title:'Dakar & S\u00e9n\u00e9gal 8 jours',\n sub:'Vol + H\u00f4tel + Excursions incluses',\n icon:'\ud83c\udf0a', iconBg:'linear-gradient(135deg,#7c3aed,#a78bfa)',\n prix:'890', devise:'\u20ac', perPers:true,\n tags:['8 jours','Vol inclus','Excursions','Guide local'],\n color:'#7c3aed',\n btnLabel:'R\u00e9server', btnStyle:'background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;',\n id:'offre-dakar'\n },\n {\n title:'Istanbul Long Week-end',\n sub:'3 nuits H\u00f4tel 4\u2605 + Visite guid\u00e9e',\n icon:'\ud83d\udd4c', iconBg:'linear-gradient(135deg,#dc2626,#f87171)',\n prix:'380', devise:'\u20ac', perPers:true,\n tags:['3 nuits','Vol inclus','Visite guid\u00e9e','D\u00eener'],\n color:'#dc2626',\n btnLabel:'R\u00e9server', btnStyle:'background:linear-gradient(135deg,#dc2626,#f87171);color:#fff;',\n id:'offre-istanbul'\n }\n];\n\nconst TESTIMONIALS = [\n [\n {stars:5, text:'\"Agence exceptionnelle ! Nous avons r\u00e9serv\u00e9 notre voyage de noces aux Maldives via SR VOYAGES. Tout \u00e9tait parfait, de la r\u00e9servation jusqu\\'au retour. Je recommande vivement !\"', name:'Sophie M.', dest:'Maldives \u2014 Lune de miel', init:'SM'},\n {stars:5, text:'\"Vol Paris-Dubai \u00e0 un prix imbattable, h\u00f4tel 5\u2605 magnifique. L\\'\u00e9quipe SR VOYAGES a r\u00e9pondu \u00e0 toutes mes questions rapidement. Service irr\u00e9prochable.\"', name:'Karim B.', dest:'Dubai \u2014 Voyage d\\'affaires', init:'KB'},\n {stars:5, text:'\"Circuit au Maroc parfaitement organis\u00e9. Guides comp\u00e9tents, h\u00e9bergements de qualit\u00e9, programme vari\u00e9. Une exp\u00e9rience inoubliable pour toute la famille !\"', name:'Nathalie L.', dest:'Marrakech & Sahara', init:'NL'},\n ],\n [\n {stars:5, text:'\"Voyageurs r\u00e9guliers chez SR VOYAGES depuis 3 ans. Les prix sont toujours les meilleurs et le service client est toujours au top. Merci \u00e0 toute l\\'\u00e9quipe !\"', name:'Alexandre D.', dest:'Bali \u2014 S\u00e9jour d\u00e9tente', init:'AD'},\n {stars:4, text:'\"Premi\u00e8re fois que je r\u00e9servais via une agence en ligne. L\\'exp\u00e9rience SR VOYAGES m\\'a conquis ! Devis rapide, tout clair et transparent. Je reviendrai !\"', name:'Fatima R.', dest:'Istanbul \u2014 Week-end', init:'FR'},\n {stars:5, text:'\"Circuit Asie du Sud-Est de r\u00eave ! 15 jours parfaitement planifi\u00e9s entre Bangkok, Hano\u00ef et Angkor Vat. Guide francophone exceptionnel. Merci SR VOYAGES !\"', name:'Pierre-Luc V.', dest:'Asie du Sud-Est', init:'PV'},\n ]\n];\n\n\/\/ \u2500\u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nwindow.addEventListener('DOMContentLoaded', () => {\n setTimeout(() => {\n const loader = document.getElementById('loader');\n loader.style.opacity = '0';\n setTimeout(() => loader.remove(), 600);\n }, 2200);\n\n renderDestinations(DESTINATIONS);\n renderOffres();\n renderTestimonials();\n initCountdown();\n initScrollSpy();\n initFadeIn();\n initCounterAnimation();\n setMinDates();\n});\n\n\/\/ \u2500\u2500\u2500 DESTINATIONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet currentFilter = 'tous';\n\nfunction renderDestinations(list) {\n const grid = document.getElementById('dest-grid');\n const filtered = currentFilter === 'tous' ? list : list.filter(d => d.continent === currentFilter);\n grid.innerHTML = filtered.map(d => `\n <div class=\"dest-card\" onclick=\"openBooking('${d.name}', '${d.price}')\">\n <div class=\"dest-img\">\n <div class=\"dest-img-bg\" style=\"background:linear-gradient(135deg,${d.colors[0]},${d.colors[1]});display:flex;align-items:center;justify-content:center;\">\n <span style=\"font-size:4rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));\">${d.emoji}<\/span>\n <\/div>\n <div class=\"dest-img-overlay\"><\/div>\n <div class=\"dest-badge\">${d.badge}<\/div>\n <\/div>\n <div class=\"dest-body\">\n <div class=\"dest-country\">${d.country}<\/div>\n <div class=\"dest-name\">${d.name}<\/div>\n <div style=\"font-size:.78rem;color:#94a3b8;margin-bottom:.6rem;\">${d.desc}<\/div>\n <div class=\"dest-info\">\n <div>\n <div class=\"dest-price-label\">\u00c0 partir de<\/div>\n <div class=\"dest-price\">${d.price}\u20ac <span style=\"font-size:.7rem;color:#94a3b8;font-weight:400;\">\/ pers.<\/span><\/div>\n <\/div>\n <div>\n <div class=\"dest-rating\">\n ${'\u2605'.repeat(Math.floor(d.rating))} <span style=\"color:#64748b;font-size:.75rem;\">${d.rating} (${d.reviews})<\/span>\n <\/div>\n <div style=\"font-size:.7rem;color:#94a3b8;text-align:right;margin-top:.2rem;\">avis clients<\/div>\n <\/div>\n <\/div>\n <div style=\"margin-top:.8rem;padding-top:.8rem;border-top:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center;\">\n <span style=\"font-size:.75rem;color:#64748b;\">\u2708\ufe0f Vol inclus possible<\/span>\n <button onclick=\"event.stopPropagation();openBooking('${d.name}','${d.price}')\"\n style=\"background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);border:none;border-radius:6px;padding:.35rem .9rem;font-size:.78rem;font-weight:700;cursor:pointer;\">\n R\u00e9server\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n `).join('');\n}\n\nfunction filterDest(btn, cat) {\n document.querySelectorAll('.dest-filter').forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n currentFilter = cat;\n renderDestinations(DESTINATIONS);\n}\n\n\/\/ \u2500\u2500\u2500 OFFRES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction renderOffres() {\n const grid = document.getElementById('offres-grid');\n grid.innerHTML = OFFRES.map(o => `\n <div class=\"offre-card\">\n <div class=\"offre-header\">\n <div class=\"offre-icon\" style=\"background:${o.iconBg};\">${o.icon}<\/div>\n <div>\n <div class=\"offre-title\">${o.title}<\/div>\n <div class=\"offre-sub\">${o.sub}<\/div>\n <\/div>\n <\/div>\n <div class=\"offre-body\">\n <div class=\"offre-price-row\">\n <div class=\"offre-prix-from\">\u00c0 partir de<\/div>\n <div class=\"offre-prix\">${o.prix}<\/div>\n <div class=\"offre-currency\">${o.devise}<\/div>\n ${o.perPers ? '<div style=\"font-size:.75rem;color:#94a3b8;align-self:flex-end;\">\/pers.<\/div>' : '<div style=\"font-size:.75rem;color:#94a3b8;align-self:flex-end;\">\/couple<\/div>'}\n <\/div>\n <div class=\"offre-tags\">\n ${o.tags.map(t => `<span class=\"offre-tag\">${t}<\/span>`).join('')}\n <\/div>\n <button class=\"btn-offre\" style=\"${o.btnStyle}\" onclick=\"openBooking('${o.title}','${o.prix}')\">\n ${o.btnLabel} \u2192\n <\/button>\n <\/div>\n <\/div>\n `).join('');\n}\n\n\/\/ \u2500\u2500\u2500 TESTIMONIALS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nlet testiIdx = 0;\nfunction renderTestimonials() {\n const track = document.getElementById('testi-track');\n const nav = document.getElementById('testi-nav');\n track.innerHTML = TESTIMONIALS.map((group, gi) => `\n <div class=\"testi-card\">\n <div class=\"testi-inner\">\n ${group.map(t => `\n <div class=\"testi-item\">\n <div class=\"testi-stars\">${'\u2605'.repeat(t.stars)}<\/div>\n <div class=\"testi-text\">${t.text}<\/div>\n <div class=\"testi-author\">\n <div class=\"testi-avatar\">${t.init}<\/div>\n <div>\n <div class=\"testi-name\">${t.name}<\/div>\n <div class=\"testi-dest\">\ud83d\udccd ${t.dest}<\/div>\n <\/div>\n <\/div>\n <\/div>\n `).join('')}\n <\/div>\n <\/div>\n `).join('');\n\n nav.innerHTML = TESTIMONIALS.map((_,i) => `\n <div class=\"testi-dot ${i===0?'active':''}\" onclick=\"goTesti(${i})\"><\/div>\n `).join('');\n}\n\nfunction goTesti(idx) {\n testiIdx = idx;\n document.getElementById('testi-track').style.transform = `translateX(-${idx * 100}%)`;\n document.querySelectorAll('.testi-dot').forEach((d,i) => d.classList.toggle('active', i===idx));\n}\n\nsetInterval(() => goTesti((testiIdx + 1) % TESTIMONIALS.length), 5000);\n\n\/\/ \u2500\u2500\u2500 COUNTDOWN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction initCountdown() {\n \/\/ Set end time to 24h from now\n if (!localStorage.getItem('srv_countdown_end')) {\n localStorage.setItem('srv_countdown_end', Date.now() + 24 * 3600 * 1000);\n }\n const end = parseInt(localStorage.getItem('srv_countdown_end'));\n function tick() {\n const diff = end - Date.now();\n if (diff <= 0) {\n localStorage.removeItem('srv_countdown_end');\n document.getElementById('cnt-h').textContent = '00';\n document.getElementById('cnt-m').textContent = '00';\n document.getElementById('cnt-s').textContent = '00';\n return;\n }\n const h = Math.floor(diff \/ 3600000);\n const m = Math.floor((diff % 3600000) \/ 60000);\n const s = Math.floor((diff % 60000) \/ 1000);\n document.getElementById('cnt-h').textContent = String(h).padStart(2,'0');\n document.getElementById('cnt-m').textContent = String(m).padStart(2,'0');\n document.getElementById('cnt-s').textContent = String(s).padStart(2,'0');\n }\n tick();\n setInterval(tick, 1000);\n}\n\n\/\/ \u2500\u2500\u2500 COUNTER ANIMATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction initCounterAnimation() {\n const counters = document.querySelectorAll('[data-target]');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (!entry.isIntersecting) return;\n const el = entry.target;\n const target = +el.dataset.target;\n const suffix = target >= 100 ? (target === 98 ? '%' : '+') : (target === 10 ? ' ans' : '+');\n let cur = 0;\n const step = target \/ 50;\n const timer = setInterval(() => {\n cur = Math.min(cur + step, target);\n el.textContent = Math.floor(cur).toLocaleString('fr') + suffix;\n if (cur >= target) clearInterval(timer);\n }, 30);\n observer.unobserve(el);\n });\n }, { threshold: .5 });\n counters.forEach(c => observer.observe(c));\n}\n\n\/\/ \u2500\u2500\u2500 FADE IN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction initFadeIn() {\n const elems = document.querySelectorAll('.fade-in');\n const obs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }\n });\n }, { threshold: .1 });\n elems.forEach(el => obs.observe(el));\n}\n\n\/\/ \u2500\u2500\u2500 SEARCH TABS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction switchTab(btn, panelId) {\n document.querySelectorAll('.stab').forEach(b => b.classList.remove('active'));\n document.querySelectorAll('.search-panel').forEach(p => p.classList.remove('active'));\n btn.classList.add('active');\n document.getElementById(panelId).classList.add('active');\n}\n\n\/\/ \u2500\u2500\u2500 SEARCH \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction doSearch() {\n openModal('search-modal');\n const results = [\n { airline:'Air France', dep:'08h30', arr:'13h45', duration:'5h15', stops:'Direct', price:'420', logo:'\u2708\ufe0f' },\n { airline:'Turkish Airlines', dep:'10h15', arr:'16h30', duration:'6h15', stops:'Direct', price:'359', logo:'\ud83c\uddf9\ud83c\uddf7' },\n { airline:'Emirates', dep:'14h00', arr:'22h15', duration:'8h15', stops:'1 escale', price:'480', logo:'\ud83c\udde6\ud83c\uddea' },\n { airline:'Transavia', dep:'06h45', arr:'12h10', duration:'5h25', stops:'Direct', price:'289', logo:'\ud83d\udfe2' },\n ];\n setTimeout(() => {\n document.getElementById('search-results-content').innerHTML = `\n <div style=\"margin-bottom:1rem;padding:.6rem 1rem;background:#f0fdf4;border-radius:8px;border-left:3px solid #16a34a;font-size:.85rem;color:#166534;font-weight:600;\">\n \u2705 ${results.length} r\u00e9sultats trouv\u00e9s\n <\/div>\n ${results.map((r,i) => `\n <div style=\"border:1.5px solid #e2e8f0;border-radius:12px;padding:1rem;margin-bottom:.8rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;transition:border .2s;cursor:pointer;\"\n onmouseenter=\"this.style.borderColor='var(--gold)'\" onmouseleave=\"this.style.borderColor='#e2e8f0'\">\n <div style=\"display:flex;align-items:center;gap:.7rem;\">\n <span style=\"font-size:1.5rem;\">${r.logo}<\/span>\n <div>\n <div style=\"font-weight:700;color:var(--navy);font-size:.9rem;\">${r.airline}<\/div>\n <div style=\"font-size:.75rem;color:#94a3b8;\">${r.stops}<\/div>\n <\/div>\n <\/div>\n <div style=\"text-align:center;\">\n <div style=\"font-weight:700;color:var(--navy);\">${r.dep} \u2192 ${r.arr}<\/div>\n <div style=\"font-size:.75rem;color:#94a3b8;\">${r.duration}<\/div>\n <\/div>\n <div style=\"text-align:right;\">\n <div style=\"font-size:1.3rem;font-weight:900;color:var(--gold);\">${r.price}\u20ac<\/div>\n <button onclick=\"showToast('\u2705 Vol ${r.airline} ajout\u00e9 ! Notre \u00e9quipe vous contacte.');closeModal('search-modal')\"\n style=\"background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);border:none;border-radius:6px;padding:.35rem .8rem;font-size:.78rem;font-weight:700;cursor:pointer;margin-top:.3rem;\">\n S\u00e9lectionner\n <\/button>\n <\/div>\n <\/div>\n `).join('')}\n `;\n }, 1800);\n}\n\n\/\/ \u2500\u2500\u2500 BOOKING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction openBooking(name, price) {\n document.getElementById('booking-title').textContent = `\ud83d\udccb R\u00e9server \u2014 ${name}`;\n document.getElementById('booking-content').innerHTML = `\n <div style=\"background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:12px;padding:1.2rem;margin-bottom:1.2rem;text-align:center;\">\n <div style=\"font-size:.85rem;color:#94a3b8;\">Offre s\u00e9lectionn\u00e9e<\/div>\n <div style=\"font-size:1.2rem;font-weight:800;color:#fff;\">${name}<\/div>\n <div style=\"font-size:1.8rem;font-weight:900;color:var(--gold);\">\u00c0 partir de ${price}\u20ac<\/div>\n <\/div>\n <form onsubmit=\"submitBooking(event,'${name}')\">\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem;\">\n <div>\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">Pr\u00e9nom<\/label>\n <input type=\"text\" placeholder=\"Pr\u00e9nom\" required style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;\" onfocus=\"this.style.borderColor='var(--gold)'\" onblur=\"this.style.borderColor='#e2e8f0'\"\/>\n <\/div>\n <div>\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">Nom<\/label>\n <input type=\"text\" placeholder=\"Nom\" required style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;\" onfocus=\"this.style.borderColor='var(--gold)'\" onblur=\"this.style.borderColor='#e2e8f0'\"\/>\n <\/div>\n <\/div>\n <div style=\"margin-bottom:.8rem;\">\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">Email<\/label>\n <input type=\"email\" placeholder=\"votre@email.com\" required style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;\" onfocus=\"this.style.borderColor='var(--gold)'\" onblur=\"this.style.borderColor='#e2e8f0'\"\/>\n <\/div>\n <div style=\"margin-bottom:.8rem;\">\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">T\u00e9l\u00e9phone<\/label>\n <input type=\"tel\" placeholder=\"+221 7X XXX XX XX\" style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;\" onfocus=\"this.style.borderColor='var(--gold)'\" onblur=\"this.style.borderColor='#e2e8f0'\"\/>\n <\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.8rem;\">\n <div>\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">Date de d\u00e9part<\/label>\n <input type=\"date\" style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;\" onfocus=\"this.style.borderColor='var(--gold)'\" onblur=\"this.style.borderColor='#e2e8f0'\"\/>\n <\/div>\n <div>\n <label style=\"display:block;font-size:.75rem;font-weight:700;color:#475569;margin-bottom:.3rem;text-transform:uppercase;\">Nb. personnes<\/label>\n <select style=\"width:100%;padding:.65rem .9rem;border:1.5px solid #e2e8f0;border-radius:7px;font-size:.88rem;outline:none;background:#fff;\">\n <option>1 personne<\/option><option>2 personnes<\/option>\n <option>3 personnes<\/option><option>4 personnes<\/option><option>Groupe<\/option>\n <\/select>\n <\/div>\n <\/div>\n <button type=\"submit\" style=\"width:100%;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--navy);font-weight:800;font-size:1rem;padding:.85rem;border:none;border-radius:10px;cursor:pointer;margin-top:.3rem;transition:all .3s;\" onmouseover=\"this.style.transform='translateY(-2px)'\" onmouseout=\"this.style.transform='translateY(0)'\">\n \u2708\ufe0f Confirmer ma r\u00e9servation\n <\/button>\n <p style=\"text-align:center;font-size:.76rem;color:#94a3b8;margin-top:.7rem;\">\ud83d\udd12 R\u00e9servation s\u00e9curis\u00e9e \u2014 Sans engagement imm\u00e9diat<\/p>\n <\/form>\n `;\n openModal('booking-modal');\n}\n\nfunction submitBooking(e, name) {\n e.preventDefault();\n closeModal('booking-modal');\n showToast(`\ud83c\udf89 Demande de r\u00e9servation pour ${name} re\u00e7ue ! Notre \u00e9quipe vous contacte sous 2h.`);\n}\n\n\/\/ \u2500\u2500\u2500 MODALS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction openModal(id) { document.getElementById(id).classList.add('open'); document.body.style.overflow='hidden'; }\nfunction closeModal(id) { document.getElementById(id).classList.remove('open'); document.body.style.overflow=''; }\n\n\/\/ \u2500\u2500\u2500 CONTACT FORM \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction submitContact(e) {\n e.preventDefault();\n e.target.reset();\n showToast('\u2705 Votre demande a bien \u00e9t\u00e9 envoy\u00e9e ! Nous vous r\u00e9pondons dans les 2 heures.');\n}\n\n\/\/ \u2500\u2500\u2500 NEWSLETTER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction subscribeNewsletter(e) {\n e.preventDefault();\n document.getElementById('nl-email').value = '';\n showToast('\ud83c\udf89 Inscription r\u00e9ussie ! Bienvenue dans la famille SR VOYAGES.');\n}\n\n\/\/ \u2500\u2500\u2500 TOAST \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction showToast(msg) {\n const t = document.getElementById('toast');\n t.textContent = msg;\n t.classList.add('show');\n setTimeout(() => t.classList.remove('show'), 4000);\n}\n\n\/\/ \u2500\u2500\u2500 HAMBURGER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst ham = document.getElementById('hamburger');\nconst mob = document.getElementById('mobile-menu');\nham.addEventListener('click', () => {\n ham.classList.toggle('open');\n mob.style.display = mob.style.display === 'block' ? 'none' : 'block';\n});\nfunction closeMobile() {\n ham.classList.remove('open');\n mob.style.display = 'none';\n}\n\n\/\/ \u2500\u2500\u2500 SCROLL SPY + SCROLL TOP \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction initScrollSpy() {\n const st = document.getElementById('scrollTop');\n window.addEventListener('scroll', () => {\n const sy = window.scrollY;\n \/\/ scroll top btn\n st.classList.toggle('visible', sy > 400);\n \/\/ navbar shadow\n document.getElementById('navbar').style.boxShadow = sy > 40 ? '0 4px 20px rgba(0,0,0,.3)' : '';\n \/\/ active nav link\n const sections = ['hero','destinations','services','offres','temoignages','contact'];\n let current = '';\n sections.forEach(id => {\n const s = document.getElementById(id);\n if (s && s.getBoundingClientRect().top < 100) current = id;\n });\n document.querySelectorAll('.nav-links a').forEach(a => {\n a.classList.toggle('active', a.getAttribute('href') === '#' + current);\n });\n });\n}\n\n\/\/ \u2500\u2500\u2500 DATES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction setMinDates() {\n const today = new Date().toISOString().split('T')[0];\n document.querySelectorAll('input[type=date]').forEach(inp => inp.min = today);\n}\n\n\/\/ \u2500\u2500\u2500 KEYBOARD ESC \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\ndocument.addEventListener('keydown', e => {\n if (e.key === 'Escape') {\n closeModal('search-modal');\n closeModal('booking-modal');\n closeMobile();\n }\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>SR VOYAGES | Agence de Voyage N\u00b01 – R\u00e9servations Billets & H\u00f4tels \u2708 SR VOYAGES SR SR VOYAGES Accueil Destinations Services Offres Avis Contact R\u00e9server \ud83c\udfe0 Accueil \ud83c\udf0d Destinations \u2699\ufe0f Services \ud83c\udf81 Offres \u2b50 Avis clients \ud83d\udcde Contact & R\u00e9servation Agence de Voyage N\u00b01 Voyagez avec Confianceet \u00c9l\u00e9gance SR VOYAGES vous offre des exp\u00e9riences de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-100","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Billet-avion - SR VOYAGES<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/srvoyages.com\/?page_id=100\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Billet-avion - SR VOYAGES\" \/>\n<meta property=\"og:description\" content=\"SR VOYAGES | Agence de Voyage N\u00b01 – R\u00e9servations Billets & H\u00f4tels \u2708 SR VOYAGES SR SR VOYAGES Accueil Destinations Services Offres Avis Contact R\u00e9server \ud83c\udfe0 Accueil \ud83c\udf0d Destinations \u2699\ufe0f Services \ud83c\udf81 Offres \u2b50 Avis clients \ud83d\udcde Contact & R\u00e9servation Agence de Voyage N\u00b01 Voyagez avec Confianceet \u00c9l\u00e9gance SR VOYAGES vous offre des exp\u00e9riences de […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/srvoyages.com\/?page_id=100\" \/>\n<meta property=\"og:site_name\" content=\"SR VOYAGES\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-04T21:39:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/srvoyages.com\/?page_id=100\",\"url\":\"https:\/\/srvoyages.com\/?page_id=100\",\"name\":\"Billet-avion - SR VOYAGES\",\"isPartOf\":{\"@id\":\"https:\/\/srvoyages.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/srvoyages.com\/?page_id=100#primaryimage\"},\"image\":{\"@id\":\"https:\/\/srvoyages.com\/?page_id=100#primaryimage\"},\"thumbnailUrl\":\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\",\"datePublished\":\"2026-04-04T21:17:36+00:00\",\"dateModified\":\"2026-04-04T21:39:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/srvoyages.com\/?page_id=100#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/srvoyages.com\/?page_id=100\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/srvoyages.com\/?page_id=100#primaryimage\",\"url\":\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\",\"contentUrl\":\"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png\",\"width\":1024,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/srvoyages.com\/?page_id=100#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/srvoyages.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Billet-avion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/srvoyages.com\/#website\",\"url\":\"https:\/\/srvoyages.com\/\",\"name\":\"SR VOYAGES\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/srvoyages.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n","yoast_head_json":{"title":"Billet-avion - SR VOYAGES","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/srvoyages.com\/?page_id=100","og_locale":"en_US","og_type":"article","og_title":"Billet-avion - SR VOYAGES","og_description":"SR VOYAGES | Agence de Voyage N\u00b01 – R\u00e9servations Billets & H\u00f4tels \u2708 SR VOYAGES SR SR VOYAGES Accueil Destinations Services Offres Avis Contact R\u00e9server \ud83c\udfe0 Accueil \ud83c\udf0d Destinations \u2699\ufe0f Services \ud83c\udf81 Offres \u2b50 Avis clients \ud83d\udcde Contact & R\u00e9servation Agence de Voyage N\u00b01 Voyagez avec Confianceet \u00c9l\u00e9gance SR VOYAGES vous offre des exp\u00e9riences de […]","og_url":"https:\/\/srvoyages.com\/?page_id=100","og_site_name":"SR VOYAGES","article_modified_time":"2026-04-04T21:39:09+00:00","og_image":[{"url":"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/srvoyages.com\/?page_id=100","url":"https:\/\/srvoyages.com\/?page_id=100","name":"Billet-avion - SR VOYAGES","isPartOf":{"@id":"https:\/\/srvoyages.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/srvoyages.com\/?page_id=100#primaryimage"},"image":{"@id":"https:\/\/srvoyages.com\/?page_id=100#primaryimage"},"thumbnailUrl":"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png","datePublished":"2026-04-04T21:17:36+00:00","dateModified":"2026-04-04T21:39:09+00:00","breadcrumb":{"@id":"https:\/\/srvoyages.com\/?page_id=100#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/srvoyages.com\/?page_id=100"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/srvoyages.com\/?page_id=100#primaryimage","url":"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png","contentUrl":"https:\/\/srvoyages.com\/wp-content\/uploads\/2026\/03\/LOGO-SR-VOYAGES-2.png","width":1024,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/srvoyages.com\/?page_id=100#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/srvoyages.com\/"},{"@type":"ListItem","position":2,"name":"Billet-avion"}]},{"@type":"WebSite","@id":"https:\/\/srvoyages.com\/#website","url":"https:\/\/srvoyages.com\/","name":"SR VOYAGES","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/srvoyages.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"brizy_media":[],"_links":{"self":[{"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/pages\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/srvoyages.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=100"}],"version-history":[{"count":3,"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/pages\/100\/revisions"}],"predecessor-version":[{"id":104,"href":"https:\/\/srvoyages.com\/index.php?rest_route=\/wp\/v2\/pages\/100\/revisions\/104"}],"wp:attachment":[{"href":"https:\/\/srvoyages.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}