{"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-03T01:17:46","modified_gmt":"2026-06-03T00:17:46","slug":"elogha-sup-start","status":"publish","type":"page","link":"http:\/\/fegg.uiz.ac.ma\/?page_id=3974","title":{"rendered":"Elogha-Sup"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3974\" class=\"elementor elementor-3974\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-04862a5 e-con-full animated-slow elementor-invisible e-con\" data-id=\"04862a5\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;,&quot;animation&quot;:&quot;fadeIn&quot;,&quot;animation_delay&quot;:500}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-479493c elementor-widget elementor-widget-html\" data-id=\"479493c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!doctype html>\n<html lang=\"fr\">\n  <head>\n    <meta charset=\"UTF-8\" \/>\n    <meta\n      name=\"viewport\"\n      content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"\n    \/>\n    <title>ELOGHA SUP - FEGG Guelmim | Design Moderne & Dynamique<\/title>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\n    <link\n      href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\"\n      rel=\"stylesheet\"\n    \/>\n    <!-- Font Awesome 6 -->\n    <link\n      rel=\"stylesheet\"\n      href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\"\n    \/>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      body {\n        font-family: \"Plus Jakarta Sans\", sans-serif;\n        background-color: #faf6f0;\n        color: #2d3748;\n        overflow-x: hidden;\n      }\n\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 --- *\/\n      .reveal {\n        opacity: 0;\n        transform: translateY(50px) scale(0.98);\n        transition:\n          opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1),\n          transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);\n        will-change: transform, opacity;\n      }\n      .reveal.active {\n        opacity: 1;\n        transform: translateY(0) scale(1);\n      }\n\n      .section-bg-icon {\n        position: absolute;\n        bottom: 20px;\n        right: 20px;\n        font-size: 120px;\n        opacity: 0.06;\n        pointer-events: none;\n        z-index: 0;\n        font-family: \"Font Awesome 6 Free\";\n        font-weight: 900;\n      }\n\n      section {\n        position: relative;\n        overflow: hidden;\n        padding: 100px 24px;\n        max-width: 1200px;\n        margin: 0 auto;\n      }\n\n      .section-header {\n        text-align: center;\n        margin-bottom: 55px;\n        position: relative;\n        z-index: 2;\n      }\n      .section-title {\n        font-size: 38px;\n        font-weight: 800;\n        color: #4a321a;\n        margin-bottom: 12px;\n      }\n      .section-subtitle {\n        font-size: 17px;\n        color: #718096;\n        max-width: 650px;\n        margin: 0 auto;\n      }\n\n      \/* ---------- HERO SECTION (\u0645\u0639 \u0645\u0643\u0627\u0646 \u0627\u0644\u0635\u0648\u0631\u0629) ---------- *\/\n      .hero-section {\n        padding: 0;\n        max-width: 100%;\n\n        background:\n          linear-gradient(\n            135deg,\n            rgba(43, 29, 14, 0.843) 0%,\n            rgba(74, 50, 26, 0.568) 100%\n          ),\n          url(\"http:\/\/fegg.uiz.ac.ma\/wp-content\/uploads\/2026\/06\/Photos_9lAJzmZkUq.jpg\")\n            no-repeat center center\/cover;\n\n        color: white;\n        position: relative;\n        overflow: hidden;\n      }\n      .hero-section::before {\n        content: \"\";\n        position: absolute;\n        top: -50%;\n        left: -30%;\n        width: 80%;\n        height: 200%;\n        background: radial-gradient(\n          circle,\n          rgba(242, 153, 74, 0.15) 0%,\n          rgba(0, 0, 0, 0) 70%\n        );\n        transform: rotate(25deg);\n        pointer-events: none;\n      }\n      .hero-container {\n        max-width: 1100px;\n        margin: 0 auto;\n        padding: 160px 24px 180px;\n        text-align: center;\n        position: relative;\n        z-index: 2;\n      }\n      .hero-badge {\n        background: rgba(255, 255, 255, 0.15);\n        backdrop-filter: blur(8px);\n        display: inline-block;\n        padding: 8px 28px;\n        border-radius: 60px;\n        font-size: 13px;\n        font-weight: 600;\n        letter-spacing: 2px;\n        margin-bottom: 30px;\n        border: 1px solid rgba(255, 255, 255, 0.3);\n      }\n      .hero-container h1 {\n        font-size: 70px;\n        font-weight: 800;\n        line-height: 1.1;\n        margin-bottom: 20px;\n      }\n      span {\n        color: #f2994a;\n        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n      }\n      .hero-container h1 span {\n        color: #f2994a;\n        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n      }\n      .hero-container h2 {\n        font-size: 22px;\n        font-weight: 500;\n        opacity: 0.9;\n        margin-bottom: 30px;\n      }\n      .hero-description {\n        font-size: 18px;\n        max-width: 700px;\n        margin: 0 auto 45px;\n        opacity: 0.85;\n        line-height: 1.6;\n      }\n      .hero-btn {\n        background: #f2994a;\n        color: white;\n        padding: 18px 48px;\n        border-radius: 60px;\n        font-weight: 700;\n        text-decoration: none;\n        display: inline-block;\n        transition:\n          transform 0.3s,\n          box-shadow 0.3s,\n          background 0.3s;\n        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);\n      }\n      .hero-btn:hover {\n        transform: translateY(-5px);\n        background: #e08532;\n        box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);\n      }\n\n      \/* --- Piliers --- *\/\n      .piliers-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 35px;\n      }\n      .pilier-card {\n        background: rgba(255, 255, 255, 0.7);\n        backdrop-filter: blur(8px);\n        border-radius: 28px;\n        padding: 45px 25px;\n        text-align: center;\n        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\n        border: 1px solid rgba(74, 50, 26, 0.08);\n        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02);\n      }\n      .pilier-card:hover {\n        transform: translateY(-12px);\n        background: white;\n        border-color: rgba(242, 153, 74, 0.3);\n        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.08);\n      }\n      .pilier-card .tag {\n        font-size: 14px;\n        font-weight: 700;\n        color: #e08532;\n        text-transform: uppercase;\n        letter-spacing: 2px;\n      }\n      .pilier-card h3 {\n        font-size: 24px;\n        margin-top: 15px;\n        color: #4a321a;\n      }\n\n      \/* --- Vid\u00e9o --- *\/\n      .video-modern {\n        max-width: 900px;\n        margin: 0 auto;\n        border-radius: 32px;\n        overflow: hidden;\n        position: relative;\n        cursor: pointer;\n        box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);\n      }\n      .video-thumb {\n        width: 100%;\n        aspect-ratio: 16\/9;\n        object-fit: cover;\n        display: block;\n        transition: transform 0.4s;\n      }\n      .video-modern:hover .video-thumb {\n        transform: scale(1.02);\n      }\n      .play-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.3);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: background 0.3s;\n      }\n      .play-btn {\n        background: rgba(242, 153, 74, 0.9);\n        width: 80px;\n        height: 80px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 40px;\n        color: white;\n        backdrop-filter: blur(4px);\n        transition: transform 0.2s;\n      }\n      .video-modern:hover .play-btn {\n        transform: scale(1.1);\n        background: #f2994a;\n      }\n      .video-iframe {\n        width: 100%;\n        aspect-ratio: 16\/9;\n        border: none;\n      }\n\n      \/* --- Comment \u00e7a marche --- *\/\n      .steps-container {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 40px;\n      }\n      .step-card {\n        background: white;\n        border-radius: 28px;\n        padding: 50px 30px 40px;\n        text-align: center;\n        position: relative;\n        overflow: hidden;\n        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.03);\n        transition: all 0.3s;\n      }\n      .step-card:hover {\n        transform: translateY(-8px);\n        box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08);\n      }\n      .step-bg-number {\n        font-size: 110px;\n        font-weight: 800;\n        color: rgba(74, 50, 26, 0.05);\n        position: absolute;\n        bottom: -10px;\n        right: 0px;\n        line-height: 1;\n        pointer-events: none;\n        font-family: monospace;\n      }\n      .step-card h3 {\n        font-size: 22px;\n        color: #4a321a;\n        margin-bottom: 15px;\n        font-weight: 700;\n      }\n      .step-card p {\n        color: #718096;\n        font-size: 15px;\n      }\n\n      \/* --- T\u00e9moignages (\u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0623\u0633\u0647\u0645 \u0627\u0644\u062c\u062f\u064a\u062f\u0629) --- *\/\n      .testimonials-carousel-container {\n        position: relative;\n        max-width: 100%;\n      }\n      .testimonials-wrapper-outer {\n        position: relative;\n        display: flex;\n        align-items: center;\n      }\n      .testimonials-scroll {\n        overflow-x: auto;\n        scroll-behavior: smooth;\n        -webkit-overflow-scrolling: touch;\n        scrollbar-width: none;\n        padding: 20px 0;\n        width: 100%;\n      }\n      .testimonials-scroll::-webkit-scrollbar {\n        display: none;\n      }\n      .testimonials-flex {\n        display: flex;\n        gap: 30px;\n        width: max-content;\n      }\n      .testimonial-card {\n        \/* width: 380px;\n        background: white;\n        border-radius: 28px;\n        padding: 32px;\n        flex-shrink: 0;\n        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.04); *\/\n          width: 380px;\n          background: white;\n          border-radius: 28px;\n          padding: 32px;\n          flex-shrink: 0;\n          box-shadow: 0 12px 28px rgba(0, 0, 0, 0.04);\n\n          display: flex;\n          flex-direction: column;\n      }\n      .quote-icon {\n        font-size: 50px;\n        color: #f2994a;\n        opacity: 0.3;\n        margin-bottom: 16px;\n      }\n      .testimonial-text {\n        font-size: 16px;\n        margin-bottom: 20px;\n        font-style: italic;\n        flex-grow: 1;\n      }\n      .testimonial-author {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-top: auto;\n      }\n      .avatar {\n        width: 48px;\n        height: 48px;\n        background: #f2994a;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: bold;\n        font-size: 20px;\n        color: white;\n      }\n\n      \/* \u062a\u0635\u0645\u064a\u0645 \u0623\u0633\u0647\u0645 \u0627\u0644\u062a\u0646\u0642\u0644 \u0644\u0644\u0640 Testimonials *\/\n      .nav-btn {\n        background: white;\n        border: 1px solid rgba(74, 50, 26, 0.15);\n        width: 46px;\n        height: 46px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        position: absolute;\n        z-index: 10;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);\n        transition: all 0.3s;\n        color: #4a321a;\n      }\n      .nav-btn:hover {\n        background: #f2994a;\n        color: white;\n        border-color: #f2994a;\n        transform: scale(1.05);\n      }\n      .nav-btn.prev {\n        left: -20px;\n      }\n      .nav-btn.next {\n        right: -20px;\n      }\n\n      .carousel-dots {\n        display: flex;\n        justify-content: center;\n        gap: 12px;\n        margin-top: 15px;\n      }\n      .dot {\n        width: 12px;\n        height: 12px;\n        background: #cbd5e0;\n        border-radius: 50%;\n        cursor: pointer;\n        transition: 0.3s;\n      }\n      .dot.active {\n        background: #f2994a;\n        width: 28px;\n        border-radius: 10px;\n      }\n\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 --- *\/\n      .faq-accordion {\n        max-width: 850px;\n        margin: 0 auto;\n      }\n      .faq-item {\n        background: white;\n        border-radius: 24px;\n        margin-bottom: 18px;\n        overflow: hidden;\n        box-shadow: 0 5px 18px rgba(0, 0, 0, 0.01);\n        border: 1px solid rgba(0, 0, 0, 0.03);\n      }\n      .faq-question {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 22px 28px;\n        font-weight: 700;\n        font-size: 18px;\n        color: #4a321a;\n        cursor: pointer;\n        background: white;\n        transition:\n          background 0.2s,\n          color 0.2s;\n        user-select: none;\n      }\n      .faq-question:hover {\n        background: #fef7ec;\n      }\n      .faq-question .icon {\n        font-size: 22px;\n        color: #f2994a;\n        transition: transform 0.3s ease;\n      }\n\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) *\/\n      .faq-content-wrapper {\n        display: grid;\n        grid-template-rows: 0fr;\n        transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n      }\n      .faq-answer {\n        overflow: hidden;\n        color: #4a5568;\n        font-size: 16px;\n        line-height: 1.6;\n        padding: 0 28px;\n        transition: padding 0.4s cubic-bezier(0.25, 1, 0.5, 1);\n      }\n\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 *\/\n      .faq-item.active .faq-content-wrapper {\n        grid-template-rows: 1fr;\n      }\n      .faq-item.active .faq-answer {\n        padding: 0 28px 24px 28px;\n      }\n      .faq-item.active .faq-question {\n        color: #e08532;\n      }\n      .faq-item.active .icon {\n        transform: rotate(45deg);\n      }\n\n      \/* --- Assistance --- *\/\n      .assistance-wrapper {\n        background: linear-gradient(115deg, #4a321a, #2b1d0e);\n        border-radius: 40px;\n        padding: 65px 40px;\n        text-align: center;\n        color: white;\n      }\n      .btn-outline-light {\n        background: transparent;\n        border: 2px solid rgba(255, 255, 255, 0.6);\n        padding: 14px 38px;\n        border-radius: 60px;\n        color: white;\n        font-weight: 600;\n        text-decoration: none;\n        display: inline-block;\n        margin-top: 20px;\n        transition: all 0.3s;\n      }\n      .btn-outline-light:hover {\n        background: white;\n        color: #4a321a;\n      }\n\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 *\/\n      .dynamic-bg-circles {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        pointer-events: none;\n        z-index: -1;\n        overflow: hidden;\n      }\n      .circle-item {\n        position: absolute;\n        border-radius: 50%;\n        background: rgba(242, 153, 74, 0.12);\n        backdrop-filter: blur(2px);\n        will-change: transform;\n      }\n      \/* \u0623\u0644\u0648\u0627\u0646 \u062f\u0627\u0641\u0626\u0629 \u0645\u062a\u0646\u0648\u0639\u0629 *\/\n      .circle-item:nth-child(1) {\n        background: rgba(242, 153, 74, 0.08);\n        width: 500px;\n        height: 500px;\n        top: -150px;\n        left: -200px;\n      }\n      .circle-item:nth-child(2) {\n        background: rgba(211, 84, 0, 0.06);\n        width: 400px;\n        height: 400px;\n        bottom: 10%;\n        right: -150px;\n      }\n      .circle-item:nth-child(3) {\n        background: rgba(230, 126, 34, 0.1);\n        width: 650px;\n        height: 650px;\n        top: 40%;\n        left: -250px;\n      }\n      .circle-item:nth-child(4) {\n        background: rgba(243, 156, 18, 0.07);\n        width: 300px;\n        height: 300px;\n        bottom: 20%;\n        left: 20%;\n      }\n      .circle-item:nth-child(5) {\n        background: rgba(192, 57, 43, 0.05);\n        width: 450px;\n        height: 450px;\n        top: 70%;\n        right: -100px;\n      }\n      .circle-item:nth-child(6) {\n        background: rgba(242, 153, 74, 0.09);\n        width: 280px;\n        height: 280px;\n        top: 15%;\n        right: 15%;\n      }\n      @media (max-width: 768px) {\n        .circle-item {\n          display: none;\n        } \/* \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 *\/\n      }\n\n      @media (max-width: 992px) {\n        .hero-container h1 {\n          font-size: 52px;\n        }\n        .piliers-grid,\n        .steps-container {\n          grid-template-columns: repeat(2, 1fr);\n        }\n        .testimonial-card {\n          width: 320px;\n        }\n        .nav-btn {\n          display: none;\n        } \/* \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 *\/\n      }\n      @media (max-width: 768px) {\n        .hero-container {\n          padding: 120px 20px 140px;\n        }\n        .hero-container h1 {\n          font-size: 40px;\n        }\n        .section-title {\n          font-size: 30px;\n        }\n        .piliers-grid,\n        .steps-container {\n          grid-template-columns: 1fr;\n        }\n        .testimonial-card {\n          width: 290px;\n        }\n        .faq-question {\n          padding: 18px 20px;\n          font-size: 16px;\n        }\n        .section-bg-icon {\n          font-size: 80px;\n          bottom: 10px;\n          right: 10px;\n        }\n      }\n    <\/style>\n  <\/head>\n  <body>\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) -->\n    <header class=\"hero-section\">\n      <div class=\"hero-container\">\n        <div class=\"hero-badge\">\ud83d\ude80 Programme officiel<\/div>\n        <h1 style=\"color: white\">ELOGHA <span>SUP<\/span><\/h1>\n        <h2 style=\"color: white\">\n          \u00c0 la Facult\u00e9 d\u2019\u00c9conomie et de Gestion de Guelmim\n        <\/h2>\n        <p class=\"hero-description\">\n          La FEGG innove avec une plateforme moderne de renforcement\n          linguistique. Pr\u00e9parez-vous \u00e0 une exp\u00e9rience d\u2019apprentissage in\u00e9dite.\n        <\/p>\n        <a href=\"https:\/\/elogha-sup.uiz.ac.ma\/\" target=\"_blank\" class=\"hero-btn\"\n          >Acc\u00e9der \u00e0 la plateforme <i class=\"fas fa-arrow-right\"><\/i\n        ><\/a>\n      <\/div>\n    <\/header>\n\n    <div class=\"dynamic-bg-circles\">\n      <div class=\"circle-item\"><\/div>\n      <div class=\"circle-item\"><\/div>\n      <div class=\"circle-item\"><\/div>\n      <div class=\"circle-item\"><\/div>\n      <div class=\"circle-item\"><\/div>\n      <div class=\"circle-item\"><\/div>\n    <\/div>\n    <!-- Section 2 : Piliers -->\n    <section class=\"reveal\">\n      <div class=\"section-bg-icon\"><i class=\"fas fa-cubes\"><\/i><\/div>\n      <div class=\"section-header\">\n        <h2 class=\"section-title\">\n          Une vision strat\u00e9gique pour l\u2019excellence <span>acad\u00e9mique<\/span>\n        <\/h2>\n        <p class=\"section-subtitle\">Une approche moderne et immersive pour renforcer vos comp\u00e9tences acad\u00e9miques et professionnelles.<\/p>\n      <\/div>\n      <div class=\"piliers-grid\">\n        <div class=\"pilier-card\">\n          <div class=\"tag\"><i class=\"fas fa-microchip\"><\/i> Innovation<\/div>\n          <h3>Apprentissage Digital<\/h3>\n        <\/div>\n        <div class=\"pilier-card\">\n          <div class=\"tag\"><i class=\"fas fa-chart-line\"><\/i> Objectif<\/div>\n          <h3>Excellence Linguistique<\/h3>\n        <\/div>\n        <div class=\"pilier-card\">\n          <div class=\"tag\"><i class=\"fas fa-university\"><\/i> Vision FEGG<\/div>\n          <h3>Universit\u00e9 Moderne<\/h3>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- Section 3 : Vid\u00e9o -->\n    <section class=\"reveal\">\n      <div class=\"section-bg-icon\"><i class=\"fas fa-play-circle\"><\/i><\/div>\n      <div class=\"section-header\">\n        <h2 class=\"section-title\">\n          D\u00e9couvrez <span> ELOGHA SUP <\/span> en 2 minutes\n        <\/h2>\n        <p class=\"section-subtitle\">\n          Cliquez sur la vid\u00e9o pour voir le fonctionnement\n        <\/p>\n      <\/div>\n      <div class=\"video-modern\" id=\"modernVideo\">\n        <img\n          class=\"video-thumb\"\n          src=\"https:\/\/placehold.co\/1280x720\/4a321a\/ffffff?text=ELOGHA+SUP+Preview\"\n          alt=\"Aper\u00e7u vid\u00e9o\"\n        \/>\n        <div class=\"play-overlay\">\n          <div class=\"play-btn\"><i class=\"fas fa-play\"><\/i><\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- Section 4 : Comment \u00e7a marche -->\n    <section class=\"reveal\">\n      <div class=\"section-bg-icon\"><i class=\"fas fa-compass\"><\/i><\/div>\n      <div class=\"section-header\">\n        <h2 class=\"section-title\">\n          Comment \u00e7a marche <span> ELOGHA SUP <\/span> ?\n        <\/h2>\n        <p class=\"section-subtitle\">\n          Trois \u00e9tapes simples vers la ma\u00eetrise linguistique\n        <\/p>\n      <\/div>\n      <div class=\"steps-container\">\n        <div class=\"step-card\">\n          <div class=\"step-bg-number\">1<\/div>\n          <h3>Cliquez sur Acc\u00e8s<\/h3>\n          <p>Rejoignez la plateforme via le portail officiel<\/p>\n        <\/div>\n        <div class=\"step-card\">\n          <div class=\"step-bg-number\">2<\/div>\n          <h3>Connectez-vous<\/h3>\n          <p>Utilisez votre email acad\u00e9mique (@edu.uiz.ac.ma)<\/p>\n        <\/div>\n        <div class=\"step-card\">\n          <div class=\"step-bg-number\">3<\/div>\n          <h3>Apprenez \u00e0 votre rythme<\/h3>\n          <p>Modules interactifs, quiz, et suivi personnalis\u00e9<\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- Section 5 : T\u00e9moignages (\u0645\u0639 \u0627\u0644\u0623\u0633\u0647\u0645 \u0648\u0627\u0644\u062a\u062d\u0633\u064a\u0646\u0627\u062a) -->\n    <section class=\"reveal\">\n      <div class=\"section-bg-icon\"><i class=\"fas fa-comment-dots\"><\/i><\/div>\n      <div class=\"section-header\">\n        <h2 class=\"section-title\">Une <span>exp\u00e9rience<\/span> qui fait la diff\u00e9rence <\/h2>\n        <p class=\"section-subtitle\">\u00c9tudiants en licence et master partagent leur exp\u00e9rience avec <span>ELOGHA SUP<\/span>.<\/p>\n      <\/div>\n      <div class=\"testimonials-carousel-container\">\n        <div class=\"testimonials-wrapper-outer\">\n          <button class=\"nav-btn prev\" id=\"prevBtn\">\n            <i class=\"fas fa-chevron-left\" style=\"color: black\"><\/i>\n          <\/button>\n          <div class=\"testimonials-scroll\" id=\"testimonialScroll\">\n            <div class=\"testimonials-flex\">\n              <div class=\"testimonial-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testimonial-text\">\n                  J'\u00e9tais convaincue qu'apprendre une nouvelle langue \u00e9tait\n                  impossible pour moi sans avoir un background acad\u00e9mique. Gr\u00e2ce\n                  \u00e0 Elogha SUP, j'ai compris que la m\u00e9thode \u00e9tait le secret.\n                  Passer du niveau \"aucune connaissance\" \u00e0 pouvoir tenir une\n                  conversation technique fluide en quelques mois est une\n                  prouesse que je n'aurais jamais imagin\u00e9e. Les simulations\n                  r\u00e9alistes d'Elogha SUP ont non seulement am\u00e9lior\u00e9 ma\n                  prononciation, mais m'ont donn\u00e9 la confiance n\u00e9cessaire pour\n                  mes pr\u00e9sentations en groupe. C'est un outil d'apprentissage\n                  indispensable pour tout \u00e9tudiant ambitieux !\n                <\/p>\n                <div class=\"testimonial-author\">\n                  <div class=\"avatar\">S<\/div>\n                  <div>\n                    <h4>Said Choukrade.<\/h4>\n                    <p>\u00c9tudiante en Ing\u00e9nierie \u00c9conomique<\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"testimonial-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testimonial-text\">\n                  \u00ab Dans le domaine de la comptabilit\u00e9 internationale, les\n                  \u00e9changes sont cruciaux. Elogha SUP n'est pas juste un cours ;\n                  c'est un simulateur de contexte professionnel. Pouvoir\n                  discuter de 'bilans' ou d'audits avec clart\u00e9 a chang\u00e9 ma\n                  perspective sur mon avenir. Un atout majeur pour ma carri\u00e8re\n                  que je n'aurais pas trouv\u00e9 ailleurs. \u00bb\n                <\/p>\n                <div class=\"testimonial-author\">\n                  <div class=\"avatar\">A<\/div>\n                  <div>\n                    <h4 class=\"author-name\">Aiman Maini.<\/h4>\n                    <p class=\"author-title\">\n                      \u00c9tudiant Comptabilit\u00e9 Control et Audit\n                    <\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"testimonial-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testimonial-text\">\n                  \u00ab Ce que j'ai ador\u00e9 avec Elogha SUP, ce sont les modules\n                  interactifs qui m'ont habitu\u00e9e \u00e0 diff\u00e9rents accents et\n                  vitesses de parole. J'ai appris \u00e0 ne pas bloquer face au\n                  stress et \u00e0 ma\u00eetriser le d\u00e9bit. Je recommande vivement ce\n                  syst\u00e8me immersif. \u00bb\n                <\/p>\n                <div class=\"testimonial-author\">\n                  <div class=\"avatar\">S<\/div>\n                  <div>\n                    <h4 class=\"author-name\">Soukaina Haninou.<\/h4>\n                    <p class=\"author-title\">\n                      \u00c9tudiante en Commerce et Marketing\n                    <\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"testimonial-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testimonial-text\">\n                  \u00ab Passer de la th\u00e9orie \u00e0 la pratique fluide \u00e9tait impossible\n                  auparavant. Efficacit\u00e9 et immersion : c'est exactement ce dont\n                  j'avais besoin pour ma carri\u00e8re. \u00bb\n                <\/p>\n                <div class=\"testimonial-author\">\n                  <div class=\"avatar\">O<\/div>\n                  <div>\n                    <h4 class=\"author-name\">JDID Omar.<\/h4>\n                    <p class=\"author-title\">\n                      \u00c9tudiante en Management des Ressources Humaines\n                    <\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"testimonial-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testimonial-text\">\n                  \u00ab En tant qu'\u00e9tudiante en Master \u00c9conomie et Finance\n                  Appliqu\u00e9e, j'avais besoin d'am\u00e9liorer ma capacit\u00e9 \u00e0\n                  communiquer dans un contexte acad\u00e9mique et professionnel.\n                  ELOGHA SUP m'a permis de d\u00e9velopper une aisance remarquable \u00e0\n                  l'oral gr\u00e2ce \u00e0 ses mises en situation r\u00e9alistes. Aujourd'hui,\n                  je me sens beaucoup plus confiante lors des pr\u00e9sentations, des\n                  \u00e9changes universitaires et des discussions li\u00e9es \u00e0 mon domaine\n                  d'\u00e9tude. Une exp\u00e9rience enrichissante que je recommande\n                  vivement. \u00bb\n                <\/p>\n                <div class=\"testimonial-author\">\n                  <div class=\"avatar\">K<\/div>\n                  <div>\n                    <h4 class=\"author-name\">Khadija Nouigued.<\/h4>\n                    <p class=\"author-title\">\n                      Master \u00c9conomie et Finance Appliqu\u00e9e\n                    <\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"testimonial-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testimonial-text\">\n                  \u00ab Ce qui distingue ELOGHA SUP, c'est son approche pratique et\n                  immersive. En tant qu'\u00e9tudiante en Master Management et\n                  Performance des Organisations, j'ai pu renforcer mes\n                  comp\u00e9tences en communication et apprendre \u00e0 m'exprimer avec\n                  plus d'assurance dans des situations proches du monde\n                  professionnel. Les exercices interactifs m'ont aid\u00e9e \u00e0 gagner\n                  en fluidit\u00e9 et \u00e0 mieux structurer mes interventions lors des\n                  travaux de groupe et des pr\u00e9sentations. \u00bb\n                <\/p>\n                <div class=\"testimonial-author\">\n                  <div class=\"avatar\">A<\/div>\n                  <div>\n                    <h4 class=\"author-name\">Asmae Samlali.<\/h4>\n                    <p class=\"author-title\">\n                      Master Management et Performance des Organisations\n                    <\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"testimonial-card\">\n                <div class=\"quote-icon\">\u201c<\/div>\n                <p class=\"testimonial-text\">\n                  \u00ab Dans le domaine de l'ing\u00e9nierie financi\u00e8re, la ma\u00eetrise de\n                  la communication professionnelle est un v\u00e9ritable avantage\n                  comp\u00e9titif. Gr\u00e2ce \u00e0 ELOGHA SUP, j'ai pu am\u00e9liorer mon\n                  vocabulaire technique, d\u00e9velopper ma capacit\u00e9 \u00e0 argumenter et\n                  gagner en confiance lors des pr\u00e9sentations acad\u00e9miques.\n                  L'environnement interactif propos\u00e9 permet d'apprendre\n                  efficacement tout en restant motiv\u00e9. Une solution moderne\n                  parfaitement adapt\u00e9e aux exigences des \u00e9tudiants ambitieux. \u00bb\n                <\/p>\n                <div class=\"testimonial-author\">\n                  <div class=\"avatar\">L<\/div>\n                  <div>\n                    <h4 class=\"author-name\">Lahsen Skih.<\/h4>\n                    <p class=\"author-title\">Ing\u00e9nieur Financier<\/p>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <button class=\"nav-btn next\" id=\"nextBtn\">\n            <i class=\"fas fa-chevron-right\" style=\"color: black\"><\/i>\n          <\/button>\n        <\/div>\n        <div class=\"carousel-dots\" id=\"carouselDots\"><\/div>\n      <\/div>\n    <\/section>\n\n    <!-- Section 6 : FAQ -->\n    <section class=\"reveal\">\n      <div class=\"section-bg-icon\"><i class=\"fas fa-question-circle\"><\/i><\/div>\n      <div class=\"section-header\">\n        <h2 class=\"section-title\">Foire aux questions<\/h2>\n        <p class=\"section-subtitle\">R\u00e9ponses claires pour vous accompagner dans votre apprentissage<\/p>\n      <\/div>\n      <div class=\"faq-accordion\" id=\"faqAccordion\">\n        <div class=\"faq-item\">\n          <div class=\"faq-question\">\n            Quand la plateforme sera-t-elle accessible \u00e0 la FEGG ?\n            <span class=\"icon\">+<\/span>\n          <\/div>\n          <div class=\"faq-content-wrapper\">\n            <div class=\"faq-answer\">\n              L\u2019acc\u00e8s sera progressif d\u00e8s la rentr\u00e9e universitaire prochaine. Un\n              email officiel sera envoy\u00e9 \u00e0 tous les \u00e9tudiants.\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-question\">\n            Faut-il des comp\u00e9tences techniques particuli\u00e8res ?\n            <span class=\"icon\">+<\/span>\n          <\/div>\n          <div class=\"faq-content-wrapper\">\n            <div class=\"faq-answer\">\n              Non, l\u2019interface est ultra-intuitive. Une s\u00e9ance de prise en main\n              est pr\u00e9vue.\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-question\">\n            Est-ce que la formation est obligatoire ?\n            <span class=\"icon\">+<\/span>\n          <\/div>\n          <div class=\"faq-content-wrapper\">\n            <div class=\"faq-answer\">\n              Elle est vivement recommand\u00e9e, car elle booste vos chances de\n              r\u00e9ussite. Non obligatoire mais fortement conseill\u00e9e.\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-question\">\n            Comment obtenir mon compte ? <span class=\"icon\">+<\/span>\n          <\/div>\n          <div class=\"faq-content-wrapper\">\n            <div class=\"faq-answer\">\n              Utilisez vos identifiants acad\u00e9miques habituels (messagerie\n              @edu.uiz.ac.ma).\n            <\/div>\n          <\/div>\n        <\/div>\n        <div class=\"faq-item\">\n          <div class=\"faq-question\">\n            Est-ce que les cours sont en direct ou enregistr\u00e9s ?\n            <span class=\"icon\">+<\/span>\n          <\/div>\n          <div class=\"faq-content-wrapper\">\n            <div class=\"faq-answer\">\n              La plateforme propose des activit\u00e9s interactives en temps r\u00e9el ainsi que\n              des contenus accessibles \u00e0 tout moment pour permettre un apprentissage\n              flexible et efficace.\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-question\">\n            Mon niveau sera-t-il \u00e9valu\u00e9 au d\u00e9but ?\n            <span class=\"icon\">+<\/span>\n          <\/div>\n          <div class=\"faq-content-wrapper\">\n            <div class=\"faq-answer\">\n              Oui, un test de positionnement permet d\u2019identifier votre niveau initial\n              afin de vous orienter vers le parcours le plus adapt\u00e9.\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-question\">\n            Est-ce que je peux revoir les exercices plusieurs fois ?\n            <span class=\"icon\">+<\/span>\n          <\/div>\n          <div class=\"faq-content-wrapper\">\n            <div class=\"faq-answer\">\n              Oui, tous les exercices peuvent \u00eatre r\u00e9p\u00e9t\u00e9s autant de fois que n\u00e9cessaire\n              pour renforcer votre compr\u00e9hension et votre ma\u00eetrise.\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <div class=\"faq-item\">\n          <div class=\"faq-question\">\n            Est-ce que ELOGHA SUP aide pour les examens universitaires ?\n            <span class=\"icon\">+<\/span>\n          <\/div>\n          <div class=\"faq-content-wrapper\">\n            <div class=\"faq-answer\">\n              Oui, la plateforme est con\u00e7ue pour am\u00e9liorer vos comp\u00e9tences linguistiques\n              et communicationnelles, ce qui vous aide indirectement \u00e0 mieux r\u00e9ussir vos\n              examens et pr\u00e9sentations acad\u00e9miques.\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- Section 7 : Assistance -->\n    <section class=\"reveal\">\n      <div class=\"assistance-wrapper\">\n        <h2 style=\"color: white\">\n          <i class=\"fas fa-headset\"><\/i> Besoin d\u2019aide ?\n        <\/h2>\n\n        <p>\n          Utilisez votre email acad\u00e9mique. En cas de difficult\u00e9, le support FEGG\n          est \u00e0 votre disposition.\n        <\/p>\n\n        <p style=\"opacity: 0.85; font-size: 0.95rem; margin-top: 10px;\">\n          Un guide d\u2019utilisation (PDF) sera bient\u00f4t disponible pour vous accompagner\n          pas \u00e0 pas dans la prise en main de la plateforme.\n        <\/p>\n\n        <a href=\"#\" class=\"btn-outline-light\" id=\"pdfGuide\">\n          Guide d\u2019utilisation (bient\u00f4t disponible)\n        <\/a>\n      <\/div>\n    <\/section>\n\n    <script>\n      \/\/ \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0640 Scroll animation (\u062a\u0623\u062b\u064a\u0631 \u062f\u062e\u0648\u0644 \u0633\u0644\u0633)\n      const reveals = document.querySelectorAll(\".reveal\");\n      const obs = new IntersectionObserver(\n        (entries) => {\n          entries.forEach((e) => {\n            if (e.isIntersecting) {\n              e.target.classList.add(\"active\");\n              obs.unobserve(e.target);\n            }\n          });\n        },\n        { threshold: 0.15, rootMargin: \"0px 0px -50px 0px\" },\n      );\n      reveals.forEach((r) => obs.observe(r));\n\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)\n      const videoContainer = document.getElementById(\"modernVideo\");\n      videoContainer.addEventListener(\"click\", function () {\n        const iframe = document.createElement(\"iframe\");\n        iframe.classList.add(\"video-iframe\");\n        iframe.src = \"https:\/\/www.youtube.com\/embed\/ZGcw5oC0xsc?autoplay=1\";\n        iframe.allow = \"autoplay; encrypted-media\";\n        iframe.allowFullscreen = true;\n        videoContainer.innerHTML = \"\";\n        videoContainer.appendChild(iframe);\n      });\n\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\n      const scrollDiv = document.getElementById(\"testimonialScroll\");\n      const dotsContainer = document.getElementById(\"carouselDots\");\n      const cards = document.querySelectorAll(\".testimonial-card\");\n      const prevBtn = document.getElementById(\"prevBtn\");\n      const nextBtn = document.getElementById(\"nextBtn\");\n      const totalCards = cards.length;\n\n      function getCardWidth() {\n        return cards[0].offsetWidth + 30; \/\/ Card width + gap\n      }\n\n      function updateDots() {\n        const scrollLeft = scrollDiv.scrollLeft;\n        const activeIndex = Math.round(scrollLeft \/ getCardWidth());\n        document.querySelectorAll(\".dot\").forEach((dot, idx) => {\n          if (idx === activeIndex) dot.classList.add(\"active\");\n          else dot.classList.remove(\"active\");\n        });\n      }\n\n      function createDots() {\n        dotsContainer.innerHTML = \"\";\n        for (let i = 0; i < totalCards; i++) {\n          const dot = document.createElement(\"div\");\n          dot.classList.add(\"dot\");\n          if (i === 0) dot.classList.add(\"active\");\n          dot.addEventListener(\"click\", () => {\n            scrollDiv.scrollTo({\n              left: getCardWidth() * i,\n              behavior: \"smooth\",\n            });\n          });\n          dotsContainer.appendChild(dot);\n        }\n      }\n\n      \/\/ \u0623\u062d\u062f\u0627\u062b \u0627\u0644\u0623\u0633\u0647\u0645 (Navigation)\n      nextBtn.addEventListener(\"click\", () => {\n        scrollDiv.scrollBy({ left: getCardWidth(), behavior: \"smooth\" });\n      });\n\n      prevBtn.addEventListener(\"click\", () => {\n        scrollDiv.scrollBy({ left: -getCardWidth(), behavior: \"smooth\" });\n      });\n\n      createDots();\n      scrollDiv.addEventListener(\"scroll\", updateDots);\n      window.addEventListener(\"resize\", updateDots);\n\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\n      const faqItems = document.querySelectorAll(\".faq-item\");\n      faqItems.forEach((item) => {\n        const q = item.querySelector(\".faq-question\");\n        q.addEventListener(\"click\", () => {\n          const isActive = item.classList.contains(\"active\");\n\n          \/\/ \u0625\u063a\u0644\u0627\u0642 \u0623\u064a \u0633\u0624\u0627\u0644 \u0645\u0641\u062a\u0648\u062d \u0622\u062e\u0631\n          faqItems.forEach((el) => {\n            el.classList.remove(\"active\");\n            el.querySelector(\".icon\").textContent = \"+\";\n          });\n\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\n          if (!isActive) {\n            item.classList.add(\"active\");\n            q.querySelector(\".icon\").textContent = \"\u2212\";\n          }\n        });\n      });\n\n      \/\/ \u0627\u0644\u0640 PDF alert\n      document.getElementById(\"pdfGuide\").addEventListener(\"click\", (e) => {\n        e.preventDefault();\n        alert(\n          \"\ud83d\udcc4 Le guide officiel sera disponible prochainement sur la plateforme ELOGHA SUP.\",\n        );\n      });\n\n      (function () {\n        \/\/ \u0627\u062e\u062a\u064a\u0627\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u062f\u0648\u0627\u0626\u0631\n        const circles = document.querySelectorAll(\".circle-item\");\n        if (circles.length === 0) return;\n\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)\n        const speeds = [0.12, -0.08, 0.18, -0.05, 0.1, -0.15];\n\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)\n        let initialPositions = [];\n        circles.forEach((circle, idx) => {\n          const rect = circle.getBoundingClientRect();\n          initialPositions.push({\n            top: rect.top + window.scrollY,\n            left: rect.left,\n          });\n        });\n\n        function updateCircles() {\n          const scrollY = window.pageYOffset;\n          circles.forEach((circle, idx) => {\n            const speed = speeds[idx % speeds.length];\n            const translateY = scrollY * speed;\n            const initial = initialPositions[idx];\n            if (initial) {\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\n              circle.style.transform = `translateY(${translateY}px)`;\n            }\n          });\n        }\n\n        \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u0648\u0636\u0639 \u0639\u0646\u062f \u0627\u0644\u062a\u0645\u0631\u064a\u0631\n        window.addEventListener(\"scroll\", updateCircles);\n        \/\/ \u062a\u062d\u062f\u064a\u062b \u0623\u0648\u0644\u064a \u0639\u0646\u062f \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0635\u0641\u062d\u0629\n        window.addEventListener(\"resize\", () => {\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\n          circles.forEach((circle, idx) => {\n            const rect = circle.getBoundingClientRect();\n            initialPositions[idx] = {\n              top: rect.top + window.scrollY,\n              left: rect.left,\n            };\n          });\n          updateCircles();\n        });\n\n        updateCircles();\n      })();\n    <\/script>\n  <\/body>\n<\/html>\n\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 &#8211; FEGG Guelmim | Design Moderne &#038; 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 Une vision strat\u00e9gique pour l\u2019excellence acad\u00e9mique Une approche moderne et immersive &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"http:\/\/fegg.uiz.ac.ma\/?page_id=3974\"> <span class=\"screen-reader-text\">Elogha-Sup<\/span> Read More &raquo;<\/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":"http:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/pages\/3974"}],"collection":[{"href":"http:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/fegg.uiz.ac.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3974"}],"version-history":[{"count":29,"href":"http:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/pages\/3974\/revisions"}],"predecessor-version":[{"id":4012,"href":"http:\/\/fegg.uiz.ac.ma\/index.php?rest_route=\/wp\/v2\/pages\/3974\/revisions\/4012"}],"wp:attachment":[{"href":"http:\/\/fegg.uiz.ac.ma\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}