{"id":9599,"date":"2026-01-04T08:52:35","date_gmt":"2026-01-04T07:52:35","guid":{"rendered":"https:\/\/www.enscs.edu.dz\/?page_id=9599"},"modified":"2026-02-26T22:09:36","modified_gmt":"2026-02-26T21:09:36","slug":"departement-du-genie-de-la-cybersecurite-et-du-developpement-numerique-securise-icdns","status":"publish","type":"page","link":"https:\/\/www.enscs.edu.dz\/?page_id=9599","title":{"rendered":"D\u00e9partement Ing\u00e9nierie de la Cybers\u00e9curit\u00e9 et D\u00e9veloppement Num\u00e9rique S\u00e9curis\u00e9 (ICDNS)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9599\" class=\"elementor elementor-9599\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa3011d e-flex e-con-boxed e-con e-parent\" data-id=\"aa3011d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5236d1a elementor-widget elementor-widget-html\" data-id=\"5236d1a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>D\u00e9partement ICDNS - \u00c9cole Nationale Sup\u00e9rieure de Cybers\u00e9curit\u00e9<\/title>\n\n    <!-- Font Awesome pour les ic\u00f4nes -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\"\/>\n\n    <style>\n        \/* VARIABLES DE COULEURS - TH\u00c8ME BLEU *\/\n        :root {\n            --primary-blue: #1e40af;\n            --secondary-blue: #3b82f6;\n            --accent-blue: #60a5fa;\n            --light-blue: #dbeafe;\n            --dark-blue: #1e3a8a;\n            --card-bg: #ffffff;\n        }\n\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        html, body {\n            width: 100%;\n            overflow-x: hidden;\n        }\n\n        body {\n            font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n            color: #374151;\n            line-height: 1.8;\n            background: #ffffff;\n            padding-top: 0;\n        }\n\n        \/* ===== FORCER PLEINE LARGEUR ===== *\/\n        .full-width-wrapper {\n            width: 100vw !important;\n            max-width: 100vw !important;\n            position: relative;\n            left: 50% !important;\n            right: 50% !important;\n            margin-left: -50vw !important;\n            margin-right: -50vw !important;\n            padding: 100px 20px 60px 20px;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n            margin-top: 0 !important;\n        }\n\n        \/* ===== CONTENEUR PRINCIPAL ===== *\/\n        .content-container {\n            width: 100%;\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 0 20px;\n        }\n\n        \/* ===== CONTENU ARTICLE ===== *\/\n        .article-content {\n            background: var(--card-bg);\n            padding: 50px;\n            border-radius: 12px;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.08);\n            margin-bottom: 40px;\n        }\n\n        \/* ===== CONTENU EN COURS DE CONSTRUCTION ===== *\/\n        .construction-content {\n            text-align: center;\n            padding: 60px 20px;\n            max-width: 900px;\n            margin: 0 auto;\n        }\n\n        .construction-icon {\n            font-size: 4rem;\n            color: var(--primary-blue);\n            margin-bottom: 40px;\n            position: relative;\n            display: inline-block;\n        }\n\n        .construction-icon:after {\n            content: '';\n            position: absolute;\n            width: 100px;\n            height: 4px;\n            background: linear-gradient(90deg, var(--primary-blue), var(--accent-blue));\n            bottom: -15px;\n            left: 50%;\n            transform: translateX(-50%);\n            border-radius: 2px;\n        }\n\n        .construction-title {\n            color: var(--primary-blue);\n            font-size: 2rem;\n            margin-bottom: 20px;\n            font-weight: 700;\n            line-height: 1.3;\n            text-align: center;\n        }\n\n        .construction-subtitle {\n            color: var(--secondary-blue);\n            font-size: 1.4rem;\n            margin-bottom: 40px;\n            font-weight: 600;\n            background: var(--light-blue);\n            display: inline-block;\n            padding: 10px 25px;\n            border-radius: 50px;\n            border-left: 4px solid var(--primary-blue);\n            text-align: center;\n        }\n\n        .construction-message {\n            color: #4b5563;\n            font-size: 1.2rem;\n            line-height: 1.8;\n            margin: 0 auto 30px;\n            text-align: center;\n            background: var(--card-bg);\n            padding: 30px;\n            border-radius: 12px;\n            box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n            border-left: 4px solid var(--accent-blue);\n            border-right: 4px solid var(--accent-blue);\n        }\n\n        .construction-message:last-of-type {\n            border-left-color: var(--secondary-blue);\n        }\n\n        .construction-note {\n            color: #6b7280;\n            font-size: 1.1rem;\n            font-style: italic;\n            margin-top: 50px;\n            padding-top: 25px;\n            border-top: 2px solid var(--light-blue);\n            max-width: 700px;\n            margin-left: auto;\n            margin-right: auto;\n            background: var(--card-bg);\n            padding: 20px;\n            border-radius: 10px;\n            position: relative;\n            text-align: center;\n        }\n\n        .construction-note:before {\n            content: \"\u2139\ufe0f\";\n            position: absolute;\n            top: -15px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: var(--card-bg);\n            padding: 0 15px;\n            font-size: 1.2rem;\n        }\n\n        \/* PROGRESS BAR STYLE *\/\n        .progress-container {\n            width: 100%;\n            max-width: 500px;\n            height: 8px;\n            background: #e5e7eb;\n            border-radius: 4px;\n            margin: 40px auto;\n            overflow: hidden;\n        }\n\n        .progress-bar {\n            height: 100%;\n            width: 75%;\n            background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));\n            border-radius: 4px;\n            animation: progressAnimation 2s ease-in-out infinite alternate;\n        }\n\n        @keyframes progressAnimation {\n            0% {\n                width: 70%;\n            }\n            100% {\n                width: 80%;\n            }\n        }\n\n        \/* INFO BADGES *\/\n        .info-badges {\n            display: flex;\n            justify-content: center;\n            gap: 20px;\n            flex-wrap: wrap;\n            margin: 40px 0;\n        }\n\n        .badge {\n            background: var(--light-blue);\n            color: var(--primary-blue);\n            padding: 12px 25px;\n            border-radius: 10px;\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            border: 2px solid var(--accent-blue);\n            transition: all 0.3s ease;\n            font-size: 1.1rem;\n        }\n\n        .badge:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);\n            background: var(--accent-blue);\n            color: white;\n        }\n\n        \/* ===== RESPONSIVE ===== *\/\n        @media (max-width: 1200px) {\n            .content-container {\n                max-width: 95%;\n            }\n            \n            .article-content {\n                padding: 45px;\n            }\n        }\n\n        @media (max-width: 992px) {\n            .full-width-wrapper {\n                padding: 90px 15px 50px 15px;\n            }\n            \n            .content-container {\n                padding: 0 15px;\n            }\n            \n            .article-content {\n                padding: 40px 30px;\n            }\n            \n            .construction-title {\n                font-size: 2.2rem;\n            }\n            \n            .construction-icon {\n                font-size: 4rem;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .full-width-wrapper {\n                padding: 80px 10px 40px 10px;\n            }\n            \n            .content-container {\n                padding: 0 10px;\n            }\n            \n            .article-content {\n                padding: 35px 25px;\n            }\n            \n            .construction-icon {\n                font-size: 3.5rem;\n            }\n            \n            .construction-title {\n                font-size: 2rem;\n            }\n            \n            .construction-subtitle {\n                font-size: 1.2rem;\n                padding: 8px 20px;\n            }\n            \n            .construction-message {\n                font-size: 1.1rem;\n                padding: 25px;\n            }\n            \n            .info-badges {\n                gap: 15px;\n            }\n            \n            .badge {\n                padding: 10px 20px;\n                font-size: 1rem;\n            }\n        }\n\n        @media (max-width: 576px) {\n            .full-width-wrapper {\n                padding: 70px 10px 35px 10px;\n            }\n            \n            .article-content {\n                padding: 30px 20px;\n            }\n            \n            .construction-icon {\n                font-size: 3rem;\n            }\n            \n            .construction-title {\n                font-size: 1.8rem;\n            }\n            \n            .construction-subtitle {\n                font-size: 1.1rem;\n                padding: 6px 15px;\n            }\n            \n            .construction-message {\n                font-size: 1rem;\n                padding: 20px;\n            }\n            \n            .info-badges {\n                flex-direction: column;\n                align-items: center;\n                gap: 12px;\n            }\n            \n            .badge {\n                width: 100%;\n                max-width: 300px;\n                justify-content: center;\n            }\n            \n            .progress-container {\n                max-width: 300px;\n            }\n            \n            .construction-note {\n                font-size: 1rem;\n                padding: 15px;\n            }\n        }\n\n        \/* ANIMATIONS DOUCES *\/\n        @keyframes fadeIn {\n            from {\n                opacity: 0;\n                transform: translateY(30px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        .article-content {\n            animation: fadeIn 0.8s ease forwards;\n        }\n\n        \/* HOVER EFFECTS *\/\n        .construction-message {\n            transition: all 0.4s ease;\n        }\n\n        .construction-message:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 30px rgba(0,0,0,0.1);\n        }\n    <\/style>\n<\/head>\n<body>\n\n<!-- Menu WordPress -->\n\n<div class=\"full-width-wrapper\">\n    <div class=\"content-container\">\n\n        <!-- CONTENU ARTICLE -->\n        <div class=\"article-content\">\n\n            <!-- D\u00c9PARTEMENT ICDNS -->\n            <div class=\"construction-content\">\n                <div class=\"construction-icon\">\n                    <i class=\"fas fa-code\"><\/i>\n                <\/div>\n                \n                <h1 class=\"construction-title\">D\u00e9partement Ing\u00e9nierie de la Cybers\u00e9curit\u00e9 et D\u00e9veloppement Num\u00e9rique S\u00e9curis\u00e9 (<strong style=\"color: #700013;\">ICDNS<\/strong>)<\/h1>\n\n                \n                <div class=\"construction-subtitle\">\n                    <i class=\"fas fa-tools\"><\/i> Page en Cours de Construction\n                <\/div>\n                \n                <!-- Progress bar -->\n                <div class=\"progress-container\">\n                    <div class=\"progress-bar\"><\/div>\n                <\/div>\n                \n          \n                \n                <p class=\"construction-message\">\n                    Cette page sera bient\u00f4t disponible avec toutes les informations n\u00e9cessaires.\n                <\/p>\n                \n                <div class=\"construction-note\">\n                    <i class=\"fas fa-clock\"><\/i>  Revenez bient\u00f4t pour d\u00e9couvrir notre nouveau d\u00e9partement et ses programmes exclusifs.\n                <\/div>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n<\/div>\n\n<script>\n    document.addEventListener('DOMContentLoaded', function() {\n        \/\/ Ajustement pour le menu WordPress\n        function adjustForWordPressMenu() {\n            const header = document.querySelector('header') || document.querySelector('.site-header') || document.querySelector('#masthead');\n            \n            if (header) {\n                const headerHeight = header.offsetHeight;\n                const wrapper = document.querySelector('.full-width-wrapper');\n                \n                if (wrapper) {\n                    wrapper.style.paddingTop = (headerHeight + 20) + 'px';\n                }\n            } else {\n                const wrapper = document.querySelector('.full-width-wrapper');\n                if (wrapper) {\n                    wrapper.style.paddingTop = '100px';\n                }\n            }\n        }\n        \n        adjustForWordPressMenu();\n        window.addEventListener('resize', adjustForWordPressMenu);\n        setTimeout(adjustForWordPressMenu, 500);\n        \n        \/\/ Animation pour les badges\n        const badges = document.querySelectorAll('.badge');\n        badges.forEach(badge => {\n            badge.style.opacity = '0';\n            badge.style.transform = 'translateY(15px)';\n            badge.style.transition = 'opacity 0.4s ease, transform 0.4s ease, all 0.3s ease';\n            \n            setTimeout(() => {\n                badge.style.opacity = '1';\n                badge.style.transform = 'translateY(0)';\n            }, 300);\n        });\n        \n        \/\/ Animation de la progress bar\n        const progressBar = document.querySelector('.progress-bar');\n        if (progressBar) {\n            setInterval(() => {\n                progressBar.style.width = Math.random() * (85 - 70) + 70 + '%';\n            }, 2000);\n        }\n        \n        \/\/ Effet de survol sur les messages\n        const constructionMessages = document.querySelectorAll('.construction-message');\n        constructionMessages.forEach(message => {\n            message.addEventListener('mouseenter', function() {\n                this.style.transform = 'translateY(-5px)';\n            });\n            \n            message.addEventListener('mouseleave', function() {\n                this.style.transform = 'translateY(0)';\n            });\n        });\n        \n        \/\/ Animation au d\u00e9filement\n        const observer = new IntersectionObserver((entries) => {\n            entries.forEach(entry => {\n                if (entry.isIntersecting) {\n                    entry.target.style.opacity = '1';\n                    entry.target.style.transform = 'translateY(0)';\n                }\n            });\n        }, { threshold: 0.1 });\n        \n        \/\/ Observer le contenu\n        const content = document.querySelector('.article-content');\n        if (content) {\n            content.style.opacity = '0';\n            content.style.transform = 'translateY(30px)';\n            content.style.transition = 'opacity 0.6s ease, transform 0.6s ease';\n            observer.observe(content);\n        }\n    });\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>D\u00e9partement ICDNS &#8211; \u00c9cole Nationale Sup\u00e9rieure de Cybers\u00e9curit\u00e9 D\u00e9partement Ing\u00e9nierie de la Cybers\u00e9curit\u00e9 et D\u00e9veloppement Num\u00e9rique S\u00e9curis\u00e9 (ICDNS) Page en Cours de Construction Cette page sera bient\u00f4t disponible avec toutes les informations n\u00e9cessaires. Revenez bient\u00f4t pour d\u00e9couvrir notre nouveau d\u00e9partement et ses programmes exclusifs.<\/p>\n","protected":false},"author":8,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9599","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.enscs.edu.dz\/index.php?rest_route=\/wp\/v2\/pages\/9599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.enscs.edu.dz\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.enscs.edu.dz\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.enscs.edu.dz\/index.php?rest_route=\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.enscs.edu.dz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9599"}],"version-history":[{"count":5,"href":"https:\/\/www.enscs.edu.dz\/index.php?rest_route=\/wp\/v2\/pages\/9599\/revisions"}],"predecessor-version":[{"id":12160,"href":"https:\/\/www.enscs.edu.dz\/index.php?rest_route=\/wp\/v2\/pages\/9599\/revisions\/12160"}],"wp:attachment":[{"href":"https:\/\/www.enscs.edu.dz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}