{"id":16,"date":"2025-11-29T12:01:31","date_gmt":"2025-11-29T12:01:31","guid":{"rendered":"https:\/\/portfolio5492.live-website.com\/?page_id=16"},"modified":"2026-05-24T11:33:58","modified_gmt":"2026-05-24T11:33:58","slug":"veilles-technologiques","status":"publish","type":"page","link":"https:\/\/noubissikenmogne.com\/index.php\/veilles-technologiques\/","title":{"rendered":"Veilles Technologiques"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"16\" class=\"elementor elementor-16\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0637677 e-con-full e-flex e-con e-parent\" data-id=\"0637677\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d22aa2b elementor-widget elementor-widget-html\" data-id=\"d22aa2b\" 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>Veilles Technologiques - Hero Section<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        .veille-hero-container {\n            position: relative;\n            width: 100%;\n            height: 400px;\n            overflow: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: #0a0e27;\n        }\n\n        \/* Animation de fond futuriste *\/\n        .background-animation {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(135deg, #0a0e27 0%, #1a1f4e 50%, #0d47a1 100%);\n            z-index: 1;\n        }\n\n        .grid-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-image: \n                linear-gradient(rgba(33, 150, 243, 0.1) 1px, transparent 1px),\n                linear-gradient(90deg, rgba(33, 150, 243, 0.1) 1px, transparent 1px);\n            background-size: 50px 50px;\n            animation: gridMove 20s linear infinite;\n            z-index: 2;\n        }\n\n        @keyframes gridMove {\n            0%   { transform: translate(0, 0); }\n            100% { transform: translate(50px, 50px); }\n        }\n\n        \/* Particules flottantes *\/\n        .particle {\n            position: absolute;\n            background: rgba(33, 150, 243, 0.6);\n            border-radius: 50%;\n            animation: float 15s infinite;\n            z-index: 2;\n        }\n\n        @keyframes float {\n            0%, 100% {\n                transform: translateY(0) translateX(0);\n                opacity: 0;\n            }\n            10% { opacity: 1; }\n            90% { opacity: 1; }\n            100% {\n                transform: translateY(-100vh) translateX(100px);\n                opacity: 0;\n            }\n        }\n\n        \/* Cercles lumineux *\/\n        .glow-circle {\n            position: absolute;\n            border-radius: 50%;\n            filter: blur(60px);\n            z-index: 2;\n        }\n\n        .glow-1 {\n            width: 400px;\n            height: 400px;\n            background: rgba(33, 150, 243, 0.3);\n            top: 20%;\n            left: 10%;\n            animation: pulse 8s ease-in-out infinite;\n        }\n\n        .glow-2 {\n            width: 300px;\n            height: 300px;\n            background: rgba(0, 188, 212, 0.2);\n            bottom: 20%;\n            right: 15%;\n            animation: pulse 6s ease-in-out infinite reverse;\n        }\n\n        @keyframes pulse {\n            0%, 100% { transform: scale(1);   opacity: 0.5; }\n            50%       { transform: scale(1.2); opacity: 0.8; }\n        }\n\n        \/* Contenu principal *\/\n        .veille-content {\n            position: relative;\n            z-index: 10;\n            text-align: center;\n            color: #ffffff;\n            padding: 20px;\n        }\n\n        .veille-title {\n            font-size: 3.5rem;\n            font-weight: 700;\n            margin-bottom: 20px;\n            font-family: 'Arial', sans-serif;\n            color: #ffffff;\n            text-shadow: 0 0 20px rgba(33, 150, 243, 0.5);\n        }\n\n        .veille-subtitle {\n            font-size: 1.2rem;\n            font-weight: 300;\n            margin-bottom: 15px;\n            opacity: 1;\n            letter-spacing: 2px;\n            color: #64b5f6;\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 768px) {\n            .veille-hero-container { height: 300px; }\n            .veille-title          { font-size: 2rem; }\n            .veille-subtitle       { font-size: 1rem; }\n            .glow-1, .glow-2       { width: 200px; height: 200px; }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"veille-hero-container\">\n        <div class=\"background-animation\"><\/div>\n        <div class=\"grid-overlay\"><\/div>\n\n        <div class=\"glow-circle glow-1\"><\/div>\n        <div class=\"glow-circle glow-2\"><\/div>\n\n        <div id=\"particles\"><\/div>\n\n        <div class=\"veille-content\">\n            <div class=\"veille-title\">Veilles Technologiques<\/div>\n            <div class=\"veille-subtitle\">D\u00e9couvrez l'ensemble des veilles technologiques<\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const particlesContainer = document.getElementById('particles');\n        for (let i = 0; i < 30; i++) {\n            const particle = document.createElement('div');\n            particle.className = 'particle';\n            particle.style.width = Math.random() * 5 + 2 + 'px';\n            particle.style.height = particle.style.width;\n            particle.style.left = Math.random() * 100 + '%';\n            particle.style.animationDelay = Math.random() * 15 + 's';\n            particle.style.animationDuration = (Math.random() * 10 + 10) + 's';\n            particlesContainer.appendChild(particle);\n        }\n    <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-67d7dc7 e-flex e-con-boxed e-con e-parent\" data-id=\"67d7dc7\" 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-dc35549 elementor-widget elementor-widget-html\" data-id=\"dc35549\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Veille Technologique<\/title>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n            background-color: #f5f5f5;\r\n        }\r\n\r\n        :root {\r\n            --bleu: #00bcd4;\r\n            --bleu-fonce: #0097a7;\r\n            --bleu-clair: #E0F7FA;\r\n            --blanc: #ffffff;\r\n            --gris-clair: #f4f6f8;\r\n            --gris-texte: #222222;\r\n            --gris-moyen: #555555;\r\n        }\r\n\r\n        .veille-section {\r\n            background-color: var(--blanc);\r\n            padding: 70px 5%;\r\n        }\r\n\r\n        .section-title-top {\r\n            color: var(--bleu);\r\n            font-size: 1.2rem;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 4px;\r\n            text-align: center;\r\n            margin-bottom: 12px;\r\n            opacity: 0;\r\n            transform: translateY(-20px);\r\n            animation: fadeDown 0.7s ease forwards 0.1s;\r\n        }\r\n\r\n        .section-title {\r\n            color: #000000 !important;\r\n            font-weight: 900;\r\n            font-size: 3rem;\r\n            text-align: center;\r\n            margin-bottom: 18px;\r\n            opacity: 0;\r\n            transform: translateY(-20px);\r\n            animation: fadeDown 0.7s ease forwards 0.25s;\r\n        }\r\n\r\n        .section-description {\r\n            color: #555555;\r\n            font-size: 1.15rem;\r\n            max-width: 700px;\r\n            margin: 0 auto 65px;\r\n            line-height: 1.7;\r\n            text-align: center;\r\n            opacity: 0;\r\n            animation: fadeDown 0.7s ease forwards 0.4s;\r\n        }\r\n\r\n        .veilles-container {\r\n            max-width: 1100px;\r\n            margin: 0 auto;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 55px;\r\n        }\r\n\r\n        .veille-card {\r\n            background: var(--blanc);\r\n            border: 2px solid #dde4ee;\r\n            border-radius: 18px;\r\n            overflow: hidden;\r\n            box-shadow: 0 6px 25px rgba(33, 150, 243, 0.07);\r\n            opacity: 0;\r\n            transform: translateY(45px);\r\n            transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.4s ease, border-color 0.4s ease;\r\n        }\r\n\r\n        .veille-card.visible {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .veille-card:hover {\r\n            box-shadow: 0 14px 45px rgba(33, 150, 243, 0.14);\r\n            border-color: var(--bleu);\r\n        }\r\n\r\n        .veille-header {\r\n            position: relative;\r\n            height: 200px;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .veille-header-img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            display: block;\r\n            transition: transform 0.5s ease;\r\n        }\r\n\r\n        .veille-card:hover .veille-header-img {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        .veille-header-overlay {\r\n            position: absolute;\r\n            inset: 0;\r\n            background: linear-gradient(135deg, rgba(0,151,167,0.82) 0%, rgba(0,121,134,0.75) 100%);\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: space-between;\r\n            padding: 28px 35px;\r\n            color: var(--blanc);\r\n        }\r\n\r\n        .veille-header-top {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 18px;\r\n            margin-bottom: 0;\r\n        }\r\n\r\n        .veille-icon {\r\n            width: 52px;\r\n            height: 52px;\r\n            background: rgba(255,255,255,0.22);\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            flex-shrink: 0;\r\n            transition: transform 0.35s ease, background 0.35s ease;\r\n        }\r\n\r\n        .veille-card:hover .veille-icon {\r\n            transform: rotate(8deg) scale(1.12);\r\n            background: rgba(255,255,255,0.35);\r\n        }\r\n\r\n        .veille-icon i {\r\n            font-size: 1.6rem;\r\n            color: var(--blanc);\r\n        }\r\n\r\n        .period-favicons {\r\n            display: flex;\r\n            gap: 10px;\r\n            flex-wrap: wrap;\r\n            margin-top: 8px;\r\n        }\r\n\r\n        .favicon-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            background: var(--blanc);\r\n            border: 1px solid #e0e7ef;\r\n            border-radius: 8px;\r\n            padding: 8px 14px;\r\n            transition: all 0.3s ease;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .favicon-item:hover {\r\n            border-color: var(--bleu);\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 4px 14px rgba(0,188,212,0.15);\r\n        }\r\n\r\n        .favicon-item img {\r\n            width: 20px;\r\n            height: 20px;\r\n            object-fit: contain;\r\n            border-radius: 3px;\r\n        }\r\n\r\n        .favicon-item span {\r\n            font-size: 0.95rem;\r\n            font-weight: 600;\r\n            color: var(--gris-texte);\r\n        }\r\n\r\n        .veille-header-info h2 {\r\n            font-size: 1.55rem;\r\n            font-weight: 800;\r\n            margin-bottom: 5px;\r\n            line-height: 1.2;\r\n        }\r\n\r\n        .veille-header-info p {\r\n            opacity: 0.9;\r\n            font-size: 0.95rem;\r\n            line-height: 1.5;\r\n        }\r\n\r\n        .veille-meta {\r\n            display: flex;\r\n            gap: 12px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .veille-meta-item {\r\n            background: rgba(255,255,255,0.22);\r\n            padding: 6px 16px;\r\n            border-radius: 25px;\r\n            font-size: 0.88rem;\r\n            font-weight: 600;\r\n            transition: background 0.3s ease, transform 0.3s ease;\r\n        }\r\n\r\n        .veille-card:hover .veille-meta-item {\r\n            background: rgba(255,255,255,0.35);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .veille-body {\r\n            padding: 45px;\r\n        }\r\n\r\n        .objectif-box {\r\n            background: var(--bleu-clair);\r\n            border-left: 5px solid var(--bleu);\r\n            border-radius: 10px;\r\n            padding: 22px 28px;\r\n            margin-bottom: 45px;\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        .objectif-box:hover {\r\n            transform: translateX(6px);\r\n            box-shadow: 3px 0 15px rgba(33, 150, 243, 0.1);\r\n        }\r\n\r\n        .objectif-box h4 {\r\n            color: var(--bleu-fonce);\r\n            font-size: 1rem;\r\n            font-weight: 800;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1.5px;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .objectif-box p {\r\n            color: var(--gris-texte);\r\n            font-size: 1.1rem;\r\n            line-height: 1.7;\r\n        }\r\n\r\n        .timeline {\r\n            position: relative;\r\n            padding-left: 38px;\r\n        }\r\n\r\n        .timeline::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: 12px;\r\n            top: 0;\r\n            bottom: 0;\r\n            width: 3px;\r\n            background: linear-gradient(to bottom, var(--bleu), #dde4ee);\r\n            border-radius: 3px;\r\n        }\r\n\r\n        .timeline-item {\r\n            position: relative;\r\n            margin-bottom: 38px;\r\n            opacity: 0;\r\n            transform: translateX(-30px);\r\n            transition: opacity 0.55s ease, transform 0.55s ease;\r\n        }\r\n\r\n        .timeline-item.visible {\r\n            opacity: 1;\r\n            transform: translateX(0);\r\n        }\r\n\r\n        .timeline-item:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n\r\n        .timeline-dot {\r\n            position: absolute;\r\n            left: -31px;\r\n            top: 24px;\r\n            width: 18px;\r\n            height: 18px;\r\n            background: var(--bleu);\r\n            border-radius: 50%;\r\n            border: 3px solid var(--blanc);\r\n            box-shadow: 0 0 0 3px var(--bleu);\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .timeline-item:hover .timeline-dot {\r\n            transform: scale(1.35);\r\n        }\r\n\r\n        .timeline-period {\r\n            background: var(--gris-clair);\r\n            border-radius: 12px;\r\n            padding: 30px 34px;\r\n            border: 2px solid #e0e7ef;\r\n            transition: all 0.35s ease;\r\n        }\r\n\r\n        .timeline-period:hover {\r\n            border-color: var(--bleu);\r\n            background: #fafcff;\r\n            transform: translateX(10px);\r\n            box-shadow: 0 6px 22px rgba(33, 150, 243, 0.1);\r\n        }\r\n\r\n        .period-header {\r\n            display: flex;\r\n            align-items: center;\r\n            flex-wrap: wrap;\r\n            gap: 12px;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .period-badge {\r\n            background: var(--bleu);\r\n            color: var(--blanc);\r\n            padding: 7px 18px;\r\n            border-radius: 25px;\r\n            font-size: 0.95rem;\r\n            font-weight: 700;\r\n            white-space: nowrap;\r\n        }\r\n\r\n        .period-theme {\r\n            color: var(--gris-texte);\r\n            font-size: 1.3rem;\r\n            font-weight: 700;\r\n            margin-top: 6px;\r\n            margin-bottom: 5px;\r\n        }\r\n\r\n        .period-body {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 22px;\r\n            margin-top: 20px;\r\n        }\r\n\r\n        .period-block {\r\n            background: var(--blanc);\r\n            border-radius: 10px;\r\n            padding: 20px 22px;\r\n            border: 1px solid #e0e7ef;\r\n            transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        .period-block:hover {\r\n            border-color: var(--bleu);\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 6px 18px rgba(33, 150, 243, 0.09);\r\n        }\r\n\r\n        .period-block h5 {\r\n            font-size: 0.95rem;\r\n            font-weight: 800;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            color: var(--bleu-fonce);\r\n            margin-bottom: 14px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 7px;\r\n        }\r\n\r\n        .period-block ul {\r\n            list-style: none;\r\n            padding: 0;\r\n        }\r\n\r\n        .period-block ul li {\r\n            color: var(--gris-moyen);\r\n            font-size: 1.05rem;\r\n            padding: 6px 0 6px 20px;\r\n            position: relative;\r\n            line-height: 1.55;\r\n            transition: color 0.25s ease, transform 0.25s ease;\r\n        }\r\n\r\n        .period-block ul li:hover {\r\n            color: var(--gris-texte);\r\n            transform: translateX(4px);\r\n        }\r\n\r\n        .period-block ul li::before {\r\n            content: '\u25b8';\r\n            position: absolute;\r\n            left: 0;\r\n            color: var(--bleu);\r\n            font-size: 0.9rem;\r\n        }\r\n\r\n        .period-resume {\r\n            grid-column: 1 \/ -1;\r\n            background: var(--blanc);\r\n            border-radius: 10px;\r\n            padding: 22px 26px;\r\n            border: 1px solid #e0e7ef;\r\n            border-left: 5px solid var(--bleu);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        .period-resume:hover {\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 6px 20px rgba(33, 150, 243, 0.09);\r\n        }\r\n\r\n        .period-resume h5 {\r\n            font-size: 0.95rem;\r\n            font-weight: 800;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            color: var(--bleu-fonce);\r\n            margin-bottom: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 7px;\r\n        }\r\n\r\n        .period-resume p {\r\n            color: var(--gris-texte);\r\n            font-size: 1.08rem;\r\n            line-height: 1.8;\r\n            font-style: italic;\r\n        }\r\n\r\n        @keyframes fadeDown {\r\n            from { opacity: 0; transform: translateY(-20px); }\r\n            to   { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .veille-section { padding: 40px 4%; }\r\n            .section-title { font-size: 2.2rem; }\r\n            .veille-body { padding: 28px; }\r\n            .veille-header-info h2 { font-size: 1.55rem; }\r\n            .period-body { grid-template-columns: 1fr; }\r\n            .period-resume { grid-column: 1; }\r\n            .timeline { padding-left: 26px; }\r\n            .timeline-dot { left: -22px; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"veille-section\">\r\n\r\n    <p class=\"section-title-top\">Veille Technologique<\/p>\r\n    <h1 class=\"section-title\">Ma Veille<\/h1>\r\n    <p class=\"section-description\">Suivi r\u00e9gulier de l'actualit\u00e9 technologique dans le domaine de la s\u00e9curit\u00e9 web.<\/p>\r\n\r\n    <div class=\"veilles-container\">\r\n\r\n        <!-- VEILLE : S\u00c9CURIT\u00c9 -->\r\n        <div class=\"veille-card\">\r\n            <div class=\"veille-header\">\r\n                <img decoding=\"async\" class=\"veille-header-img\" src=\"https:\/\/images.unsplash.com\/photo-1550751827-4bd374c3f58b?w=1100&q=80\" alt=\"S\u00e9curit\u00e9 web\">\r\n                <div class=\"veille-header-overlay\">\r\n                    <div class=\"veille-header-top\">\r\n                        <div class=\"veille-icon\">\r\n                            <i class=\"fas fa-shield-alt\"><\/i>\r\n                        <\/div>\r\n                        <div class=\"veille-header-info\">\r\n                            <h2>S\u00e9curit\u00e9 des applications web<\/h2>\r\n                            <p>Comment les pratiques de s\u00e9curisation \u00e9voluent-elles face aux nouvelles menaces ?<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"veille-meta\">\r\n                        <div class=\"veille-meta-item\"><i class=\"fas fa-calendar-alt\" style=\"margin-right:7px;\"><\/i>Sept. 2024 \u2014 F\u00e9v. 2026<\/div>\r\n                        <div class=\"veille-meta-item\"><i class=\"fas fa-tag\" style=\"margin-right:7px;\"><\/i>Cybers\u00e9curit\u00e9<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"veille-body\">\r\n                <div class=\"objectif-box\">\r\n                    <h4><i class=\"fas fa-bullseye\" style=\"margin-right:7px;\"><\/i>Objectif<\/h4>\r\n                    <p>Comprendre les failles courantes, suivre les recommandations officielles et observer l'\u00e9volution des m\u00e9thodes de protection.<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"timeline\">\r\n                    <div class=\"timeline-item\">\r\n                        <div class=\"timeline-dot\"><\/div>\r\n                        <div class=\"timeline-period\">\r\n                            <div class=\"period-header\">\r\n                                <span class=\"period-badge\">P\u00e9riode 1 \u2014 Sept. 2024 \u00e0 D\u00e9c. 2024<\/span>\r\n                            <\/div>\r\n                            <div class=\"period-theme\">Les failles les plus courantes dans les applications web<\/div>\r\n                            <div class=\"period-body\">\r\n                                <div class=\"period-block\">\r\n                                    <h5><i class=\"fas fa-book-open\"><\/i> Contenu \u00e9tudi\u00e9<\/h5>\r\n                                    <ul>\r\n                                        <li>Injection SQL<\/li>\r\n                                        <li>XSS (Cross-Site Scripting)<\/li>\r\n                                        <li>CSRF<\/li>\r\n                                        <li>Pr\u00e9sentation du OWASP Top 10<\/li>\r\n                                    <\/ul>\r\n                                <\/div>\r\n                                <div class=\"period-block\">\r\n                                    <h5><i class=\"fas fa-link\"><\/i> Sources<\/h5>\r\n                                    <div class=\"period-favicons\">\r\n                                        <a href=\"https:\/\/owasp.org\/www-project-top-ten\/\" target=\"_blank\" class=\"favicon-item\">\r\n                                            <img decoding=\"async\" src=\"https:\/\/owasp.org\/favicon.ico\" alt=\"OWASP\" onerror=\"this.src='https:\/\/www.google.com\/s2\/favicons?domain=owasp.org&sz=32'\">\r\n                                            <span>OWASP Top 10<\/span>\r\n                                        <\/a>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"period-resume\">\r\n                                    <h5><i class=\"fas fa-pen\"><\/i> R\u00e9sum\u00e9<\/h5>\r\n                                    <p>Durant cette p\u00e9riode, je me suis concentr\u00e9 sur l'\u00e9tude des vuln\u00e9rabilit\u00e9s les plus r\u00e9pandues dans les applications web \u00e0 travers le r\u00e9f\u00e9rentiel OWASP Top 10. Cela m'a permis de comprendre les principaux risques auxquels un d\u00e9veloppeur SLAM peut \u00eatre confront\u00e9.<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"timeline-item\">\r\n                        <div class=\"timeline-dot\"><\/div>\r\n                        <div class=\"timeline-period\">\r\n                            <div class=\"period-header\">\r\n                                <span class=\"period-badge\">P\u00e9riode 2 \u2014 Jan. 2025 \u00e0 Juin 2025<\/span>\r\n                            <\/div>\r\n                            <div class=\"period-theme\">S\u00e9curisation des authentifications et des API<\/div>\r\n                            <div class=\"period-body\">\r\n                                <div class=\"period-block\">\r\n                                    <h5><i class=\"fas fa-book-open\"><\/i> Contenu \u00e9tudi\u00e9<\/h5>\r\n                                    <ul>\r\n                                        <li>Stockage s\u00e9curis\u00e9 des mots de passe (bcrypt)<\/li>\r\n                                        <li>Gestion des sessions<\/li>\r\n                                        <li>Introduction aux tokens JWT<\/li>\r\n                                        <li>S\u00e9curisation des API REST<\/li>\r\n                                    <\/ul>\r\n                                <\/div>\r\n                                <div class=\"period-block\">\r\n                                    <h5><i class=\"fas fa-link\"><\/i> Sources<\/h5>\r\n                                    <div class=\"period-favicons\">\r\n                                        <a href=\"https:\/\/owasp.org\/www-project-api-security\/\" target=\"_blank\" class=\"favicon-item\">\r\n                                            <img decoding=\"async\" src=\"https:\/\/www.google.com\/s2\/favicons?domain=owasp.org&sz=32\" alt=\"OWASP\">\r\n                                            <span>OWASP API Security<\/span>\r\n                                        <\/a>\r\n                                        <a href=\"https:\/\/jwt.io\/\" target=\"_blank\" class=\"favicon-item\">\r\n                                            <img decoding=\"async\" src=\"https:\/\/www.google.com\/s2\/favicons?domain=jwt.io&sz=32\" alt=\"JWT\">\r\n                                            <span>JWT.io<\/span>\r\n                                        <\/a>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"period-resume\">\r\n                                    <h5><i class=\"fas fa-pen\"><\/i> R\u00e9sum\u00e9<\/h5>\r\n                                    <p>J'ai approfondi les m\u00e9canismes d'authentification modernes et la s\u00e9curisation des API, notamment via l'utilisation de tokens JWT et les recommandations OWASP pour limiter les risques d'acc\u00e8s non autoris\u00e9.<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"timeline-item\">\r\n                        <div class=\"timeline-dot\"><\/div>\r\n                        <div class=\"timeline-period\">\r\n                            <div class=\"period-header\">\r\n                                <span class=\"period-badge\">P\u00e9riode 3 \u2014 Sept. 2025 \u00e0 F\u00e9v. 2026<\/span>\r\n                            <\/div>\r\n                            <div class=\"period-theme\">\u00c9volution des bonnes pratiques et nouvelles menaces<\/div>\r\n                            <div class=\"period-body\">\r\n                                <div class=\"period-block\">\r\n                                    <h5><i class=\"fas fa-book-open\"><\/i> Contenu \u00e9tudi\u00e9<\/h5>\r\n                                    <ul>\r\n                                        <li>Mise \u00e0 jour des recommandations OWASP<\/li>\r\n                                        <li>Importance des d\u00e9pendances s\u00e9curis\u00e9es<\/li>\r\n                                        <li>S\u00e9curisation des frameworks modernes<\/li>\r\n                                    <\/ul>\r\n                                <\/div>\r\n                                <div class=\"period-block\">\r\n                                    <h5><i class=\"fas fa-link\"><\/i> Sources<\/h5>\r\n                                    <div class=\"period-favicons\">\r\n                                        <a href=\"https:\/\/owasp.org\/\" target=\"_blank\" class=\"favicon-item\">\r\n                                            <img decoding=\"async\" src=\"https:\/\/www.google.com\/s2\/favicons?domain=owasp.org&sz=32\" alt=\"OWASP\">\r\n                                            <span>OWASP<\/span>\r\n                                        <\/a>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <div class=\"period-resume\">\r\n                                    <h5><i class=\"fas fa-pen\"><\/i> R\u00e9sum\u00e9<\/h5>\r\n                                    <p>J'ai poursuivi ma veille en observant l'\u00e9volution des recommandations officielles et en comprenant l'importance de maintenir les d\u00e9pendances \u00e0 jour pour \u00e9viter les vuln\u00e9rabilit\u00e9s.<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/section>\r\n\r\n<script>\r\n    const observer = new IntersectionObserver((entries) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                entry.target.classList.add('visible');\r\n            }\r\n        });\r\n    }, { threshold: 0.1 });\r\n\r\n    document.querySelectorAll('.veille-card').forEach((card, i) => {\r\n        card.style.transitionDelay = `${i * 0.18}s`;\r\n        observer.observe(card);\r\n    });\r\n\r\n    document.querySelectorAll('.timeline-item').forEach((item, i) => {\r\n        item.style.transitionDelay = `${0.1 + (i % 3) * 0.14}s`;\r\n        observer.observe(item);\r\n    });\r\n<\/script>\r\n\r\n<\/body>\r\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>Veilles Technologiques &#8211; Hero Section Veilles Technologiques D\u00e9couvrez l&rsquo;ensemble des veilles technologiques Veille Technologique Veille Technologique Ma Veille Suivi r\u00e9gulier de l&rsquo;actualit\u00e9 technologique dans le domaine de la s\u00e9curit\u00e9 web. S\u00e9curit\u00e9 des applications web Comment les pratiques de s\u00e9curisation \u00e9voluent-elles face aux nouvelles menaces ? Sept. 2024 \u2014 F\u00e9v. 2026 Cybers\u00e9curit\u00e9 Objectif Comprendre les failles [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"full-screen","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"off","ocean_display_header":"on","ocean_header_style":"minimal","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"off","ocean_display_footer_bottom":"off","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":55,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":556,"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/pages\/16\/revisions\/556"}],"wp:attachment":[{"href":"https:\/\/noubissikenmogne.com\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}