{"id":983,"date":"2026-02-12T11:50:42","date_gmt":"2026-02-12T10:50:42","guid":{"rendered":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/?page_id=983"},"modified":"2026-06-17T13:40:46","modified_gmt":"2026-06-17T11:40:46","slug":"cybersecurite","status":"publish","type":"page","link":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/cybersecurite\/","title":{"rendered":"Citoyennet\u00e9 num\u00e9rique"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n \n \n Citoyennet\u00e9 num\u00e9rique et cybers\u00e9curit\u00e9 \u2013 DRANE PACA \u2013 NICE<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Sans+3:wght@400;600;700&family=Source+Serif+4:ital,wght@0,600;1,400&display=swap\" rel=\"stylesheet\" \/>\n\n <style>\n \/* ============================================================\n VARIABLES & RESET \u2013 palette coh\u00e9rente avec le th\u00e8me Graphene\n de la DRANE Nice (bleu EN + accents chauds)\n ============================================================ *\/\n :root {\n --bleu-en: #003189; \/* Bleu \u00c9ducation nationale *\/\n --bleu-clair: #1a62c4;\n --bleu-pale: #e8eef9;\n --bleu-pale2: #d0ddf5;\n --vert: #2a7a4e;\n --vert-pale: #e6f4ec;\n --orange: #d9600a;\n --orange-pale: #fdf0e6;\n --violet: #5b3fa6;\n --violet-pale: #ede8f8;\n --gris-clair: #f5f6f8;\n --gris-texte: #444;\n --blanc: #ffffff;\n --bordure: #d0d8e8;\n --radius: 8px;\n --shadow: 0 2px 12px rgba(0,49,137,.10);\n --shadow-lg: 0 6px 28px rgba(0,49,137,.14);\n --font-body: 'Source Sans 3', Helvetica, Arial, sans-serif;\n --font-titre: 'Source Serif 4', Georgia, serif;\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: var(--font-body);\n font-size: 16px;\n line-height: 1.65;\n color: var(--gris-texte);\n background: #f0f3f9;\n }\n\n a { color: var(--bleu-clair); text-decoration: none; }\n a:hover { text-decoration: underline; color: var(--bleu-en); }\n\n img { max-width: 100%; display: block; }\n\n \/* ============================================================\n BARRE DE NAVIGATION (simul\u00e9e \u2013 coh\u00e9rente avec le site)\n ============================================================ *\/\n .site-header {\n background: var(--bleu-en);\n color: #fff;\n padding: 0;\n box-shadow: 0 2px 8px rgba(0,0,0,.25);\n position: sticky;\n top: 0;\n z-index: 100;\n }\n\n .header-inner {\n max-width: 1200px;\n margin: auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 24px;\n gap: 16px;\n }\n\n .site-logo {\n display: flex;\n align-items: center;\n gap: 12px;\n text-decoration: none;\n }\n\n .logo-badge {\n width: 46px; height: 46px;\n background: #fff;\n border-radius: 6px;\n display: flex; align-items: center; justify-content: center;\n font-weight: 700;\n color: var(--bleu-en);\n font-size: 13px;\n letter-spacing: -.5px;\n line-height: 1.1;\n text-align: center;\n padding: 4px;\n }\n\n .logo-text {\n color: #fff;\n font-size: 15px;\n font-weight: 700;\n line-height: 1.25;\n }\n\n .logo-text span { font-weight: 400; font-size: 12px; display: block; opacity: .85; }\n\n nav.main-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }\n\n nav.main-nav a {\n color: rgba(255,255,255,.9);\n font-size: 13px;\n font-weight: 600;\n padding: 6px 10px;\n border-radius: 4px;\n text-decoration: none;\n transition: background .2s;\n }\n\n nav.main-nav a:hover,\n nav.main-nav a.active {\n background: rgba(255,255,255,.18);\n color: #fff;\n }\n\n nav.main-nav a.active {\n background: rgba(255,255,255,.25);\n border-bottom: 2px solid #fff;\n }\n\n \/* Fil d'Ariane *\/\n .breadcrumb {\n background: var(--blanc);\n border-bottom: 1px solid var(--bordure);\n padding: 8px 24px;\n }\n\n .breadcrumb-inner {\n max-width: 1200px;\n margin: auto;\n font-size: 13px;\n color: #888;\n }\n\n .breadcrumb-inner a { color: var(--bleu-clair); }\n .breadcrumb-inner span { margin: 0 6px; }\n\n \/* ============================================================\n HERO DE PAGE\n ============================================================ *\/\n .page-hero {\n background: linear-gradient(135deg, var(--bleu-en) 0%, #1a3e8f 55%, #2a5fbd 100%);\n color: #fff;\n padding: 56px 24px 52px;\n position: relative;\n overflow: hidden;\n }\n\n .page-hero::before {\n content: '';\n position: absolute;\n inset: 0;\n background: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\") repeat;\n }\n\n .page-hero-inner {\n max-width: 1200px;\n margin: auto;\n position: relative;\n }\n\n .hero-tag {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n background: rgba(255,255,255,.15);\n border: 1px solid rgba(255,255,255,.3);\n border-radius: 20px;\n padding: 4px 12px;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: .5px;\n text-transform: uppercase;\n margin-bottom: 16px;\n }\n\n .page-hero h1 {\n font-family: var(--font-titre);\n font-size: clamp(26px, 4vw, 42px);\n font-weight: 600;\n line-height: 1.2;\n margin-bottom: 16px;\n max-width: 700px;\n }\n\n .page-hero p {\n font-size: 17px;\n opacity: .9;\n max-width: 640px;\n line-height: 1.6;\n }\n\n \/* Sommaire ancres *\/\n .toc-bar {\n background: var(--blanc);\n border-bottom: 3px solid var(--bleu-pale2);\n box-shadow: 0 2px 6px rgba(0,0,0,.06);\n overflow-x: auto;\n }\n\n .toc-bar-inner {\n max-width: 1200px;\n margin: auto;\n display: flex;\n gap: 0;\n }\n\n .toc-bar a {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 14px 22px;\n font-size: 13.5px;\n font-weight: 600;\n color: var(--gris-texte);\n white-space: nowrap;\n text-decoration: none;\n border-bottom: 3px solid transparent;\n margin-bottom: -3px;\n transition: all .2s;\n }\n\n .toc-bar a:hover { color: var(--bleu-en); border-color: var(--bleu-clair); }\n\n .toc-bar a .toc-num {\n width: 22px; height: 22px;\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 11px;\n font-weight: 700;\n flex-shrink: 0;\n }\n\n .toc-bar a:nth-child(1) .toc-num { background: var(--bleu-pale); color: var(--bleu-en); }\n .toc-bar a:nth-child(2) .toc-num { background: var(--vert-pale); color: var(--vert); }\n .toc-bar a:nth-child(3) .toc-num { background: var(--orange-pale); color: var(--orange); }\n .toc-bar a:nth-child(4) .toc-num { background: var(--violet-pale); color: var(--violet); }\n\n \/* ============================================================\n CONTENEUR PRINCIPAL\n ============================================================ *\/\n .page-main {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 24px 64px;\n }\n\n \/* ============================================================\n BLOCS PRINCIPAUX (sections)\n ============================================================ *\/\n .section-block {\n margin-top: 52px;\n scroll-margin-top: 80px;\n }\n\n .section-header {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n margin-bottom: 28px;\n padding-bottom: 20px;\n border-bottom: 2px solid var(--bordure);\n }\n\n .section-icon {\n width: 52px; height: 52px;\n border-radius: 12px;\n display: flex; align-items: center; justify-content: center;\n font-size: 24px;\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n .icon-bleu { background: var(--bleu-pale); }\n .icon-vert { background: var(--vert-pale); }\n .icon-orange { background: var(--orange-pale); }\n .icon-violet { background: var(--violet-pale); }\n\n .section-header-text {}\n .section-num {\n font-size: 12px;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n margin-bottom: 4px;\n }\n\n .num-bleu { color: var(--bleu-en); }\n .num-vert { color: var(--vert); }\n .num-orange { color: var(--orange); }\n .num-violet { color: var(--violet); }\n\n .section-title {\n font-family: var(--font-titre);\n font-size: clamp(20px, 2.5vw, 28px);\n font-weight: 600;\n color: var(--bleu-en);\n line-height: 1.25;\n }\n\n .section-subtitle {\n font-size: 14.5px;\n color: #666;\n margin-top: 4px;\n }\n\n \/* ============================================================\n BLOC 1 \u2013 COMPRENDRE : grille de cartes d\u00e9finition\n ============================================================ *\/\n .definition-intro {\n background: var(--blanc);\n border-radius: var(--radius);\n padding: 28px 32px;\n margin-bottom: 24px;\n border-left: 4px solid var(--bleu-en);\n box-shadow: var(--shadow);\n font-size: 16px;\n }\n\n .definition-intro strong { color: var(--bleu-en); }\n\n .cards-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\n gap: 16px;\n margin-bottom: 24px;\n }\n\n .def-card {\n background: var(--blanc);\n border-radius: var(--radius);\n padding: 20px;\n box-shadow: var(--shadow);\n border-top: 3px solid var(--bleu-clair);\n transition: transform .2s, box-shadow .2s;\n }\n\n .def-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }\n\n .def-card-icon { font-size: 28px; margin-bottom: 10px; }\n\n .def-card h3 {\n font-size: 14px;\n font-weight: 700;\n color: var(--bleu-en);\n margin-bottom: 6px;\n text-transform: uppercase;\n letter-spacing: .3px;\n }\n\n .def-card p { font-size: 13.5px; color: #555; line-height: 1.5; }\n\n \/* Pourquoi enseigner \u2013 trois colonnes publics *\/\n .audience-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n margin-top: 8px;\n }\n\n @media (max-width: 640px) { .audience-grid { grid-template-columns: 1fr; } }\n\n .audience-card {\n border-radius: var(--radius);\n padding: 22px 20px;\n text-align: center;\n }\n\n .audience-card.eleves { background: var(--bleu-pale); border: 1px solid var(--bleu-pale2); }\n .audience-card.enseignants { background: var(--vert-pale); border: 1px solid #b8dfc7; }\n .audience-card.societe { background: var(--orange-pale); border: 1px solid #f5c89a; }\n\n .audience-card .aud-icon { font-size: 32px; margin-bottom: 10px; }\n .audience-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--bleu-en); }\n .audience-card p { font-size: 13.5px; color: #555; }\n\n \/* ============================================================\n BLOC 2 \u2013 METTRE EN \u0152UVRE : deux sous-parties\n ============================================================ *\/\n \/* ============================================================\n BLOC 2 \u2013 NOUVELLE MISE EN PAGE VERTICALE PLEINE LARGEUR\n ============================================================ *\/\n\n \/* Suppression de l'ancienne grille 2 colonnes *\/\n .oeuvre-grid {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n \/* Chaque sous-partie occupe toute la largeur *\/\n .sous-partie {\n background: var(--blanc);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n\n \/* On retire sp-scrollable \u2013 plus besoin *\/\n .sous-partie.sp-scrollable {\n max-height: none;\n overflow-y: visible;\n }\n\n .sous-partie-header {\n padding: 16px 22px;\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .sp-header-1 { background: linear-gradient(90deg, var(--bleu-en), var(--bleu-clair)); color: #fff; }\n .sp-header-2 { background: linear-gradient(90deg, var(--vert), #3a9b62); color: #fff; }\n\n .sous-partie-header .sp-icon { font-size: 22px; }\n .sous-partie-header h3 { font-size: 16px; font-weight: 700; line-height: 1.2; }\n .sous-partie-header p { font-size: 12px; opacity: .85; margin-top: 2px; }\n\n .sous-partie-body { padding: 20px 22px; }\n\n \/* Partie 1 \u2013 ressources en ligne horizontale *\/\n .article-list-h {\n list-style: none;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n }\n\n @media (max-width: 768px) { .article-list-h { grid-template-columns: 1fr; } }\n\n .article-list-h .article-item {\n flex-direction: column;\n gap: 10px;\n }\n\n .article-list-h .article-thumb {\n width: 44px; height: 44px;\n font-size: 20px;\n }\n\n \/* Partie 2 \u2013 activit\u00e9s en ligne horizontale *\/\n .article-list {\n list-style: none;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 12px;\n }\n\n @media (max-width: 768px) { .article-list { grid-template-columns: 1fr; } }\n\n .article-item {\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: flex-start;\n background: var(--gris-clair);\n border-radius: 6px;\n padding: 13px 15px;\n border: 1px solid var(--bordure);\n transition: border-color .2s, box-shadow .2s;\n }\n\n .article-item:hover { border-color: var(--bleu-clair); box-shadow: 0 2px 8px rgba(0,49,137,.08); }\n\n .article-thumb {\n width: 44px; height: 44px;\n border-radius: 6px;\n flex-shrink: 0;\n display: flex; align-items: center; justify-content: center;\n font-size: 20px;\n }\n\n .thumb-bleu { background: var(--bleu-pale); }\n .thumb-vert { background: var(--vert-pale); }\n .thumb-orange { background: var(--orange-pale); }\n\n .article-info { flex: 1; width: 100%; }\n .article-type {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: .5px;\n margin-bottom: 3px;\n }\n\n .type-bleu { color: var(--bleu-clair); }\n .type-vert { color: var(--vert); }\n .type-orange { color: var(--orange); }\n\n .article-info h4 { font-size: 13.5px; font-weight: 700; color: var(--bleu-en); margin-bottom: 3px; }\n .article-info p { font-size: 12.5px; color: #666; line-height: 1.4; }\n\n .article-link {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 12px;\n font-weight: 600;\n color: var(--bleu-clair);\n margin-top: 5px;\n }\n\n \/* Badge \"\u00c0 venir\" *\/\n .badge-soon {\n display: inline-block;\n background: #f0f0f0;\n color: #999;\n font-size: 10px;\n font-weight: 700;\n padding: 2px 7px;\n border-radius: 20px;\n text-transform: uppercase;\n letter-spacing: .5px;\n margin-left: 6px;\n vertical-align: middle;\n }\n\n \/* Placeholder \"ajouter un article\" *\/\n .add-placeholder {\n border: 2px dashed var(--bordure);\n border-radius: 6px;\n padding: 16px;\n text-align: center;\n color: #aaa;\n font-size: 13px;\n cursor: pointer;\n transition: all .2s;\n }\n .add-placeholder:hover { border-color: var(--bleu-clair); color: var(--bleu-clair); background: var(--bleu-pale); }\n .add-placeholder span { display: block; font-size: 24px; margin-bottom: 4px; }\n\n \/* ============================================================\n BLOC 3 \u2013 SE FORMER\n ============================================================ *\/\n .former-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n gap: 18px;\n }\n\n .former-card {\n background: var(--blanc);\n border-radius: var(--radius);\n padding: 22px;\n box-shadow: var(--shadow);\n display: flex;\n flex-direction: column;\n gap: 10px;\n border: 1px solid var(--bordure);\n transition: transform .2s, box-shadow .2s;\n }\n\n .former-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }\n\n .former-card .fc-icon {\n width: 44px; height: 44px;\n border-radius: 10px;\n display: flex; align-items: center; justify-content: center;\n font-size: 22px;\n }\n\n .fc-orange { background: var(--orange-pale); }\n .fc-violet { background: var(--violet-pale); }\n .fc-vert { background: var(--vert-pale); }\n .fc-bleu { background: var(--bleu-pale); }\n\n .former-card h3 { font-size: 15px; font-weight: 700; color: var(--bleu-en); }\n .former-card p { font-size: 13.5px; color: #555; flex: 1; line-height: 1.45; }\n\n \/* Liste des espaces Magist\u00e8re *\/\n .magistere-espaces {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 5px;\n margin-top: 10px;\n padding-top: 10px;\n border-top: 1px solid var(--bordure);\n }\n\n .magistere-espaces li {\n font-size: 12px;\n padding-left: 12px;\n position: relative;\n }\n\n .magistere-espaces li::before {\n content: '\u21b3';\n position: absolute;\n left: 0;\n color: var(--bleu-clair);\n font-size: 11px;\n }\n\n .magistere-espaces a {\n color: var(--bleu-clair);\n font-weight: 600;\n font-size: 12px;\n }\n\n .magistere-espaces a:hover { color: var(--bleu-en); text-decoration: underline; }\n\n .btn-link {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n border-radius: 6px;\n font-size: 13px;\n font-weight: 600;\n text-decoration: none;\n transition: all .2s;\n align-self: flex-start;\n }\n\n .btn-bleu { background: var(--bleu-en); color: #fff; }\n .btn-bleu:hover { background: var(--bleu-clair); color: #fff; text-decoration: none; }\n .btn-outline { background: transparent; color: var(--bleu-en); border: 1.5px solid var(--bleu-en); }\n .btn-outline:hover { background: var(--bleu-pale); text-decoration: none; }\n\n \/* ============================================================\n BLOC 4 \u2013 PARENTALIT\u00c9 NUM\u00c9RIQUE\n ============================================================ *\/\n .parentalite-wrapper {\n background: linear-gradient(135deg, #f8f4ff 0%, #ede8f8 100%);\n border-radius: 12px;\n border: 1px solid #d8cef4;\n padding: 36px;\n position: relative;\n overflow: hidden;\n }\n\n .parentalite-wrapper::before {\n content: '\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d\udc66';\n position: absolute;\n right: 24px; top: 24px;\n font-size: 80px;\n opacity: .12;\n pointer-events: none;\n }\n\n .parentalite-wrapper h3 {\n font-family: var(--font-titre);\n font-size: 20px;\n color: var(--violet);\n margin-bottom: 8px;\n }\n\n .parentalite-wrapper > p {\n font-size: 15px;\n color: #555;\n margin-bottom: 28px;\n line-height: 1.7;\n }\n\n .parentalite-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n gap: 16px;\n margin-bottom: 24px;\n }\n\n .parent-card {\n background: var(--blanc);\n border-radius: var(--radius);\n padding: 18px;\n box-shadow: 0 2px 8px rgba(91,63,166,.10);\n border: 1px solid #d8cef4;\n display: flex;\n gap: 12px;\n align-items: flex-start;\n transition: transform .2s, box-shadow .2s;\n }\n\n .parent-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(91,63,166,.14); }\n\n .parent-card .pc-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }\n\n .parent-card h4 { font-size: 14px; font-weight: 700; color: var(--violet); margin-bottom: 4px; }\n .parent-card p { font-size: 12.5px; color: #666; line-height: 1.4; }\n .parent-card a { font-size: 12px; font-weight: 600; color: var(--violet); display: inline-block; margin-top: 5px; }\n\n .parent-cta {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n }\n\n .btn-violet { background: var(--violet); color: #fff; }\n .btn-violet:hover { background: #4a319a; color: #fff; text-decoration: none; }\n .btn-outline-violet { background: transparent; color: var(--violet); border: 1.5px solid var(--violet); }\n .btn-outline-violet:hover { background: var(--violet-pale); text-decoration: none; }\n\n \/* ============================================================\n FOOTER\n ============================================================ *\/\n .site-footer {\n background: var(--bleu-en);\n color: rgba(255,255,255,.75);\n text-align: center;\n font-size: 13px;\n padding: 24px;\n margin-top: 64px;\n }\n\n .site-footer a { color: rgba(255,255,255,.9); }\n\n \/* ============================================================\n RESPONSIVE\n ============================================================ *\/\n @media (max-width: 900px) {\n .header-inner { flex-direction: column; align-items: flex-start; gap: 8px; }\n nav.main-nav { display: none; }\n .toc-bar-inner { gap: 0; }\n .toc-bar a { padding: 12px 14px; font-size: 12px; }\n .parentalite-wrapper { padding: 24px; }\n }\n\n @media (max-width: 600px) {\n .page-hero { padding: 36px 16px; }\n .page-main { padding: 0 16px 48px; }\n .audience-grid { grid-template-columns: 1fr; }\n .oeuvre-grid { grid-template-columns: 1fr; }\n }\n\n \/* S\u00e9parateurs de section *\/\n .section-divider {\n height: 4px;\n border-radius: 4px;\n margin: 8px 0 24px;\n }\n\n .div-bleu { background: linear-gradient(90deg, var(--bleu-en), var(--bleu-pale2) 80%, transparent); }\n .div-vert { background: linear-gradient(90deg, var(--vert), var(--vert-pale) 80%, transparent); }\n .div-orange { background: linear-gradient(90deg, var(--orange), var(--orange-pale) 80%, transparent); }\n .div-violet { background: linear-gradient(90deg, var(--violet), var(--violet-pale) 80%, transparent); }\n\n \/* ============================================================\n BLOC INTRODUCTION \u2013 entre toc-bar et main\n ============================================================ *\/\n .page-intro {\n background: var(--blanc);\n border-top: 4px solid var(--bleu-en);\n box-shadow: 0 3px 14px rgba(0,49,137,.09);\n }\n\n .page-intro-inner {\n max-width: 1200px;\n margin: auto;\n padding: 40px 24px 36px;\n display: grid;\n grid-template-columns: 4px 1fr;\n gap: 0 28px;\n align-items: stretch;\n }\n\n .page-intro-accent {\n background: linear-gradient(180deg, var(--bleu-en) 0%, var(--bleu-clair) 100%);\n border-radius: 4px;\n width: 4px;\n min-height: 100%;\n }\n\n .page-intro-content {\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n .page-intro-label {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 1px;\n text-transform: uppercase;\n color: var(--bleu-clair);\n margin-bottom: 2px;\n }\n\n .page-intro-content p {\n font-size: 15.5px;\n color: var(--gris-texte);\n line-height: 1.7;\n }\n\n .page-intro-content p + p {\n padding-top: 2px;\n }\n\n .page-intro-content p:last-child {\n font-size: 15px;\n color: #555;\n border-top: 1px solid var(--bordure);\n padding-top: 14px;\n margin-top: 2px;\n }\n\n .page-intro-content p strong {\n color: var(--bleu-en);\n font-weight: 700;\n }\n\n @media (max-width: 600px) {\n .page-intro-inner { padding: 28px 16px 24px; gap: 0 16px; }\n .page-intro-content p { font-size: 14.5px; }\n }\n\n \/* ============================================================\n TEMPS FORTS \u2013 pleine largeur sous oeuvre-grid\n ============================================================ *\/\n .temps-forts-fullwidth {\n margin-top: 24px;\n background: var(--blanc);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n border: 1px solid var(--bordure);\n border-top: 3px solid var(--vert);\n padding: 24px 24px 20px;\n }\n\n .temps-forts-fw-header {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 20px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--bordure);\n }\n\n .tf-fw-icon {\n font-size: 26px;\n width: 46px; height: 46px;\n background: var(--vert-pale);\n border-radius: 10px;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n\n .tf-fw-label {\n font-size: 15px;\n font-weight: 700;\n color: var(--bleu-en);\n }\n\n .tf-fw-sub {\n font-size: 12.5px;\n color: #888;\n margin-top: 2px;\n }\n\n .tf-fw-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 14px;\n }\n\n .tf-fw-card {\n background: var(--vert-pale);\n border: 1px solid #b8dfc7;\n border-top: 3px solid var(--vert);\n border-radius: var(--radius);\n padding: 16px 16px 14px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n transition: transform .2s, box-shadow .2s;\n }\n\n .tf-fw-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(42,122,78,.14); }\n\n .tf-fw-mois {\n font-size: 10.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: .6px;\n color: var(--vert);\n background: rgba(42,122,78,.12);\n border-radius: 20px;\n padding: 2px 9px;\n align-self: flex-start;\n }\n\n .tf-fw-emoji {\n font-size: 28px;\n margin: 4px 0 2px;\n }\n\n .tf-fw-card h4 {\n font-size: 13.5px;\n font-weight: 700;\n color: var(--bleu-en);\n line-height: 1.25;\n }\n\n .tf-fw-card p {\n font-size: 12px;\n color: #666;\n line-height: 1.45;\n flex: 1;\n }\n\n .tf-fw-fiche {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 11px;\n font-weight: 600;\n color: var(--vert);\n border: 1.5px solid var(--vert);\n border-radius: 20px;\n padding: 4px 10px;\n align-self: flex-start;\n text-decoration: none;\n transition: background .2s, color .2s;\n margin-top: 4px;\n }\n\n .tf-fw-fiche:hover { background: var(--vert); color: #fff; text-decoration: none; }\n\n .tf-fw-fiche.soon {\n color: #aaa;\n border-color: #ccc;\n cursor: default;\n pointer-events: none;\n }\n\n @media (max-width: 900px) {\n .tf-fw-grid { grid-template-columns: repeat(2, 1fr); }\n }\n\n @media (max-width: 520px) {\n .tf-fw-grid { grid-template-columns: 1fr; }\n }\n\n \/* ============================================================\n CONCOURS \u2013 grille horizontale 4 cartes d\u00e9pliables\n ============================================================ *\/\n .concours-zone {\n margin-top: 20px;\n border-top: 2px solid var(--orange-pale);\n padding-top: 18px;\n }\n\n .concours-zone-header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 14px;\n }\n\n .concours-zone-header .cz-icon {\n width: 36px; height: 36px;\n background: var(--orange-pale);\n border-radius: 8px;\n display: flex; align-items: center; justify-content: center;\n font-size: 18px;\n flex-shrink: 0;\n }\n\n .concours-zone-header .cz-title {\n font-size: 13px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: .5px;\n color: var(--orange);\n }\n\n .concours-zone-header .cz-sub {\n font-size: 11.5px;\n color: #888;\n margin-top: 1px;\n }\n\n \/* Grille 4 cartes horizontale *\/\n .concours-h-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 10px;\n align-items: start;\n }\n\n @media (max-width: 900px) { .concours-h-grid { grid-template-columns: repeat(2, 1fr); } }\n @media (max-width: 520px) { .concours-h-grid { grid-template-columns: 1fr; } }\n\n .concours-h-card {\n background: #fff;\n border: 1px solid var(--bordure);\n border-top: 3px solid var(--orange);\n border-radius: 6px;\n padding: 14px 13px 10px;\n cursor: pointer;\n transition: box-shadow .2s, border-color .2s;\n position: relative;\n }\n\n .concours-h-card:hover { box-shadow: 0 4px 14px rgba(217,96,10,.12); border-color: var(--orange); }\n\n .chc-top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 8px;\n }\n\n .chc-emoji {\n font-size: 22px;\n }\n\n .concours-num {\n width: 22px; height: 22px;\n background: var(--orange);\n color: #fff;\n border-radius: 50%;\n font-size: 11px;\n font-weight: 700;\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n\n .chc-title {\n font-size: 13px;\n font-weight: 700;\n color: var(--bleu-en);\n line-height: 1.25;\n }\n\n .chc-toggle {\n display: block;\n font-size: 11px;\n color: var(--orange);\n font-weight: 600;\n margin-top: 10px;\n user-select: none;\n }\n\n .concours-h-card.open .chc-toggle { content: '\u25b4 Fermer'; }\n\n \/* Corps d\u00e9pliable *\/\n .chc-body {\n display: none;\n border-top: 1px solid var(--orange-pale);\n padding-top: 4px;\n margin-top: 10px;\n }\n\n .concours-h-card.open .chc-body { display: block; }\n\n .cc-badge {\n font-size: 10px;\n font-weight: 600;\n padding: 2px 7px;\n border-radius: 20px;\n }\n\n .cc-badge.orga { background: var(--bleu-pale); color: var(--bleu-en); }\n .cc-badge.public { background: var(--vert-pale); color: var(--vert); }\n .cc-badge.cal { background: var(--orange-pale); color: var(--orange); }\n\n .concours-card-meta {\n display: flex;\n gap: 4px;\n flex-wrap: wrap;\n }\n\n .cb-label {\n font-size: 10.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: .5px;\n color: var(--orange);\n margin-bottom: 4px;\n }\n\n .chc-body ul {\n list-style: none;\n display: flex;\n flex-direction: column;\n gap: 3px;\n }\n\n .chc-body ul li {\n font-size: 11.5px;\n color: #555;\n padding-left: 12px;\n position: relative;\n line-height: 1.4;\n }\n\n .chc-body ul li::before {\n content: '\u203a';\n position: absolute;\n left: 0;\n color: var(--orange);\n font-weight: 700;\n }\n\n .cb-production {\n font-size: 11.5px;\n color: #555;\n line-height: 1.45;\n margin-top: 2px;\n }\n\n .cc-link {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n font-size: 11px;\n font-weight: 600;\n color: var(--orange);\n border: 1.5px solid var(--orange);\n border-radius: 20px;\n padding: 3px 10px;\n text-decoration: none;\n transition: background .2s, color .2s;\n }\n\n .cc-link:hover { background: var(--orange); color: #fff; text-decoration: none; }\n\n .cc-link.soon {\n color: #aaa;\n border-color: #ccc;\n cursor: default;\n pointer-events: none;\n }\n\n .concours-local {\n border: 2px dashed var(--orange-pale);\n border-radius: 6px;\n padding: 12px 14px;\n background: #fffaf5;\n font-size: 12.5px;\n color: #888;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .concours-local span { font-size: 18px; }\n\n \/* ============================================================\n BLOC 3 \u2013 SOUS-ZONES\n ============================================================ *\/\n .b3-zone-title {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 13px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: .6px;\n color: var(--bleu-en);\n margin-bottom: 14px;\n }\n\n .b3-zone-icon {\n width: 28px; height: 28px;\n border-radius: 6px;\n display: flex; align-items: center; justify-content: center;\n font-size: 14px;\n flex-shrink: 0;\n }\n\n \/* Articles r\u00e9cents \u2013 3 colonnes *\/\n .b3-articles-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 14px;\n }\n\n @media (max-width: 768px) { .b3-articles-grid { grid-template-columns: 1fr; } }\n\n .b3-article-placeholder {\n background: var(--blanc);\n border: 1px dashed #b8c4dc;\n border-radius: var(--radius);\n padding: 18px 16px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n transition: border-color .2s, box-shadow .2s;\n }\n\n .b3-article-placeholder:hover { border-color: var(--bleu-clair); box-shadow: var(--shadow); }\n\n .b3-ap-icon { font-size: 24px; }\n\n .b3-ap-label {\n font-size: 10.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: .5px;\n color: var(--violet);\n }\n\n .b3-ap-title {\n font-size: 13.5px;\n font-weight: 700;\n color: var(--bleu-en);\n line-height: 1.3;\n }\n\n .b3-article-placeholder p {\n font-size: 12.5px;\n color: #777;\n line-height: 1.45;\n flex: 1;\n }\n\n \/* Cadre r\u00e9glementaire \u2013 2 colonnes *\/\n .b3-ressources-wrapper {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 16px;\n }\n\n @media (max-width: 700px) { .b3-ressources-wrapper { grid-template-columns: 1fr; } }\n\n .b3-ressource-block {\n background: var(--blanc);\n border-radius: var(--radius);\n border: 1px solid var(--bordure);\n box-shadow: var(--shadow);\n overflow: hidden;\n }\n\n .b3r-header {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 16px 18px;\n background: var(--gris-clair);\n border-bottom: 1px solid var(--bordure);\n }\n\n .b3r-icon {\n font-size: 22px;\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n .b3r-header h4 {\n font-size: 14px;\n font-weight: 700;\n color: var(--bleu-en);\n margin-bottom: 3px;\n }\n\n .b3r-header p {\n font-size: 12px;\n color: #777;\n line-height: 1.4;\n }\n\n .b3r-links {\n list-style: none;\n padding: 14px 18px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .b3r-links li {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .b3r-links a {\n font-size: 13px;\n font-weight: 600;\n color: var(--bleu-clair);\n }\n\n .b3r-links a:hover { color: var(--bleu-en); text-decoration: underline; }\n\n .b3r-soon {\n color: #bbb !important;\n font-style: italic;\n font-weight: 400 !important;\n cursor: default;\n pointer-events: none;\n }\n\n .b3r-desc {\n font-size: 11.5px;\n color: #888;\n line-height: 1.35;\n }\n\n .b3r-links + .add-placeholder { margin: 0 18px 14px; }\n\n \/* ============================================================\n CONCOURS \u2013 couleur corrig\u00e9e bleu (lisibilit\u00e9 orange insuffisante)\n ============================================================ *\/\n .concours-h-card {\n border-top-color: var(--bleu-clair);\n }\n\n .concours-num {\n background: var(--bleu-en);\n }\n\n .chc-toggle { color: var(--bleu-clair); }\n\n .concours-h-card:hover {\n box-shadow: 0 4px 14px rgba(26,98,196,.13);\n border-color: var(--bleu-clair);\n }\n\n .cb-label { color: var(--bleu-en); }\n\n .chc-body ul li::before { color: var(--bleu-clair); }\n\n .cc-link {\n color: var(--bleu-clair);\n border-color: var(--bleu-clair);\n }\n\n .cc-link:hover { background: var(--bleu-clair); color: #fff; }\n\n .cc-badge.orga { background: var(--bleu-pale); color: var(--bleu-en); }\n .cc-badge.cal { background: var(--bleu-pale); color: var(--bleu-en); }\n\n .concours-zone-header .cz-title { color: var(--bleu-en); }\n .concours-zone { border-top-color: var(--bleu-pale2); }\n .concours-zone-header .cz-icon { background: var(--bleu-pale); }\n\n .concours-local { background: var(--bleu-pale); border-color: var(--bleu-pale2); color: #555; }\n\n \/* Info-bulle \u00e9ditoriale *\/\n .editorial-note {\n background: #fffbea;\n border: 1px dashed #f0c040;\n border-radius: 6px;\n padding: 10px 14px;\n font-size: 12.5px;\n color: #7a6000;\n margin-top: 12px;\n display: flex;\n align-items: flex-start;\n gap: 6px;\n }\n\n .editorial-note::before { content: '\u270f\ufe0f'; flex-shrink: 0; }\n <\/style>\n<\/head>\n<body>\n\n<!-- ============================================================\n EN-T\u00caTE (simul\u00e9 coh\u00e9rent avec le site)\n============================================================ -->\n<header class=\"site-header\">\n <div class=\"header-inner\">\n <a href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/\" class=\"site-logo\">\n <div class=\"logo-badge\">DRANE<br>PACA<\/div>\n <div class=\"logo-text\">DRANE PACA \u2013 NICE\n <span>Direction R\u00e9gionale Acad\u00e9mique du Num\u00e9rique<\/span>\n <\/div>\n <\/a>\n <nav class=\"main-nav\" aria-label=\"Navigation principale\">\n <a href=\"#\">Accueil<\/a>\n <a href=\"#\">La DRANE<\/a>\n <a href=\"#\">Enseigner<\/a>\n <a href=\"#\">Former<\/a>\n <a href=\"#\">Exp\u00e9rimenter<\/a>\n <a href=\"#\" class=\"active\">Prot\u00e9ger<\/a>\n <a href=\"#\">Piloter<\/a>\n <a href=\"#\">Ressources<\/a>\n <a href=\"#\">Je suis\u2026<\/a>\n <\/nav>\n <\/div>\n<\/header>\n\n<!-- Fil d'Ariane -->\n<nav class=\"breadcrumb\" aria-label=\"Fil d'Ariane\">\n <div class=\"breadcrumb-inner\">\n <a href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/\">Accueil<\/a>\n <span>\u203a<\/span>\n <a href=\"#\">Prot\u00e9ger<\/a>\n <span>\u203a<\/span>\n <a href=\"#\">Responsabilisation<\/a>\n <span>\u203a<\/span>\n Citoyennet\u00e9 num\u00e9rique et cybers\u00e9curit\u00e9\n <\/div>\n<\/nav>\n\n<!-- ============================================================\n HERO DE PAGE\n============================================================ -->\n<section class=\"page-hero\">\n <div class=\"page-hero-inner\">\n <div class=\"hero-tag\">\ud83d\udee1\ufe0f Prot\u00e9ger \u00b7 Responsabilisation<\/div>\n <h1>Citoyennet\u00e9 num\u00e9rique<br>et cybers\u00e9curit\u00e9<\/h1>\n <p>Former des \u00e9l\u00e8ves responsables, critiques et engag\u00e9s dans un monde num\u00e9rique : enjeux, ressources p\u00e9dagogiques et accompagnement pour l’ensemble de la communaut\u00e9 \u00e9ducative.<\/p>\n <\/div>\n<\/section>\n\n<!-- Barre de sommaire ancres -->\n<nav class=\"toc-bar\" aria-label=\"Sommaire de la page\">\n <div class=\"toc-bar-inner\">\n <a href=\"#comprendre\"><span class=\"toc-num\">1<\/span> Comprendre la citoyennet\u00e9 num\u00e9rique<\/a>\n <a href=\"#mettre-en-oeuvre\"><span class=\"toc-num\">2<\/span> Mettre en \u0153uvre<\/a>\n <a href=\"#se-former\"><span class=\"toc-num\">3<\/span> Se former et \u00eatre accompagn\u00e9<\/a>\n <a href=\"#parentalite\"><span class=\"toc-num\">4<\/span> Accompagner la parentalit\u00e9 num\u00e9rique<\/a>\n <\/div>\n<\/nav>\n\n<!-- ============================================================\n INTRODUCTION DE PAGE\n============================================================ -->\n<div class=\"page-intro\" role=\"region\" aria-label=\"Introduction\">\n <div class=\"page-intro-inner\">\n <div class=\"page-intro-accent\" aria-hidden=\"true\"><\/div>\n <div class=\"page-intro-content\">\n <span class=\"page-intro-label\">\u2726 Contexte & enjeux<\/span>\n <p>Les \u00e9crans, les r\u00e9seaux sociaux et les environnements connect\u00e9s structurent d\u00e9sormais le quotidien des \u00e9l\u00e8ves. Face \u00e0 cette r\u00e9alit\u00e9, l’\u00c9cole a une responsabilit\u00e9 fondamentale : ne pas se contenter de transmettre des savoirs, mais <strong>former des citoyens num\u00e9riques \u00e9clair\u00e9s<\/strong>.<\/p>\n <p>La <strong>citoyennet\u00e9 num\u00e9rique<\/strong> ne se limite pas \u00e0 la ma\u00eetrise des outils. Elle interroge les usages, les comportements et les valeurs \u2014 le respect des autres, la protection de soi, l’esprit critique \u2014 dans un monde o\u00f9 l’information circule en continu et sans fronti\u00e8res.<\/p>\n <p>Dans ce contexte, la <strong>DRANE<\/strong> s’engage \u00e0 structurer, accompagner et valoriser une approche \u00e9ducative coh\u00e9rente, au service des \u00e9l\u00e8ves, des \u00e9quipes \u00e9ducatives et des familles.<\/p>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- ============================================================\n CONTENU PRINCIPAL\n============================================================ -->\n<main class=\"page-main\">\n\n <!-- ===========================================================\n BLOC 1 \u2013 COMPRENDRE LA CITOYENNET\u00c9 NUM\u00c9RIQUE\n =========================================================== -->\n <section id=\"comprendre\" class=\"section-block\">\n <div class=\"section-header\">\n <div class=\"section-icon icon-bleu\">\ud83c\udf10<\/div>\n <div class=\"section-header-text\">\n <div class=\"section-num num-bleu\">Bloc 1<\/div>\n <h2 class=\"section-title\">Comprendre la citoyennet\u00e9 num\u00e9rique<\/h2>\n <p class=\"section-subtitle\">Un enjeu \u00e9ducatif majeur \u00e0 l’\u00e8re du num\u00e9rique<\/p>\n <\/div>\n <\/div>\n <div class=\"section-divider div-bleu\"><\/div>\n\n <div class=\"definition-intro\">\n La <strong>citoyennet\u00e9 num\u00e9rique<\/strong> d\u00e9signe l’ensemble des comp\u00e9tences, des attitudes et des comportements qui permettent \u00e0 un individu d’utiliser les technologies de l’information de mani\u00e8re <strong>responsable, critique et \u00e9thique<\/strong>. \u00c0 l’\u00e8re des r\u00e9seaux sociaux et des \u00e9crans omnipr\u00e9sents, l’\u00e9cole joue un r\u00f4le cl\u00e9 : <strong>former des citoyens num\u00e9riques \u00e9clair\u00e9s<\/strong>.\n <\/div>\n\n <!-- Quatre piliers -->\n <div class=\"cards-grid\">\n <div class=\"def-card\">\n <div class=\"def-card-icon\">\ud83d\udd10<\/div>\n <h3>Prot\u00e9ger ses donn\u00e9es personnelles<\/h3>\n <p>Comprendre les enjeux li\u00e9s au RGPD, s\u00e9curiser ses mots de passe, ma\u00eetriser les param\u00e8tres de confidentialit\u00e9 et pr\u00e9server sa vie priv\u00e9e en ligne.<\/p>\n <\/div>\n <div class=\"def-card\">\n <div class=\"def-card-icon\">\ud83d\udcac<\/div>\n <h3>Respect en ligne<\/h3>\n <p>Pr\u00e9venir le cyberharc\u00e8lement, refuser les discours de haine, adopter des comportements responsables et bienveillants dans tous les espaces num\u00e9riques.<\/p>\n <\/div>\n <div class=\"def-card\">\n <div class=\"def-card-icon\">\ud83d\udd0d<\/div>\n <h3>Esprit critique<\/h3>\n <p>Analyser et v\u00e9rifier l’information, rep\u00e9rer la d\u00e9sinformation et les infox, distinguer les sources fiables et comprendre les m\u00e9canismes algorithmiques.<\/p>\n <\/div>\n <div class=\"def-card\">\n <div class=\"def-card-icon\">\ud83d\udee1\ufe0f<\/div>\n <h3>S\u00e9curit\u00e9 num\u00e9rique<\/h3>\n <p>Identifier les tentatives de phishing, se pr\u00e9munir contre les logiciels malveillants, g\u00e9rer son identit\u00e9 et sa r\u00e9putation num\u00e9riques sur la dur\u00e9e.<\/p>\n <\/div>\n <\/div>\n\n <!-- Pourquoi enseigner -->\n <h3 style=\"font-family:var(--font-titre);font-size:18px;color:var(--bleu-en);margin-bottom:14px;\">Pourquoi enseigner la citoyennet\u00e9 num\u00e9rique ?<\/h3>\n <div class=\"audience-grid\">\n <div class=\"audience-card eleves\">\n <div class=\"aud-icon\">\ud83c\udf92<\/div>\n <h3>Pour les \u00e9l\u00e8ves<\/h3>\n <p>D\u00e9velopper leur autonomie et leur responsabilit\u00e9 en ligne d\u00e8s le plus jeune \u00e2ge.<\/p>\n <\/div>\n <div class=\"audience-card enseignants\">\n <div class=\"aud-icon\">\ud83d\udcda<\/div>\n <h3>Pour les enseignants<\/h3>\n <p>Int\u00e9grer le num\u00e9rique comme outil p\u00e9dagogique et th\u00e8me transversal dans toutes les disciplines.<\/p>\n <\/div>\n <div class=\"audience-card societe\">\n <div class=\"aud-icon\">\ud83c\udfd9\ufe0f<\/div>\n <h3>Pour la soci\u00e9t\u00e9<\/h3>\n <p>Former des citoyens \u00e9clair\u00e9s et engag\u00e9s dans un monde de plus en plus connect\u00e9.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n\n <!-- ===========================================================\n BLOC 2 \u2013 METTRE EN \u0152UVRE\n =========================================================== -->\n <section id=\"mettre-en-oeuvre\" class=\"section-block\">\n <div class=\"section-header\">\n <div class=\"section-icon icon-vert\">\u2699\ufe0f<\/div>\n <div class=\"section-header-text\">\n <div class=\"section-num num-vert\">Bloc 2<\/div>\n <h2 class=\"section-title\">Mettre en \u0153uvre<\/h2>\n <p class=\"section-subtitle\">Ressources et actions concr\u00e8tes pour les enseignants et les \u00e9tablissements<\/p>\n <\/div>\n <\/div>\n <div class=\"section-divider div-vert\"><\/div>\n\n <div class=\"oeuvre-grid\">\n\n <!-- PARTIE 1 : Charte ECCN \u2013 ressources en ligne horizontale -->\n <div class=\"sous-partie\">\n <div class=\"sous-partie-header sp-header-1\">\n <span class=\"sp-icon\">\ud83d\udcdc<\/span>\n <div>\n <h3>Partie 1 \u00b7 La charte ECCN<\/h3>\n <p>\u00c9ducation \u00e0 la cybers\u00e9curit\u00e9 et \u00e0 la citoyennet\u00e9 num\u00e9rique<\/p>\n <\/div>\n <\/div>\n <div class=\"sous-partie-body\">\n <ul class=\"article-list\">\n\n <li class=\"article-item\">\n <div class=\"article-thumb thumb-bleu\">\ud83d\udcc4<\/div>\n <div class=\"article-info\">\n <div class=\"article-type type-bleu\">Pr\u00e9sentation<\/div>\n <h4>La Charte ECCN : pr\u00e9sentation et objectifs<\/h4>\n <p>D\u00e9couvrez les principes, le cadre r\u00e9glementaire et les engagements de la charte.<\/p>\n <a href=\"https:\/\/eduscol.education.gouv.fr\/6720\/l-education-la-citoyennete-numerique\" class=\"article-link\" target=\"_blank\" rel=\"noopener\">Lire la pr\u00e9sentation \u2192<\/a>\n <\/div>\n <\/li>\n\n <li class=\"article-item\">\n <div class=\"article-thumb thumb-bleu\">\ud83c\udfac<\/div>\n <div class=\"article-info\">\n <div class=\"article-type type-bleu\">Zoom Ressources<\/div>\n <h4>Vinz et Lou \u2013 Ressources p\u00e9dagogiques<\/h4>\n <p>Vid\u00e9os et jeux interactifs pour aborder le num\u00e9rique responsable avec les plus jeunes (6-12 ans).<\/p>\n <a href=\"https:\/\/www.internetsanscrainte.fr\/ressources\/nouvelle-mallette-pedagogique-vinz-et-lou-pour-la-citoyennete-numerique\" class=\"article-link\" target=\"_blank\" rel=\"noopener\">Acc\u00e9der aux ressources \u2192<\/a>\n <\/div>\n <\/li>\n\n <li class=\"article-item\">\n <div class=\"article-thumb thumb-bleu\">\ud83d\uddd2\ufe0f<\/div>\n <div class=\"article-info\">\n <div class=\"article-type type-bleu\">Sc\u00e9narios p\u00e9dagogiques<\/div>\n <h4>S\u00e9quences et sc\u00e9narios p\u00e9dagogiques ECCN <span class=\"badge-soon\">\u00c0 venir<\/span><\/h4>\n <p>Des s\u00e9ances cl\u00e9s en main pour travailler les articles de la charte du cycle 2 au cycle 4.<\/p>\n <\/div>\n <\/li>\n\n <\/ul>\n <div class=\"editorial-note\">Zone \u00e9ditoriale \u00b7 \u00c0 compl\u00e9ter au fur et \u00e0 mesure avec les articles de la charte ECCN.<\/div>\n <div class=\"add-placeholder\" style=\"margin-top:12px;\">\n <span>\uff0b<\/span>Ajouter un article ou une ressource\n <\/div>\n <\/div>\n <\/div>\n\n <!-- PARTIE 2 : Actions \u00e9tablissement -->\n <div class=\"sous-partie sp-scrollable\">\n <div class=\"sous-partie-header sp-header-2\">\n <span class=\"sp-icon\">\ud83c\udfeb<\/span>\n <div>\n <h3>Partie 2 \u00b7 Actions \u00e9tablissement<\/h3>\n <p>Activit\u00e9s et projets \u00e0 d\u00e9ployer dans votre \u00e9tablissement<\/p>\n <\/div>\n <\/div>\n <div class=\"sous-partie-body\">\n <ul class=\"article-list\">\n\n <li class=\"article-item\">\n <div class=\"article-thumb thumb-vert\">\ud83c\udfa8<\/div>\n <div class=\"article-info\">\n <div class=\"article-type type-vert\">Activit\u00e9 collaborative<\/div>\n <h4>La Fresque des cybercitoyens<\/h4>\n <p>Un atelier coop\u00e9ratif pour comprendre les enjeux de la cybers\u00e9curit\u00e9 et du num\u00e9rique responsable.<\/p>\n <a href=\"#\" class=\"article-link\">Voir la pr\u00e9sentation \u2192<\/a>\n <\/div>\n <\/li>\n\n <li class=\"article-item\">\n <div class=\"article-thumb thumb-vert\">\ud83d\udcda<\/div>\n <div class=\"article-info\">\n <div class=\"article-type type-vert\">Ressources p\u00e9dagogiques<\/div>\n <h4>Ressources p\u00e9dagogiques \u2013 CNIL<\/h4>\n <p>Des ressources p\u00e9dagogiques propos\u00e9es par la CNIL pour accompagner les 8-15 ans dans le monde num\u00e9rique.<\/p>\n <a href=\"https:\/\/cnil.fr\/fr\/education\" class=\"article-link\" target=\"_blank\" rel=\"noopener\">Acc\u00e9der aux ressources \u2192<\/a>\n <\/div>\n <\/li>\n\n <li class=\"article-item\">\n <div class=\"article-thumb thumb-orange\">\ud83d\udccb<\/div>\n <div class=\"article-info\">\n <div class=\"article-type type-vert\">Fiches pratiques<\/div>\n <h4>Fiches cybers\u00e9curit\u00e9 <span class=\"badge-soon\">\u00c0 venir<\/span><\/h4>\n <p>Fiches th\u00e9matiques cl\u00e9s en main : mots de passe, phishing, r\u00e9seaux sociaux\u2026<\/p>\n <\/div>\n <\/li>\n\n <\/ul>\n\n <!-- Zone concours \u2013 4 cartes horizontales -->\n <div class=\"concours-zone\">\n <div class=\"concours-zone-header\">\n <div class=\"cz-icon\">\ud83c\udfc6<\/div>\n <div>\n <div class=\"cz-title\">Concours \u2013 Projets autour de la citoyennet\u00e9 num\u00e9rique<\/div>\n <div class=\"cz-sub\">Premier degr\u00e9 et second degr\u00e9 \u00b7 Cliquer sur une carte pour voir le d\u00e9tail<\/div>\n <\/div>\n <\/div>\n\n <div class=\"concours-h-grid\">\n\n <!-- 1. Prix Non au harc\u00e8lement -->\n <div class=\"concours-h-card\" onclick=\"this.classList.toggle('open')\">\n <div class=\"chc-top\">\n <span class=\"concours-num\">1<\/span>\n <div class=\"chc-emoji\">\ud83d\udeab<\/div>\n <\/div>\n <div class=\"chc-title\">Prix Non au harc\u00e8lement<\/div>\n <div class=\"concours-card-meta\" style=\"margin-top:6px;\">\n <span class=\"cc-badge orga\">Minist\u00e8re \u00b7 MAE<\/span>\n <span class=\"cc-badge public\">CP \u2192 Terminale<\/span>\n <span class=\"cc-badge cal\">\ud83d\udcc5 Fin janvier<\/span>\n <\/div>\n <div class=\"chc-body\">\n <div class=\"cb-label\" style=\"margin-top:12px;\">Production<\/div>\n <p class=\"cb-production\">Affiche ou vid\u00e9o collective. Prix sp\u00e9cial <em>\u00ab Pr\u00e9vention du cyberharc\u00e8lement \u00bb<\/em>.<\/p>\n <div class=\"cb-label\" style=\"margin-top:10px;\">Citoyennet\u00e9 num\u00e9rique<\/div>\n <ul>\n <li>Pr\u00e9vention du cyberharc\u00e8lement<\/li>\n <li>Respect d’autrui en ligne<\/li>\n <li>Comportements responsables sur les r\u00e9seaux sociaux<\/li>\n <li>Inclusion et lutte contre les discriminations num\u00e9riques<\/li>\n <\/ul>\n <a href=\"#\" class=\"cc-link soon\" style=\"margin-top:10px;\">Lien \u00e0 venir<\/a>\n <\/div>\n <span class=\"chc-toggle\">\u25be D\u00e9tail<\/span>\n <\/div>\n\n <!-- 2. #Z\u00e9roClich\u00e9 -->\n <div class=\"concours-h-card\" onclick=\"this.classList.toggle('open')\">\n <div class=\"chc-top\">\n <span class=\"concours-num\">2<\/span>\n <div class=\"chc-emoji\">\u2696\ufe0f<\/div>\n <\/div>\n <div class=\"chc-title\">#Z\u00e9roClich\u00e9 \u2013 \u00c9galit\u00e9 filles-gar\u00e7ons<\/div>\n <div class=\"concours-card-meta\" style=\"margin-top:6px;\">\n <span class=\"cc-badge orga\">CLEMI<\/span>\n <span class=\"cc-badge public\">Primaire \u2192 Lyc\u00e9e<\/span>\n <span class=\"cc-badge cal\">\ud83d\udcc5 Nov \u2013 Avril<\/span>\n <\/div>\n <div class=\"chc-body\">\n <div class=\"cb-label\" style=\"margin-top:12px;\">Production<\/div>\n <p class=\"cb-production\">Article, podcast, vid\u00e9o, \u00e9mission radio, reportage, blog\u2026<\/p>\n <div class=\"cb-label\" style=\"margin-top:10px;\">Citoyennet\u00e9 num\u00e9rique<\/div>\n <ul>\n <li>Analyse critique des m\u00e9dias et r\u00e9seaux sociaux<\/li>\n <li>Lutte contre les st\u00e9r\u00e9otypes et discriminations en ligne<\/li>\n <li>\u00c9ducation \u00e0 l’information<\/li>\n <li>Production responsable de contenus num\u00e9riques<\/li>\n <\/ul>\n <a href=\"#\" class=\"cc-link soon\" style=\"margin-top:10px;\">Lien \u00e0 venir<\/a>\n <\/div>\n <span class=\"chc-toggle\">\u25be D\u00e9tail<\/span>\n <\/div>\n\n <!-- 3. M\u00e9diatiks -->\n <div class=\"concours-h-card\" onclick=\"this.classList.toggle('open')\">\n <div class=\"chc-top\">\n <span class=\"concours-num\">3<\/span>\n <div class=\"chc-emoji\">\ud83d\udce1<\/div>\n <\/div>\n <div class=\"chc-title\">M\u00e9diatiks<\/div>\n <div class=\"concours-card-meta\" style=\"margin-top:6px;\">\n <span class=\"cc-badge orga\">CLEMI<\/span>\n <span class=\"cc-badge public\">\u00c9coles \u00b7 Coll\u00e8ges \u00b7 Lyc\u00e9es<\/span>\n <span class=\"cc-badge cal\">\ud83d\udcc5 Avant mars<\/span>\n <\/div>\n <div class=\"chc-body\">\n <div class=\"cb-label\" style=\"margin-top:12px;\">Productions<\/div>\n <ul>\n <li>Journaux num\u00e9riques \u00b7 Webradios<\/li>\n <li>WebTV \u00b7 Blogs et m\u00e9dias scolaires<\/li>\n <\/ul>\n <div class=\"cb-label\" style=\"margin-top:10px;\">Citoyennet\u00e9 num\u00e9rique<\/div>\n <ul>\n <li>V\u00e9rification de l’info, lutte contre les infox<\/li>\n <li>Publication responsable \u00b7 Droit \u00e0 l’image<\/li>\n <li>Esprit critique<\/li>\n <\/ul>\n <a href=\"#\" class=\"cc-link soon\" style=\"margin-top:10px;\">Lien \u00e0 venir<\/a>\n <\/div>\n <span class=\"chc-toggle\">\u25be D\u00e9tail<\/span>\n <\/div>\n\n <!-- 4. Troph\u00e9es des classes -->\n <div class=\"concours-h-card\" onclick=\"this.classList.toggle('open')\">\n <div class=\"chc-top\">\n <span class=\"concours-num\">4<\/span>\n <div class=\"chc-emoji\">\ud83c\udfc5<\/div>\n <\/div>\n <div class=\"chc-title\">Troph\u00e9es des classes<\/div>\n <div class=\"concours-card-meta\" style=\"margin-top:6px;\">\n <span class=\"cc-badge orga\">Internet Sans Crainte<\/span>\n <span class=\"cc-badge public\">\u00c9coles \u00b7 Coll\u00e8ges<\/span>\n <span class=\"cc-badge cal\">\ud83d\udcc5 Jan \u2013 Mai<\/span>\n <\/div>\n <div class=\"chc-body\">\n <div class=\"cb-label\" style=\"margin-top:12px;\">Th\u00e9matiques<\/div>\n <ul>\n <li>Identit\u00e9 num\u00e9rique \u00b7 R\u00e9seaux sociaux<\/li>\n <li>Protection des donn\u00e9es \u00b7 Cyberharc\u00e8lement<\/li>\n <li>Esprit critique<\/li>\n <\/ul>\n <a href=\"#\" class=\"cc-link soon\" style=\"margin-top:10px;\">Lien \u00e0 venir<\/a>\n <\/div>\n <span class=\"chc-toggle\">\u25be D\u00e9tail<\/span>\n <\/div>\n\n <\/div><!-- \/.concours-h-grid -->\n\n <!-- Concours locaux -->\n <div class=\"concours-local\" style=\"margin-top:10px;\">\n <span>\ud83d\udccd<\/span>\n <div><strong>Concours et d\u00e9fis locaux ou acad\u00e9miques<\/strong> \u2014 Zone \u00e9ditoriale \u00b7 \u00c0 compl\u00e9ter avec les initiatives de l’acad\u00e9mie de Nice.<\/div>\n <\/div>\n\n <div class=\"editorial-note\" style=\"margin-top:10px;\">Zone \u00e9ditoriale \u00b7 Remplacer les liens \u00ab \u00c0 venir \u00bb par les URLs officielles de chaque concours d\u00e8s leur publication.<\/div>\n <\/div>\n <!-- \/ Zone concours -->\n\n <div class=\"editorial-note\" style=\"margin-top:12px;\">Zone \u00e9ditoriale \u00b7 \u00c0 compl\u00e9ter avec d’autres actions et projets d’\u00e9tablissement.<\/div>\n <div class=\"add-placeholder\" style=\"margin-top:12px;\">\n <span>\uff0b<\/span>Ajouter un article ou une ressource\n <\/div>\n <\/div>\n <\/div>\n\n <\/div><!-- \/.oeuvre-grid -->\n\n <!-- Temps forts \u2013 pleine largeur sous les deux sous-parties -->\n <div class=\"temps-forts-fullwidth\">\n <div class=\"temps-forts-fw-header\">\n <span class=\"tf-fw-icon\">\ud83d\udcc5<\/span>\n <div>\n <div class=\"tf-fw-label\">Temps forts pour travailler autour de la citoyennet\u00e9<\/div>\n <div class=\"tf-fw-sub\">Chaque \u00e9v\u00e9nement donnera lieu \u00e0 une fiche r\u00e9flexe t\u00e9l\u00e9chargeable<\/div>\n <\/div>\n <\/div>\n <div class=\"tf-fw-grid\">\n\n <div class=\"tf-fw-card\">\n <div class=\"tf-fw-mois\">Octobre<\/div>\n <div class=\"tf-fw-emoji\">\ud83d\udd12<\/div>\n <h4>Cybermois<\/h4>\n <p>Sensibilisation \u00e0 la cybers\u00e9curit\u00e9 \u2014 campagne nationale et europ\u00e9enne<\/p>\n <span class=\"tf-fw-fiche soon\">Fiche r\u00e9flexe \u00b7 \u00c0 venir<\/span>\n <\/div>\n\n <div class=\"tf-fw-card\">\n <div class=\"tf-fw-mois\">F\u00e9vrier<\/div>\n <div class=\"tf-fw-emoji\">\ud83c\udf10<\/div>\n <h4>Safer Internet Day<\/h4>\n <p>Journ\u00e9e mondiale pour un usage plus s\u00fbr et responsable d’Internet<\/p>\n <span class=\"tf-fw-fiche soon\">Fiche r\u00e9flexe \u00b7 \u00c0 venir<\/span>\n <\/div>\n\n <div class=\"tf-fw-card\">\n <div class=\"tf-fw-mois\">Mars<\/div>\n <div class=\"tf-fw-emoji\">\ud83d\udcf0<\/div>\n <h4>Semaine de la presse et des m\u00e9dias<\/h4>\n <p>\u00c9ducation aux m\u00e9dias, esprit critique et culture de l’information<\/p>\n <span class=\"tf-fw-fiche soon\">Fiche r\u00e9flexe \u00b7 \u00c0 venir<\/span>\n <\/div>\n\n <div class=\"tf-fw-card\">\n <div class=\"tf-fw-mois\">Mai<\/div>\n <div class=\"tf-fw-emoji\">\ud83e\udd16<\/div>\n <h4>Mois de l’intelligence artificielle<\/h4>\n <p>Comprendre les enjeux et usages de l’IA en contexte scolaire<\/p>\n <span class=\"tf-fw-fiche soon\">Fiche r\u00e9flexe \u00b7 \u00c0 venir<\/span>\n <\/div>\n\n <\/div>\n <div class=\"editorial-note\" style=\"margin-top:16px;\">Zone \u00e9ditoriale \u00b7 Ajouter pour chaque temps fort une fiche r\u00e9flexe t\u00e9l\u00e9chargeable (objectifs, activit\u00e9s, ressources, liens).<\/div>\n <\/div>\n <!-- \/ Temps forts -->\n <\/section>\n\n\n <!-- ===========================================================\n BLOC 3 \u2013 SE FORMER ET \u00caTRE ACCOMPAGN\u00c9\n =========================================================== -->\n <section id=\"se-former\" class=\"section-block\">\n <div class=\"section-header\">\n <div class=\"section-icon icon-orange\">\ud83c\udf93<\/div>\n <div class=\"section-header-text\">\n <div class=\"section-num num-orange\">Bloc 3<\/div>\n <h2 class=\"section-title\">Se former et \u00eatre accompagn\u00e9<\/h2>\n <p class=\"section-subtitle\">Formations, espaces et ressources pour les professionnels de l’\u00e9ducation<\/p>\n <\/div>\n <\/div>\n <div class=\"section-divider div-orange\"><\/div>\n\n <!-- Sous-zone A : Formations -->\n <div class=\"b3-zone-title\">\n <span class=\"b3-zone-icon\" style=\"background:var(--bleu-pale);color:var(--bleu-en);\">\ud83c\udf93<\/span>\n Formations\n <\/div>\n <div class=\"former-grid\" style=\"margin-bottom:32px;\">\n\n <div class=\"former-card\">\n <div class=\"fc-icon fc-bleu\">\ud83d\uddd3\ufe0f<\/div>\n <h3>Formations PRAF \u2013 DRANE <span class=\"badge-soon\">\u00c0 venir<\/span><\/h3>\n <p>Consultez le plan r\u00e9gional acad\u00e9mique de formation pour les modules d\u00e9di\u00e9s au num\u00e9rique responsable et \u00e0 la citoyennet\u00e9 num\u00e9rique.<\/p>\n <a href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/le-p-a-f\/\" class=\"btn-link btn-outline\">Voir le PRAF \u2192<\/a>\n <\/div>\n\n <div class=\"former-card\">\n <div class=\"fc-icon fc-orange\">\ud83d\udcd0<\/div>\n <h3>PIX \u2013 \u00c9valuation des comp\u00e9tences<\/h3>\n <p>\u00c9valuer et d\u00e9velopper les comp\u00e9tences num\u00e9riques des \u00e9l\u00e8ves et des enseignants avec la plateforme PIX.<\/p>\n <a href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/pix\/\" class=\"btn-link btn-outline\">D\u00e9couvrir PIX \u2192<\/a>\n <\/div>\n\n <div class=\"former-card fc-magistere\">\n <div class=\"fc-icon fc-bleu\">\ud83e\udde9<\/div>\n <h3>Magist\u00e8re \u2013 Espaces Citoyennet\u00e9 num\u00e9rique<\/h3>\n <p>Espaces de formation en ligne propos\u00e9s par le MEN sur la citoyennet\u00e9 num\u00e9rique et la cybers\u00e9curit\u00e9. Les espaces disponibles \u00e9voluent r\u00e9guli\u00e8rement.<\/p>\n <a href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/magistere\/\" class=\"btn-link btn-outline\" target=\"_blank\" rel=\"noopener\">Voir les espaces Magist\u00e8re \u2192<\/a>\n <\/div>\n\n <\/div>\n\n <!-- Sous-zone B : Articles r\u00e9cents & ressources partenaires -->\n <div class=\"b3-zone-title\">\n <span class=\"b3-zone-icon\" style=\"background:var(--violet-pale);color:var(--violet);\">\ud83d\udcf0<\/span>\n Articles r\u00e9cents & ressources partenaires\n <\/div>\n <div class=\"b3-articles-grid\" style=\"margin-bottom:32px;\">\n\n <div class=\"b3-article-placeholder\">\n <div class=\"b3-ap-icon\">\ud83d\udda5\ufe0f<\/div>\n <div class=\"b3-ap-label\">Article \u00b7 Acad\u00e9mie Aix-Marseille<\/div>\n <div class=\"b3-ap-title\">Les \u00e9crans \u00e0 l’\u00e9cole : danger ou opportunit\u00e9 ?<\/div>\n <p>Halte aux id\u00e9es re\u00e7ues \u2014 un regard nuanc\u00e9 sur la place des \u00e9crans dans les apprentissages scolaires.<\/p>\n <a href=\"https:\/\/www.pedagogie.ac-aix-marseille.fr\/jcms\/c_11494067\/en\/ecrans-a-l-ecole-halte-aux-idees-recues\" class=\"btn-link btn-outline\" style=\"font-size:12px;padding:5px 11px;\" target=\"_blank\" rel=\"noopener\">Lire l’article \u2192<\/a>\n <\/div>\n\n <div class=\"b3-article-placeholder\">\n <div class=\"b3-ap-icon\">\ud83d\udcf1<\/div>\n <div class=\"b3-ap-label\">Ressource partenaire \u00b7 CNIL<\/div>\n <div class=\"b3-ap-title\">Fantom App \u2013 Se prot\u00e9ger sur les r\u00e9seaux sociaux<\/div>\n <p>Application mobile mise \u00e0 disposition par la CNIL pour une utilisation plus s\u00fbre et plus \u00e9clair\u00e9e des r\u00e9seaux sociaux par les adolescents.<\/p>\n <a href=\"https:\/\/www.pedagogie.ac-aix-marseille.fr\/jcms\/c_11485977\/en\/fantomapp-aider-les-adolescents-a-se-proteger-sur-les-reseaux-sociaux\" class=\"btn-link btn-outline\" style=\"font-size:12px;padding:5px 11px;\" target=\"_blank\" rel=\"noopener\">D\u00e9couvrir Fantom App \u2192<\/a>\n <\/div>\n\n <div class=\"b3-article-placeholder\">\n <div class=\"b3-ap-icon\">\ud83c\udf10<\/div>\n <div class=\"b3-ap-label\">Article \u00b7 Acad\u00e9mie Aix-Marseille<\/div>\n <div class=\"b3-ap-title\">Bienvenue dans la vie num\u00e9rique<\/div>\n <p>Un parcours de d\u00e9couverte des enjeux du num\u00e9rique pour accompagner les \u00e9l\u00e8ves dans leurs premiers pas en ligne.<\/p>\n <a href=\"https:\/\/www.pedagogie.ac-aix-marseille.fr\/jcms\/c_11469738\/en\/bienvenue-dans-la-vie-numerique\" class=\"btn-link btn-outline\" style=\"font-size:12px;padding:5px 11px;\" target=\"_blank\" rel=\"noopener\">Lire l’article \u2192<\/a>\n <\/div>\n\n <\/div>\n <div class=\"editorial-note\">Zone \u00e9ditoriale \u00b7 Remplacer les blocs ci-dessus par des liens vers des articles de la Gazette Connect\u00e9e ou d’autres ressources partenaires en lien avec la citoyennet\u00e9 num\u00e9rique.<\/div>\n <div class=\"add-placeholder\" style=\"margin-top:12px;margin-bottom:12px;\">\n <span>\uff0b<\/span>Ajouter un article ou une ressource partenaire\n <\/div>\n\n <\/section>\n\n\n <!-- ===========================================================\n BLOC 4 \u2013 ACCOMPAGNER LA PARENTALIT\u00c9 NUM\u00c9RIQUE\n =========================================================== -->\n <section id=\"parentalite\" class=\"section-block\">\n <div class=\"section-header\">\n <div class=\"section-icon icon-violet\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67<\/div>\n <div class=\"section-header-text\">\n <div class=\"section-num num-violet\">Bloc 4<\/div>\n <h2 class=\"section-title\">Accompagner la parentalit\u00e9 num\u00e9rique<\/h2>\n <p class=\"section-subtitle\">Ressources et outils pour impliquer et informer les familles<\/p>\n <\/div>\n <\/div>\n <div class=\"section-divider div-violet\"><\/div>\n\n <div class=\"parentalite-wrapper\">\n <h3>Des parents acteurs de la citoyennet\u00e9 num\u00e9rique<\/h3>\n <p>Les d\u00e9fis li\u00e9s au num\u00e9rique concernent toutes les familles, quels que soient leur niveau de familiarit\u00e9 ou leurs pratiques. Accompagner les usages de leurs enfants, ma\u00eetriser les outils \u00e9ducatifs (comme les ENT ou Educonnect) ou encore appr\u00e9hender les r\u00e9seaux sociaux et l’intelligence artificielle sont autant d’enjeux majeurs pour les parents d’aujourd’hui qui ont un impact sur le temps scolaire. L’enjeu vise donc \u00e0 renforcer le partenariat avec les \u00e9tablissements (1<sup>er<\/sup> et 2<sup>e<\/sup> degr\u00e9s) afin qu’ils puissent \u00eatre en mesure de proposer des actions d’accompagnement aux parents.<\/p>\n\n <div class=\"parentalite-grid\">\n\n <div class=\"parent-card\">\n <div class=\"pc-icon\">\ud83d\udccb<\/div>\n <div>\n <h4>Fiches r\u00e9flexes \u00e9tablissement <span class=\"badge-soon\">\u00c0 venir<\/span><\/h4>\n <p>Des ateliers pr\u00eats \u00e0 l’emploi, simples \u00e0 organiser, pour animer seul ou avec l’appui de la DRANE, du CLEMI ou d’autres partenaires des actions de sensibilisation \u00e0 la parentalit\u00e9 num\u00e9rique.<\/p>\n <\/div>\n <\/div>\n\n <div class=\"parent-card\">\n <div class=\"pc-icon\">\ud83d\udcd6<\/div>\n <div>\n <h4>Ressources partenaires<\/h4>\n <p>S\u00e9lection de ressources pour aider les familles \u00e0 appr\u00e9hender les enjeux du num\u00e9rique et adopter les bonnes pratiques.<\/p>\n <a href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/2026\/01\/15\/citoyennete-numerique\/\" target=\"_blank\">Voir les ressources \u2192<\/a>\n <\/div>\n <\/div>\n\n <div class=\"parent-card\">\n <div class=\"pc-icon\">\ud83d\udcc5<\/div>\n <div>\n <h4>Actualit\u00e9s parentalit\u00e9 num\u00e9rique <span class=\"badge-soon\">\u00c0 venir<\/span><\/h4>\n <\/div>\n <\/div>\n\n <\/div><!-- \/.parentalite-grid -->\n\n <div class=\"parent-cta\">\n <a href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/parents\/\" class=\"btn-link btn-violet\">Espace Parents \u2192<\/a>\n <a href=\"#\" class=\"btn-link btn-outline-violet\">Toutes les ressources familles \u2192<\/a>\n <\/div>\n\n <div class=\"editorial-note\" style=\"margin-top:20px;\">Zone \u00e9ditoriale \u00b7 \u00c0 compl\u00e9ter avec les ressources, \u00e9v\u00e9nements et articles d\u00e9di\u00e9s aux familles.<\/div>\n <\/div>\n\n <!-- Autres ressources utiles -->\n <div class=\"b3-zone-title\" style=\"margin-top:32px;\">\n <span class=\"b3-zone-icon\" style=\"background:var(--vert-pale);color:var(--vert);\">\ud83d\udd17<\/span>\n Autres ressources utiles\n <\/div>\n <div class=\"b3-ressources-wrapper\">\n\n <div class=\"b3-ressource-block\">\n <div class=\"b3r-header\">\n <span class=\"b3r-icon\">\ud83d\udd12<\/span>\n <div>\n <h4>Ressources partenaires de r\u00e9f\u00e9rence<\/h4>\n <p>Sites nationaux \u00e0 conna\u00eetre et \u00e0 partager avec les \u00e9quipes \u00e9ducatives et les familles.<\/p>\n <\/div>\n <\/div>\n <ul class=\"b3r-links\">\n <li>\n <a href=\"https:\/\/www.cnil.fr\/\" target=\"_blank\" rel=\"noopener\">CNIL \u2013 Ressources pour l’\u00e9cole<\/a>\n <span class=\"b3r-desc\">Guides et kits p\u00e9dagogiques sur la protection des donn\u00e9es en milieu scolaire<\/span>\n <\/li>\n <li>\n <a href=\"https:\/\/www.internetsanscrainte.fr\/\" target=\"_blank\" rel=\"noopener\">Internet Sans Crainte<\/a>\n <span class=\"b3r-desc\">Programme national de sensibilisation aux usages responsables d’Internet<\/span>\n <\/li>\n <li>\n <a href=\"https:\/\/www.clemi.fr\/\" target=\"_blank\" rel=\"noopener\">CLEMI<\/a>\n <span class=\"b3r-desc\">Centre pour l’\u00e9ducation aux m\u00e9dias et \u00e0 l’information<\/span>\n <\/li>\n <li><a href=\"#\" class=\"b3r-soon\">Autre ressource partenaire \u00b7 Lien \u00e0 ajouter<\/a><\/li>\n <\/ul>\n <div class=\"add-placeholder\" style=\"margin:0 18px 14px;\">\n <span>\uff0b<\/span>Ajouter une ressource partenaire\n <\/div>\n <\/div>\n\n <div class=\"b3-ressource-block\">\n <div class=\"b3r-header\">\n <span class=\"b3r-icon\">\u2696\ufe0f<\/span>\n <div>\n <h4>Textes, chartes et cadres r\u00e9glementaires<\/h4>\n <p>Les textes officiels encadrant la citoyennet\u00e9 num\u00e9rique et la cybers\u00e9curit\u00e9 \u00e0 l’\u00c9cole. Ces ressources peuvent \u00e9galement \u00eatre int\u00e9gr\u00e9es dans la Partie 1 (Charte ECCN) ou sous le Bloc 1.<\/p>\n <\/div>\n <\/div>\n <ul class=\"b3r-links\">\n <li>\n <a href=\"https:\/\/www.education.gouv.fr\/\" target=\"_blank\" rel=\"noopener\">\u00c9duscol \u2013 Internet responsable<\/a>\n <span class=\"b3r-desc\">Ressources officielles du Minist\u00e8re de l’\u00c9ducation nationale<\/span>\n <\/li>\n <li><a href=\"#\" class=\"b3r-soon\">Charte de bon usage du num\u00e9rique de l’\u00e9tablissement \u00b7 Lien \u00e0 ajouter<\/a><\/li>\n <li><a href=\"#\" class=\"b3r-soon\">Cadre de r\u00e9f\u00e9rence des comp\u00e9tences num\u00e9riques (CRCN) \u00b7 Lien \u00e0 ajouter<\/a><\/li>\n <li><a href=\"#\" class=\"b3r-soon\">R\u00e8glement int\u00e9rieur \u2013 clauses num\u00e9riques \u00b7 Lien \u00e0 ajouter<\/a><\/li>\n <\/ul>\n <div class=\"add-placeholder\" style=\"margin:0 18px 14px;\">\n <span>\uff0b<\/span>Ajouter un texte ou cadre r\u00e9glementaire\n <\/div>\n <\/div>\n\n <\/div>\n <div class=\"editorial-note\" style=\"margin-top:16px;\">Zone \u00e9ditoriale \u00b7 \u00c0 compl\u00e9ter avec les ressources valid\u00e9es par la DRANE. Les chartes et textes r\u00e9glementaires peuvent aussi \u00eatre ajout\u00e9s directement dans la Partie 1 \u00b7 Charte ECCN (Bloc 2) ou sous \u00ab Pourquoi enseigner la citoyennet\u00e9 num\u00e9rique ? \u00bb (Bloc 1).<\/div>\n\n <\/section>\n\n<\/main>\n\n<!-- ============================================================\n PIED DE PAGE\n============================================================ -->\n<footer class=\"site-footer\">\n \u00a9 2026 DRANE PACA \u2013 NICE \u00b7 \n <a href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/contact\/\">Contact<\/a> \u00b7 \n Construit avec le th\u00e8me <a href=\"https:\/\/www.graphene-theme.com\/\" target=\"_blank\" rel=\"noopener\">Graphene<\/a>\n<\/footer>\n\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-white-color has-text-color has-background has-link-color wp-elements-4750192021fe2d23a7a408c0c770262c wp-block-paragraph\" style=\"background-color:#171473\">Les derniers articles<\/p>\n\n\n<ul class=\"wp-block-latest-posts__list wp-block-latest-posts\"><li><div class=\"wp-block-latest-posts__featured-image alignleft\"><a href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/2026\/01\/15\/citoyennete-numerique\/\" aria-label=\"Citoyennet\u00e9 Num\u00e9rique\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/wp-content\/uploads\/sites\/69\/2026\/01\/citoyen-num-150x150.png\" class=\"attachment-thumbnail size-thumbnail wp-post-image\" alt=\"\" style=\"max-width:75px;max-height:75px;\" \/><\/a><\/div><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/2026\/01\/15\/citoyennete-numerique\/\">Citoyennet\u00e9 Num\u00e9rique<\/a><\/li>\n<\/ul>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Citoyennet\u00e9 num\u00e9rique et cybers\u00e9curit\u00e9 \u2013 DRANE PACA \u2013 NICE DRANEPACA DRANE PACA \u2013 NICE Direction R\u00e9gionale Acad\u00e9mique du Num\u00e9rique Accueil La DRANE Enseigner Former Exp\u00e9rimenter Prot\u00e9ger Piloter Ressources Je suis\u2026 Accueil \u203a Prot\u00e9ger \u203a Responsabilisation \u203a Citoyennet\u00e9 num\u00e9rique et cybers\u00e9curit\u00e9 \ud83d\udee1\ufe0f Prot\u00e9ger \u00b7 Responsabilisation Citoyennet\u00e9 num\u00e9riqueet cybers\u00e9curit\u00e9 Former des \u00e9l\u00e8ves responsables, critiques et engag\u00e9s dans … <\/p>\n<p><a class=\"more-link btn\" href=\"https:\/\/www.pedagogie.ac-nice.fr\/drane\/cybersecurite\/\">Lire la suite<\/a><\/p>\n","protected":false},"author":652,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-983","page","type-page","status-publish","hentry","nodate","item-wrap"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"gillesnaviliat","author_link":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/author\/gillesnaviliat\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Citoyennet\u00e9 num\u00e9rique et cybers\u00e9curit\u00e9 \u2013 DRANE PACA \u2013 NICE DRANEPACA DRANE PACA \u2013 NICE Direction R\u00e9gionale Acad\u00e9mique du Num\u00e9rique Accueil La DRANE Enseigner Former Exp\u00e9rimenter Prot\u00e9ger Piloter Ressources Je suis\u2026 Accueil \u203a Prot\u00e9ger \u203a Responsabilisation \u203a Citoyennet\u00e9 num\u00e9rique et cybers\u00e9curit\u00e9 \ud83d\udee1\ufe0f Prot\u00e9ger \u00b7 Responsabilisation Citoyennet\u00e9 num\u00e9riqueet cybers\u00e9curit\u00e9 Former des \u00e9l\u00e8ves responsables, critiques et engag\u00e9s dans\u2026","post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/wp-json\/wp\/v2\/pages\/983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/wp-json\/wp\/v2\/users\/652"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/wp-json\/wp\/v2\/comments?post=983"}],"version-history":[{"count":10,"href":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/wp-json\/wp\/v2\/pages\/983\/revisions"}],"predecessor-version":[{"id":1715,"href":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/wp-json\/wp\/v2\/pages\/983\/revisions\/1715"}],"wp:attachment":[{"href":"https:\/\/www.pedagogie.ac-nice.fr\/drane\/wp-json\/wp\/v2\/media?parent=983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}