{"id":3974,"date":"2026-06-02T00:15:00","date_gmt":"2026-06-01T23:15:00","guid":{"rendered":"https:\/\/fegg.uiz.ac.ma\/?page_id=3974"},"modified":"2026-06-02T00:32:22","modified_gmt":"2026-06-01T23:32:22","slug":"elogha-sup-v2","status":"publish","type":"page","link":"https:\/\/fegg.uiz.ac.ma\/?page_id=3974","title":{"rendered":"Elogha-Sup – v2"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n ELOGHA SUP - FEGG Guelmim | Design Moderne & Dynamique<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <!-- Font Awesome 6 -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n background-color: #faf6f0;\r\n color: #2d3748;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* --- \u0627\u0644\u0623\u0646\u064a\u0645\u0627\u0633\u064a\u0648\u0646 \u0627\u0644\u062c\u062f\u064a\u062f\u0629 \u062f\u064a\u0627\u0644 \u0627\u0644\u0640 Scroll --- *\/\r\n .reveal {\r\n opacity: 0;\r\n transform: translateY(50px) scale(0.98);\r\n transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), \r\n transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);\r\n will-change: transform, opacity;\r\n }\r\n .reveal.active {\r\n opacity: 1;\r\n transform: translateY(0) scale(1);\r\n }\r\n\r\n .section-bg-icon {\r\n position: absolute;\r\n bottom: 20px;\r\n right: 20px;\r\n font-size: 120px;\r\n opacity: 0.06;\r\n pointer-events: none;\r\n z-index: 0;\r\n font-family: 'Font Awesome 6 Free';\r\n font-weight: 900;\r\n }\r\n\r\n section {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 100px 24px;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 55px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n .section-title {\r\n font-size: 38px;\r\n font-weight: 800;\r\n color: #4a321a;\r\n margin-bottom: 12px;\r\n }\r\n .section-subtitle {\r\n font-size: 17px;\r\n color: #718096;\r\n max-width: 650px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ---------- HERO SECTION (\u0645\u0639 \u0645\u0643\u0627\u0646 \u0627\u0644\u0635\u0648\u0631\u0629) ---------- *\/\r\n .hero-section {\r\n padding: 0;\r\n max-width: 100%;\r\n \r\n background: linear-gradient(135deg, rgba(43, 29, 14, 0.843) 0%, rgba(74, 50, 26, 0.568) 100%), \r\n url('http:\/\/fegg.uiz.ac.ma\/wp-content\/uploads\/2026\/06\/Photos_9lAJzmZkUq.jpg') no-repeat center center\/cover; \r\n \r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .hero-section::before {\r\n content: \"\";\r\n position: absolute;\r\n top: -50%;\r\n left: -30%;\r\n width: 80%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(242,153,74,0.15) 0%, rgba(0,0,0,0) 70%);\r\n transform: rotate(25deg);\r\n pointer-events: none;\r\n }\r\n .hero-container {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n padding: 160px 24px 180px;\r\n text-align: center;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n .hero-badge {\r\n background: rgba(255,255,255,0.15);\r\n backdrop-filter: blur(8px);\r\n display: inline-block;\r\n padding: 8px 28px;\r\n border-radius: 60px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n letter-spacing: 2px;\r\n margin-bottom: 30px;\r\n border: 1px solid rgba(255,255,255,0.3);\r\n }\r\n .hero-container h1 {\r\n font-size: 70px;\r\n font-weight: 800;\r\n line-height: 1.1;\r\n margin-bottom: 20px;\r\n }\r\n .hero-container h1 span {\r\n color: #f2994a;\r\n text-shadow: 0 2px 10px rgba(0,0,0,0.2);\r\n }\r\n .hero-container h2 {\r\n font-size: 22px;\r\n font-weight: 500;\r\n opacity: 0.9;\r\n margin-bottom: 30px;\r\n }\r\n .hero-description {\r\n font-size: 18px;\r\n max-width: 700px;\r\n margin: 0 auto 45px;\r\n opacity: 0.85;\r\n line-height: 1.6;\r\n }\r\n .hero-btn {\r\n background: #f2994a;\r\n color: white;\r\n padding: 18px 48px;\r\n border-radius: 60px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n display: inline-block;\r\n transition: transform 0.3s, box-shadow 0.3s, background 0.3s;\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.2);\r\n }\r\n .hero-btn:hover {\r\n transform: translateY(-5px);\r\n background: #e08532;\r\n box-shadow: 0 20px 35px rgba(0,0,0,0.25);\r\n }\r\n\r\n \/* --- Piliers --- *\/\r\n .piliers-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 35px;\r\n }\r\n .pilier-card {\r\n background: rgba(255,255,255,0.7);\r\n backdrop-filter: blur(8px);\r\n border-radius: 28px;\r\n padding: 45px 25px;\r\n text-align: center;\r\n transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n border: 1px solid rgba(74,50,26,0.08);\r\n box-shadow: 0 15px 35px rgba(0,0,0,0.02);\r\n }\r\n .pilier-card:hover {\r\n transform: translateY(-12px);\r\n background: white;\r\n border-color: rgba(242,153,74,0.3);\r\n box-shadow: 0 25px 45px rgba(0,0,0,0.08);\r\n }\r\n .pilier-card .tag {\r\n font-size: 14px;\r\n font-weight: 700;\r\n color: #e08532;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n }\r\n .pilier-card h3 {\r\n font-size: 24px;\r\n margin-top: 15px;\r\n color: #4a321a;\r\n }\r\n\r\n \/* --- Vid\u00e9o --- *\/\r\n .video-modern {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n border-radius: 32px;\r\n overflow: hidden;\r\n position: relative;\r\n cursor: pointer;\r\n box-shadow: 0 20px 35px rgba(0,0,0,0.1);\r\n }\r\n .video-thumb {\r\n width: 100%;\r\n aspect-ratio: 16\/9;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.4s;\r\n }\r\n .video-modern:hover .video-thumb {\r\n transform: scale(1.02);\r\n }\r\n .play-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.3);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: background 0.3s;\r\n }\r\n .play-btn {\r\n background: rgba(242,153,74,0.9);\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 40px;\r\n color: white;\r\n backdrop-filter: blur(4px);\r\n transition: transform 0.2s;\r\n }\r\n .video-modern:hover .play-btn {\r\n transform: scale(1.1);\r\n background: #f2994a;\r\n }\r\n .video-iframe {\r\n width: 100%;\r\n aspect-ratio: 16\/9;\r\n border: none;\r\n }\r\n\r\n \/* --- Comment \u00e7a marche --- *\/\r\n .steps-container {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 40px;\r\n }\r\n .step-card {\r\n background: white;\r\n border-radius: 28px;\r\n padding: 50px 30px 40px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 12px 28px rgba(0,0,0,0.03);\r\n transition: all 0.3s;\r\n }\r\n .step-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 35px rgba(0,0,0,0.08);\r\n }\r\n .step-bg-number {\r\n font-size: 110px;\r\n font-weight: 800;\r\n color: rgba(74,50,26,0.05);\r\n position: absolute;\r\n bottom: -10px;\r\n right: 0px;\r\n line-height: 1;\r\n pointer-events: none;\r\n font-family: monospace;\r\n }\r\n .step-card h3 {\r\n font-size: 22px;\r\n color: #4a321a;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n }\r\n .step-card p {\r\n color: #718096;\r\n font-size: 15px;\r\n }\r\n\r\n \/* --- T\u00e9moignages (\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0623\u0633\u0647\u0645 \u0627\u0644\u062c\u062f\u064a\u062f\u0629) --- *\/\r\n .testimonials-carousel-container {\r\n position: relative;\r\n max-width: 100%;\r\n }\r\n .testimonials-wrapper-outer {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n }\r\n .testimonials-scroll {\r\n overflow-x: auto;\r\n scroll-behavior: smooth;\r\n -webkit-overflow-scrolling: touch;\r\n scrollbar-width: none;\r\n padding: 20px 0;\r\n width: 100%;\r\n }\r\n .testimonials-scroll::-webkit-scrollbar {\r\n display: none;\r\n }\r\n .testimonials-flex {\r\n display: flex;\r\n gap: 30px;\r\n width: max-content;\r\n }\r\n .testimonial-card {\r\n width: 380px;\r\n background: white;\r\n border-radius: 28px;\r\n padding: 32px;\r\n flex-shrink: 0;\r\n box-shadow: 0 12px 28px rgba(0,0,0,0.04);\r\n }\r\n .quote-icon {\r\n font-size: 50px;\r\n color: #f2994a;\r\n opacity: 0.3;\r\n margin-bottom: 16px;\r\n }\r\n .testimonial-text {\r\n font-size: 16px;\r\n margin-bottom: 20px;\r\n font-style: italic;\r\n }\r\n .testimonial-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 14px;\r\n }\r\n .avatar {\r\n width: 48px;\r\n height: 48px;\r\n background: #f2994a;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n font-size: 20px;\r\n color: white;\r\n }\r\n \r\n \/* \u062a\u0635\u0645\u064a\u0645 \u0623\u0633\u0647\u0645 \u0627\u0644\u062a\u0646\u0642\u0644 \u0644\u0644\u0640 Testimonials *\/\r\n .nav-btn {\r\n background: white;\r\n border: 1px solid rgba(74,50,26,0.15);\r\n width: 46px;\r\n height: 46px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n position: absolute;\r\n z-index: 10;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.08);\r\n transition: all 0.3s;\r\n color: #4a321a;\r\n }\r\n .nav-btn:hover {\r\n background: #f2994a;\r\n color: white;\r\n border-color: #f2994a;\r\n transform: scale(1.05);\r\n }\r\n .nav-btn.prev { left: -20px; }\r\n .nav-btn.next { right: -20px; }\r\n\r\n .carousel-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 12px;\r\n margin-top: 15px;\r\n }\r\n .dot {\r\n width: 12px;\r\n height: 12px;\r\n background: #cbd5e0;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: 0.3s;\r\n }\r\n .dot.active {\r\n background: #f2994a;\r\n width: 28px;\r\n border-radius: 10px;\r\n }\r\n\r\n \/* --- \u0627\u0644\u0640 FAQ \u0627\u0644\u0645\u0637\u0648\u0631 \u0628\u0627\u0644\u0625\u0646\u0633\u064a\u0627\u0628\u064a\u0629 \u0627\u0644\u0645\u0637\u0644\u0642\u0629 --- *\/\r\n .faq-accordion {\r\n max-width: 850px;\r\n margin: 0 auto;\r\n }\r\n .faq-item {\r\n background: white;\r\n border-radius: 24px;\r\n margin-bottom: 18px;\r\n overflow: hidden;\r\n box-shadow: 0 5px 18px rgba(0,0,0,0.01);\r\n border: 1px solid rgba(0,0,0,0.03);\r\n }\r\n .faq-question {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 22px 28px;\r\n font-weight: 700;\r\n font-size: 18px;\r\n color: #4a321a;\r\n cursor: pointer;\r\n background: white;\r\n transition: background 0.2s, color 0.2s;\r\n user-select: none;\r\n }\r\n .faq-question:hover {\r\n background: #fef7ec;\r\n }\r\n .faq-question .icon {\r\n font-size: 22px;\r\n color: #f2994a;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n \/* \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0633\u062d\u0631\u064a \u0644\u0644\u0625\u0646\u0633\u064a\u0627\u0628\u064a\u0629 (\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0627\u0644\u0640 CSS Grid \u0644\u0644\u0645\u0631\u0648\u0646\u0629) *\/\r\n .faq-content-wrapper {\r\n display: grid;\r\n grid-template-rows: 0fr;\r\n transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n }\r\n .faq-answer {\r\n overflow: hidden;\r\n color: #4a5568;\r\n font-size: 16px;\r\n line-height: 1.6;\r\n padding: 0 28px;\r\n transition: padding 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n }\r\n \r\n \/* \u0627\u0644\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u0646\u0634\u0637\u0629 \u0639\u0646\u062f \u0641\u062a\u062d \u0627\u0644\u0633\u0624\u0627\u0644 *\/\r\n .faq-item.active .faq-content-wrapper {\r\n grid-template-rows: 1fr;\r\n }\r\n .faq-item.active .faq-answer {\r\n padding: 0 28px 24px 28px;\r\n }\r\n .faq-item.active .faq-question {\r\n color: #e08532;\r\n }\r\n .faq-item.active .icon {\r\n transform: rotate(45deg);\r\n }\r\n\r\n \/* --- Assistance --- *\/\r\n .assistance-wrapper {\r\n background: linear-gradient(115deg, #4a321a, #2b1d0e);\r\n border-radius: 40px;\r\n padding: 65px 40px;\r\n text-align: center;\r\n color: white;\r\n }\r\n .btn-outline-light {\r\n background: transparent;\r\n border: 2px solid rgba(255,255,255,0.6);\r\n padding: 14px 38px;\r\n border-radius: 60px;\r\n color: white;\r\n font-weight: 600;\r\n text-decoration: none;\r\n display: inline-block;\r\n margin-top: 20px;\r\n transition: all 0.3s;\r\n }\r\n .btn-outline-light:hover {\r\n background: white;\r\n color: #4a321a;\r\n }\r\n\r\n \/* \u0627\u0644\u062f\u0648\u0627\u0626\u0631 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629 *\/\r\n .dynamic-bg-circles {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: -1;\r\n overflow: hidden;\r\n }\r\n .circle-item {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(242, 153, 74, 0.12);\r\n backdrop-filter: blur(2px);\r\n will-change: transform;\r\n }\r\n \/* \u0623\u0644\u0648\u0627\u0646 \u062f\u0627\u0641\u0626\u0629 \u0645\u062a\u0646\u0648\u0639\u0629 *\/\r\n .circle-item:nth-child(1) { background: rgba(242, 153, 74, 0.08); width: 500px; height: 500px; top: -150px; left: -200px; }\r\n .circle-item:nth-child(2) { background: rgba(211, 84, 0, 0.06); width: 400px; height: 400px; bottom: 10%; right: -150px; }\r\n .circle-item:nth-child(3) { background: rgba(230, 126, 34, 0.1); width: 650px; height: 650px; top: 40%; left: -250px; }\r\n .circle-item:nth-child(4) { background: rgba(243, 156, 18, 0.07); width: 300px; height: 300px; bottom: 20%; left: 20%; }\r\n .circle-item:nth-child(5) { background: rgba(192, 57, 43, 0.05); width: 450px; height: 450px; top: 70%; right: -100px; }\r\n .circle-item:nth-child(6) { background: rgba(242, 153, 74, 0.09); width: 280px; height: 280px; top: 15%; right: 15%; }\r\n @media (max-width: 768px) {\r\n .circle-item { display: none; } \/* \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u062f\u0648\u0627\u0626\u0631 \u0639\u0644\u0649 \u0627\u0644\u0645\u0648\u0628\u0627\u064a\u0644 \u0644\u062e\u0641\u0629 \u0627\u0644\u062a\u0635\u0641\u062d *\/\r\n }\r\n\r\n @media (max-width: 992px) {\r\n .hero-container h1 { font-size: 52px; }\r\n .piliers-grid, .steps-container { grid-template-columns: repeat(2,1fr); }\r\n .testimonial-card { width: 320px; }\r\n .nav-btn { display: none; } \/* \u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0623\u0633\u0647\u0645 \u0641 \u0627\u0644\u0634\u0627\u0634\u0627\u062a \u0627\u0644\u0635\u063a\u064a\u0631\u0629 \u0648\u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f \u0639\u0644\u0649 \u0627\u0644\u0640 Touch *\/\r\n }\r\n @media (max-width: 768px) {\r\n .hero-container { padding: 120px 20px 140px; }\r\n .hero-container h1 { font-size: 40px; }\r\n .section-title { font-size: 30px; }\r\n .piliers-grid, .steps-container { grid-template-columns: 1fr; }\r\n .testimonial-card { width: 290px; }\r\n .faq-question { padding: 18px 20px; font-size: 16px; }\r\n .section-bg-icon { font-size: 80px; bottom: 10px; right: 10px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- HERO (\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0640 tag \u0644\u0640 HTML5 \u062f\u0644\u0627\u0644\u064a \u0648\u0627\u062d\u062a\u0631\u0627\u0641\u064a) -->\r\n <header class=\"hero-section\">\r\n <div class=\"hero-container\">\r\n <div class=\"hero-badge\">\ud83d\ude80 Programme officiel<\/div>\r\n <h1 style=\"color: white\">ELOGHA <span>SUP<\/span><\/h1>\r\n <h2 style=\"color: white\">\u00c0 la Facult\u00e9 d\u2019\u00c9conomie et de Gestion de Guelmim<\/h2>\r\n <p class=\"hero-description\">La FEGG innove avec une plateforme moderne de renforcement linguistique. Pr\u00e9parez-vous \u00e0 une exp\u00e9rience d\u2019apprentissage in\u00e9dite.<\/p>\r\n <a href=\"https:\/\/elogha.uiz.ac.ma\/\" target=\"_blank\" class=\"hero-btn\">Acc\u00e9der \u00e0 la plateforme <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"dynamic-bg-circles\">\r\n <div class=\"circle-item\"><\/div>\r\n <div class=\"circle-item\"><\/div>\r\n <div class=\"circle-item\"><\/div>\r\n <div class=\"circle-item\"><\/div>\r\n <div class=\"circle-item\"><\/div>\r\n <div class=\"circle-item\"><\/div>\r\n <\/div>\r\n <!-- Section 2 : Piliers -->\r\n <section class=\"reveal\">\r\n <div class=\"section-bg-icon\"><i class=\"fas fa-cubes\"><\/i><\/div>\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Les Piliers du Projet<\/h2>\r\n <p class=\"section-subtitle\">Une vision strat\u00e9gique pour l\u2019excellence acad\u00e9mique<\/p>\r\n <\/div>\r\n <div class=\"piliers-grid\">\r\n <div class=\"pilier-card\"><div class=\"tag\"><i class=\"fas fa-microchip\"><\/i> Innovation<\/div><h3>Apprentissage Digital<\/h3><\/div>\r\n <div class=\"pilier-card\"><div class=\"tag\"><i class=\"fas fa-chart-line\"><\/i> Objectif<\/div><h3>Excellence Linguistique<\/h3><\/div>\r\n <div class=\"pilier-card\"><div class=\"tag\"><i class=\"fas fa-university\"><\/i> Vision FEGG<\/div><h3>Universit\u00e9 Moderne<\/h3><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 3 : Vid\u00e9o -->\r\n <section class=\"reveal\">\r\n <div class=\"section-bg-icon\"><i class=\"fas fa-play-circle\"><\/i><\/div>\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">D\u00e9couvrez ELOGHA SUP en 2 minutes<\/h2>\r\n <p class=\"section-subtitle\">Cliquez sur la vid\u00e9o pour voir le fonctionnement<\/p>\r\n <\/div>\r\n <div class=\"video-modern\" id=\"modernVideo\">\r\n <img decoding=\"async\" class=\"video-thumb\" src=\"https:\/\/placehold.co\/1280x720\/4a321a\/ffffff?text=ELOGHA+SUP+Preview\" alt=\"Aper\u00e7u vid\u00e9o\">\r\n <div class=\"play-overlay\">\r\n <div class=\"play-btn\"><i class=\"fas fa-play\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 4 : Comment \u00e7a marche -->\r\n <section class=\"reveal\">\r\n <div class=\"section-bg-icon\"><i class=\"fas fa-compass\"><\/i><\/div>\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Comment \u00e7a marche ?<\/h2>\r\n <p class=\"section-subtitle\">Trois \u00e9tapes simples vers la ma\u00eetrise linguistique<\/p>\r\n <\/div>\r\n <div class=\"steps-container\">\r\n <div class=\"step-card\"><div class=\"step-bg-number\">1<\/div><h3>Cliquez sur Acc\u00e8s<\/h3><p>Rejoignez la plateforme via le portail officiel<\/p><\/div>\r\n <div class=\"step-card\"><div class=\"step-bg-number\">2<\/div><h3>Connectez-vous<\/h3><p>Utilisez votre email acad\u00e9mique (@uiz.ac.ma)<\/p><\/div>\r\n <div class=\"step-card\"><div class=\"step-bg-number\">3<\/div><h3>Apprenez \u00e0 votre rythme<\/h3><p>Modules interactifs, quiz, et suivi personnalis\u00e9<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 5 : T\u00e9moignages (\u0645\u0639 \u0627\u0644\u0623\u0633\u0647\u0645 \u0648\u0627\u0644\u062a\u062d\u0633\u064a\u0646\u0627\u062a) -->\r\n <section class=\"reveal\">\r\n <div class=\"section-bg-icon\"><i class=\"fas fa-comment-dots\"><\/i><\/div>\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Ils en parlent<\/h2>\r\n <p class=\"section-subtitle\">Avis d\u2019\u00e9tudiants et d\u2019enseignants<\/p>\r\n <\/div>\r\n <div class=\"testimonials-carousel-container\">\r\n <div class=\"testimonials-wrapper-outer\">\r\n <button class=\"nav-btn prev\" id=\"prevBtn\"><i class=\"fas fa-chevron-left\" style=\"color:black\"><\/i><\/button>\r\n <div class=\"testimonials-scroll\" id=\"testimonialScroll\">\r\n <div class=\"testimonials-flex\">\r\n <div class=\"testimonial-card\"><div class=\"quote-icon\">\u201c<\/div><p class=\"testimonial-text\">Plateforme g\u00e9niale, j\u2019ai gagn\u00e9 en confiance \u00e0 l\u2019oral.<\/p><div class=\"testimonial-author\"><div class=\"avatar\">A<\/div><div><h4>Amira L.<\/h4><p>\u00c9tudiante S3<\/p><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><div class=\"quote-icon\">\u201c<\/div><p class=\"testimonial-text\">Un outil p\u00e9dagogique remarquable, mes \u00e9tudiants progressent vite.<\/p><div class=\"testimonial-author\"><div class=\"avatar\">R<\/div><div><h4>Pr. Rachid M.<\/h4><p>\u00c9conomie<\/p><\/div><\/div><\/div>\r\n <div class=\"testimonial-card\"><div class=\"quote-icon\">\u201c<\/div><p class=\"testimonial-text\">Des ressources vari\u00e9es et modernes, j\u2019adore l\u2019interface.<\/p><div class=\"testimonial-author\"><div class=\"avatar\">S<\/div><div><h4>Salma R.<\/h4><p>Master FEGG<\/p><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"nav-btn next\" id=\"nextBtn\"><i class=\"fas fa-chevron-right\" style=\"color:black\"><\/i><\/button>\r\n <\/div>\r\n <div class=\"carousel-dots\" id=\"carouselDots\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 6 : FAQ -->\r\n <section class=\"reveal\">\r\n <div class=\"section-bg-icon\"><i class=\"fas fa-question-circle\"><\/i><\/div>\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Foire aux questions<\/h2>\r\n <p class=\"section-subtitle\">Toutes les r\u00e9ponses \u00e0 vos interrogations<\/p>\r\n <\/div>\r\n <div class=\"faq-accordion\" id=\"faqAccordion\">\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">Quand la plateforme sera-t-elle accessible \u00e0 la FEGG ? <span class=\"icon\">+<\/span><\/div>\r\n <div class=\"faq-content-wrapper\"><div class=\"faq-answer\">L\u2019acc\u00e8s sera progressif d\u00e8s la rentr\u00e9e universitaire prochaine. Un email officiel sera envoy\u00e9 \u00e0 tous les \u00e9tudiants.<\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">Faut-il des comp\u00e9tences techniques particuli\u00e8res ? <span class=\"icon\">+<\/span><\/div>\r\n <div class=\"faq-content-wrapper\"><div class=\"faq-answer\">Non, l\u2019interface est ultra-intuitive. Une s\u00e9ance de prise en main est pr\u00e9vue.<\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">Est-ce que la formation est obligatoire ? <span class=\"icon\">+<\/span><\/div>\r\n <div class=\"faq-content-wrapper\"><div class=\"faq-answer\">Elle est vivement recommand\u00e9e, car elle booste vos chances de r\u00e9ussite. Non obligatoire mais fortement conseill\u00e9e.<\/div><\/div>\r\n <\/div>\r\n <div class=\"faq-item\">\r\n <div class=\"faq-question\">Comment obtenir mon compte ? <span class=\"icon\">+<\/span><\/div>\r\n <div class=\"faq-content-wrapper\"><div class=\"faq-answer\">Utilisez vos identifiants acad\u00e9miques habituels (messagerie @uiz.ac.ma).<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Section 7 : Assistance -->\r\n <section class=\"reveal\">\r\n <div class=\"assistance-wrapper\">\r\n <h2 style=\"color:white\"><i class=\"fas fa-headset\"><\/i> Besoin d\u2019aide ?<\/h2>\r\n <p>Utilisez votre email acad\u00e9mique. En cas de difficult\u00e9, le support FEGG est \u00e0 votre disposition.<\/p>\r\n <a href=\"#\" class=\"btn-outline-light\" id=\"pdfGuide\">\ud83d\udcd8 Guide d\u2019utilisation (PDF)<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0640 Scroll animation (\u062a\u0623\u062b\u064a\u0631 \u062f\u062e\u0648\u0644 \u0633\u0644\u0633)\r\n const reveals = document.querySelectorAll('.reveal');\r\n const obs = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { \r\n if(e.isIntersecting) { \r\n e.target.classList.add('active'); \r\n obs.unobserve(e.target); \r\n } \r\n });\r\n }, { threshold: 0.15, rootMargin: \"0px 0px -50px 0px\" });\r\n reveals.forEach(r => obs.observe(r));\r\n\r\n \/\/ \u0625\u0635\u0644\u0627\u062d \u0648\u062a\u0639\u062f\u064a\u0644 \u0641\u064a\u062f\u064a\u0648 \u064a\u0648\u062a\u064a\u0648\u0628 (Embed Link)\r\n const videoContainer = document.getElementById('modernVideo');\r\n videoContainer.addEventListener('click', function() {\r\n const iframe = document.createElement('iframe');\r\n iframe.classList.add('video-iframe');\r\n iframe.src = \"https:\/\/www.youtube.com\/embed\/ZGcw5oC0xsc?autoplay=1\";\r\n iframe.allow = \"autoplay; encrypted-media\";\r\n iframe.allowFullscreen = true;\r\n videoContainer.innerHTML = '';\r\n videoContainer.appendChild(iframe);\r\n });\r\n\r\n \/\/ \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0643\u0627\u0631\u0648\u0633\u064a\u0644 \u0648\u0627\u0644\u062a\u062d\u0643\u0645 \u0628\u0627\u0644\u0623\u0633\u0647\u0645 \u0648\u0627\u0644\u0640 Dots\r\n const scrollDiv = document.getElementById('testimonialScroll');\r\n const dotsContainer = document.getElementById('carouselDots');\r\n const cards = document.querySelectorAll('.testimonial-card');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n const totalCards = cards.length;\r\n\r\n function getCardWidth() {\r\n return cards[0].offsetWidth + 30; \/\/ Card width + gap\r\n }\r\n\r\n function updateDots() {\r\n const scrollLeft = scrollDiv.scrollLeft;\r\n const activeIndex = Math.round(scrollLeft \/ getCardWidth());\r\n document.querySelectorAll('.dot').forEach((dot, idx) => {\r\n if(idx === activeIndex) dot.classList.add('active');\r\n else dot.classList.remove('active');\r\n });\r\n }\r\n\r\n function createDots() {\r\n dotsContainer.innerHTML = '';\r\n for(let i=0; i<totalCards; i++) {\r\n const dot = document.createElement('div');\r\n dot.classList.add('dot');\r\n if(i===0) dot.classList.add('active');\r\n dot.addEventListener('click', () => {\r\n scrollDiv.scrollTo({ left: getCardWidth() * i, behavior: 'smooth' });\r\n });\r\n dotsContainer.appendChild(dot);\r\n }\r\n }\r\n\r\n \/\/ \u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0623\u0633\u0647\u0645 (Navigation)\r\n nextBtn.addEventListener('click', () => {\r\n scrollDiv.scrollBy({ left: getCardWidth(), behavior: 'smooth' });\r\n });\r\n\r\n prevBtn.addEventListener('click', () => {\r\n scrollDiv.scrollBy({ left: -getCardWidth(), behavior: 'smooth' });\r\n });\r\n\r\n createDots();\r\n scrollDiv.addEventListener('scroll', updateDots);\r\n window.addEventListener('resize', updateDots);\r\n\r\n \/\/ \u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0640 FAQ \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a \u0648\u0627\u0644\u0645\u0646\u0633\u0627\u0628 \u0645\u0639 \u0625\u063a\u0644\u0627\u0642 \u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0623\u062e\u0631\u0649 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b\r\n const faqItems = document.querySelectorAll('.faq-item');\r\n faqItems.forEach(item => {\r\n const q = item.querySelector('.faq-question');\r\n q.addEventListener('click', () => {\r\n const isActive = item.classList.contains('active');\r\n \r\n \/\/ \u0625\u063a\u0644\u0627\u0642 \u0623\u064a \u0633\u0624\u0627\u0644 \u0645\u0641\u062a\u0648\u062d \u0622\u062e\u0631\r\n faqItems.forEach(el => {\r\n el.classList.remove('active');\r\n el.querySelector('.icon').textContent = '+';\r\n });\r\n\r\n \/\/ \u0641\u062a\u062d \u0627\u0644\u0633\u0624\u0627\u0644 \u0627\u0644\u062d\u0627\u0644\u064a \u0625\u0630\u0627 \u0644\u0645 \u064a\u0643\u0646 \u0645\u0641\u062a\u0648\u062d\u0627\u064b \u0645\u0646 \u0642\u0628\u0644\r\n if (!isActive) {\r\n item.classList.add('active');\r\n q.querySelector('.icon').textContent = '\u2212';\r\n }\r\n });\r\n });\r\n\r\n \/\/ \u0627\u0644\u0640 PDF alert\r\n document.getElementById('pdfGuide').addEventListener('click', (e) => {\r\n e.preventDefault();\r\n alert(\"\ud83d\udcc4 Le guide officiel sera disponible prochainement sur la plateforme ELOGHA SUP.\");\r\n });\r\n\r\n (function() {\r\n \/\/ \u0627\u062e\u062a\u064a\u0627\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u062f\u0648\u0627\u0626\u0631\r\n const circles = document.querySelectorAll('.circle-item');\r\n if (circles.length === 0) return;\r\n\r\n \/\/ \u0633\u0631\u0639\u0627\u062a \u0645\u062e\u062a\u0644\u0641\u0629 \u0644\u0643\u0644 \u062f\u0627\u0626\u0631\u0629 (\u062a\u0623\u062b\u064a\u0631 paralax)\r\n const speeds = [0.12, -0.08, 0.18, -0.05, 0.1, -0.15];\r\n \r\n \/\/ \u0627\u0644\u062f\u0648\u0627\u0644 \u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0644\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0623\u0648\u0644\u064a\u0629 (\u062d\u0641\u0638 \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629)\r\n let initialPositions = [];\r\n circles.forEach((circle, idx) => {\r\n const rect = circle.getBoundingClientRect();\r\n initialPositions.push({\r\n top: rect.top + window.scrollY,\r\n left: rect.left\r\n });\r\n });\r\n\r\n function updateCircles() {\r\n const scrollY = window.pageYOffset;\r\n circles.forEach((circle, idx) => {\r\n const speed = speeds[idx % speeds.length];\r\n const translateY = scrollY * speed;\r\n const initial = initialPositions[idx];\r\n if (initial) {\r\n \/\/ \u0646\u0637\u0628\u0642 \u0627\u0644\u062d\u0631\u0643\u0629 \u0645\u0639 \u0628\u0642\u0627\u0626\u0647\u0627 \u0641\u064a \u0627\u0644\u0646\u0637\u0627\u0642 \u0627\u0644\u0637\u0628\u064a\u0639\u064a\r\n circle.style.transform = `translateY(${translateY}px)`;\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0648\u0636\u0639 \u0639\u0646\u062f \u0627\u0644\u062a\u0645\u0631\u064a\u0631\r\n window.addEventListener('scroll', updateCircles);\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0623\u0648\u0644\u064a \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\r\n window.addEventListener('resize', () => {\r\n \/\/ \u0625\u0639\u0627\u062f\u0629 \u062d\u0633\u0627\u0628 \u0627\u0644\u0645\u0648\u0627\u0636\u0639 \u0627\u0644\u0623\u0635\u0644\u064a\u0629 \u0639\u0646\u062f \u062a\u063a\u064a\u064a\u0631 \u062d\u062c\u0645 \u0627\u0644\u0634\u0627\u0634\u0629\r\n circles.forEach((circle, idx) => {\r\n const rect = circle.getBoundingClientRect();\r\n initialPositions[idx] = {\r\n top: rect.top + window.scrollY,\r\n left: rect.left\r\n };\r\n });\r\n updateCircles();\r\n });\r\n \r\n updateCircles();\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ELOGHA SUP – FEGG Guelmim | Design Moderne & Dynamique \ud83d\ude80 Programme officiel ELOGHA SUP \u00c0 la Facult\u00e9 d\u2019\u00c9conomie et de Gestion de Guelmim La FEGG innove avec une plateforme moderne de renforcement linguistique. Pr\u00e9parez-vous \u00e0 une exp\u00e9rience d\u2019apprentissage in\u00e9dite. Acc\u00e9der \u00e0 la plateforme Les Piliers du Projet Une vision strat\u00e9gique pour l\u2019excellence acad\u00e9mique Innovation …<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/fegg.uiz.ac.ma\/?page_id=3974\"> <span class=\"screen-reader-text\">Elogha-Sup – v2<\/span> Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"acf":[],"_links":{"self":[{"href":"https:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/pages\/3974"}],"collection":[{"href":"https:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fegg.uiz.ac.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3974"}],"version-history":[{"count":25,"href":"https:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/pages\/3974\/revisions"}],"predecessor-version":[{"id":4001,"href":"https:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/pages\/3974\/revisions\/4001"}],"wp:attachment":[{"href":"https:\/\/fegg.uiz.ac.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}