EdTech Empowered Directory<\/title>\n <style>\n *, *::before, *::after { box-sizing: border-box; }\n html { scroll-behavior: smooth; height: 100%; }\n body {\n margin: 0;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n background: #f8fafc;\n color: #1e293b;\n min-height: 100vh;\n min-height: 100svh;\n }\n .app-shell { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }\n .header {\n position: sticky; top: 0; z-index: 30;\n border-bottom: 1px solid #e2e8f0;\n background: rgba(255,255,255,.95);\n backdrop-filter: blur(8px);\n }\n .header-inner { max-width: 80rem; margin: 0 auto; padding: 1rem 1rem; }\n @media (min-width: 768px) { .header-inner { padding: 1rem 1.5rem; } }\n @media (min-width: 1024px) { .header-inner { padding: 1rem 2rem; } }\n .header-row {\n display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0;\n }\n @media (min-width: 768px) {\n .header-row { flex-direction: row; align-items: center; justify-content: space-between; }\n }\n .brand { display: flex; min-width: 0; align-items: center; gap: 0.75rem; }\n .brand-icon-wrap {\n flex-shrink: 0; width: 2.75rem; height: 2.75rem;\n display: flex; align-items: center; justify-content: center;\n border-radius: 1rem; background: #4f46e5; box-shadow: 0 1px 2px rgba(0,0,0,.05);\n }\n .brand-icon-wrap svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: white; stroke-width: 2; }\n .brand-text { min-width: 0; }\n .brand-title { margin: 0; font-size: 1rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .brand-title .accent { color: #4f46e5; }\n @media (min-width: 640px) { .brand-title { font-size: 1.125rem; } }\n @media (min-width: 1024px) { .brand-title { font-size: 1.25rem; } }\n .brand-desc { margin: 0; font-size: 0.875rem; color: #64748b; display: none; }\n @media (min-width: 640px) { .brand-desc { display: block; } }\n .search-wrap { width: 100%; }\n @media (min-width: 768px) { .search-wrap { max-width: 28rem; } }\n @media (min-width: 1024px) { .search-wrap { max-width: 32rem; } }\n .search-box { position: relative; }\n .search-icon-wrap {\n position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; padding-left: 1rem; pointer-events: none;\n }\n .search-icon-wrap svg { width: 1.25rem; height: 1.25rem; stroke: #94a3b8; fill: none; stroke-width: 2; }\n .search-input {\n width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem;\n font-size: 0.875rem; color: #1e293b; background: #f1f5f9;\n border: 1px solid #cbd5e1; border-radius: 1rem;\n outline: none; transition: border-color .2s, background .2s, box-shadow .2s;\n }\n .search-input::placeholder { color: #94a3b8; }\n .search-input:focus { border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,.1); }\n .hero {\n min-height: clamp(260px, 42svh, 520px); display: flex; align-items: center;\n position: relative; overflow: hidden;\n background: linear-gradient(to bottom right, #4f46e5, #4f46e5, #4338ca);\n }\n @media (max-width: 640px) { .hero { min-height: auto; } }\n .hero-bg { position: absolute; inset: 0; opacity: .1; }\n .hero-bg .blur1 { position: absolute; top: -5rem; left: -5rem; width: 16rem; height: 16rem; border-radius: 50%; background: white; filter: blur(48px); }\n .hero-bg .blur2 { position: absolute; right: 0; bottom: 0; width: 18rem; height: 18rem; border-radius: 50%; background: white; filter: blur(48px); }\n .hero-inner { position: relative; width: 100%; max-width: 80rem; margin: 0 auto; padding: 2.5rem 1rem; text-align: center; }\n @media (min-width: 640px) { .hero-inner { padding: 3.5rem 1.5rem; } }\n @media (min-width: 1024px) { .hero-inner { padding: 5rem 2rem; } }\n .hero-content { max-width: 48rem; margin: 0 auto; }\n .hero-badge {\n display: inline-flex; align-items: center; margin-bottom: 1rem;\n padding: 0.375rem 1rem; font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,.9);\n background: rgba(255,255,255,.15); border-radius: 9999px; border: 1px solid rgba(255,255,255,.2);\n }\n @media (min-width: 640px) { .hero-badge { font-size: 0.875rem; } }\n .hero h2 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: white; }\n @media (min-width: 640px) { .hero h2 { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .hero h2 { font-size: 3rem; } }\n .hero-desc { margin: 1rem auto 0; max-width: 42rem; font-size: 0.875rem; line-height: 1.5; color: rgba(255,255,255,.8); }\n @media (min-width: 640px) { .hero-desc { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.75; } }\n .main { flex: 1; max-width: 80rem; width: 100%; margin: 0 auto; padding: 1.5rem 1rem; }\n @media (min-width: 640px) { .main { padding: 2rem 1.5rem; } }\n @media (min-width: 1024px) { .main { padding: 2.5rem 2rem; } }\n .filters { margin-bottom: 2rem; }\n .filters-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }\n .filters-title svg { width: 1rem; height: 1rem; stroke: #64748b; fill: none; stroke-width: 2; }\n .filters-title span { font-size: 0.875rem; font-weight: 600; color: #334155; }\n .categories-wrap { overflow-x: auto; padding-bottom: 0.5rem; }\n .categories-wrap::-webkit-scrollbar { display: none; }\n .categories-wrap { -ms-overflow-style: none; scrollbar-width: none; }\n .categories { display: flex; gap: 0.5rem; width: max-content; min-width: 100%; }\n .cat-btn {\n flex-shrink: 0; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 9999px;\n border: 1px solid #e2e8f0; background: white; color: #334155; cursor: pointer; transition: all .2s;\n }\n .cat-btn:hover { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }\n .cat-btn.active { background: #4f46e5; color: white; border-color: #4f46e5; box-shadow: 0 1px 2px rgba(0,0,0,.05); }\n .results-head { margin-bottom: 1.5rem; }\n .results-head h3 { margin: 0; font-size: 1.125rem; font-weight: 600; color: #0f172a; }\n .results-count { margin: 0; font-size: 0.875rem; color: #64748b; }\n .grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }\n @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }\n @media (min-width: 1280px) { .grid { grid-template-columns: repeat(3, 1fr); } }\n .card {\n display: flex; flex-direction: column; min-height: 280px;\n padding: 1.25rem; background: white; border: 1px solid #e2e8f0; border-radius: 1.5rem;\n box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s;\n }\n .card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }\n @media (min-width: 640px) { .card { padding: 1.5rem; } }\n .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }\n .card-icon-wrap {\n flex-shrink: 0; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;\n border-radius: 1rem; background: #f1f5f9; transition: background .2s;\n }\n .card:hover .card-icon-wrap { background: #eef2ff; }\n .card-icon-wrap svg { width: 1.5rem; height: 1.5rem; fill: none; stroke-width: 2; }\n .card-cat {\n max-width: 58%; padding: 0.25rem 0.75rem; font-size: 11px; font-weight: 500; line-height: 1.25; text-align: right;\n background: #f1f5f9; color: #334155; border-radius: 9999px;\n }\n @media (min-width: 640px) { .card-cat { font-size: 12px; } }\n .card h3 { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: #0f172a; }\n @media (min-width: 640px) { .card h3 { font-size: 1.25rem; } }\n .card-desc { margin: 0 0 1.5rem; flex-grow: 1; font-size: 0.875rem; line-height: 1.5; color: #475569; }\n .card-link {\n display: inline-flex; align-items: center; justify-content: center; width: 100%;\n padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; color: #4338ca; background: #eef2ff;\n border-radius: 1rem; text-decoration: none; transition: background .2s;\n }\n .card-link:hover { background: #e0e7ff; }\n .card-link svg { margin-left: 0.5rem; width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }\n .empty-state {\n display: none; padding: 3rem 1.25rem; text-align: center; background: white;\n border: 1px dashed #cbd5e1; border-radius: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);\n }\n .empty-state.visible { display: block; }\n @media (min-width: 640px) { .empty-state { padding: 3.5rem 1.5rem; } }\n .empty-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; background: #f1f5f9; border-radius: 1rem; }\n .empty-icon svg { width: 1.75rem; height: 1.75rem; stroke: #94a3b8; fill: none; stroke-width: 2; }\n .empty-state h3 { margin: 0; font-size: 1.125rem; font-weight: 600; color: #0f172a; }\n .empty-state p { margin: 0.5rem auto 0; max-width: 28rem; font-size: 0.875rem; line-height: 1.5; color: #64748b; }\n .reset-btn {\n margin-top: 1.5rem; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; color: white; background: #4f46e5;\n border: none; border-radius: 0.75rem; cursor: pointer; transition: background .2s;\n }\n .reset-btn:hover { background: #4338ca; }\n .hidden { display: none !important; }\n .icon-indigo svg, .icon-indigo { stroke: #6366f1; }\n .icon-blue svg, .icon-blue { stroke: #60a5fa; }\n .icon-purple svg, .icon-purple { stroke: #a855f7; }\n .icon-green svg, .icon-green { stroke: #22c55e; }\n .icon-slate svg, .icon-slate { stroke: #334155; }\n .icon-orange svg, .icon-orange { stroke: #f97316; }\n .icon-pink svg, .icon-pink { stroke: #ec4899; }\n .icon-red svg, .icon-red { stroke: #ef4444; }\n .icon-teal svg, .icon-teal { stroke: #0d9488; }\n .icon-yellow svg, .icon-yellow { stroke: #eab308; }\n .icon-emerald svg, .icon-emerald { stroke: #10b981; }\n <\/style>\n<\/head>\n<body>\n <div class=\"app-shell\">\n <header class=\"header\">\n <div class=\"header-inner\">\n <div class=\"header-row\">\n <div class=\"brand\">\n <div class=\"brand-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\n <\/div>\n <div class=\"brand-text\">\n <h1 class=\"brand-title\">EdTech Empowered <span class=\"accent\">Directory<\/span><\/h1>\n <p class=\"brand-desc\">Un r\u00e9pertoire d’outils p\u00e9dagogiques pour enseignants<\/p>\n <\/div>\n <\/div>\n <div class=\"search-wrap\">\n <div class=\"search-box\">\n <div class=\"search-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>\n <\/div>\n <input type=\"text\" id=\"searchInput\" class=\"search-input\" placeholder=\"Rechercher un outil, une cat\u00e9gorie ou un usage...\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n <section class=\"hero\">\n <div class=\"hero-bg\"><div class=\"blur1\"><\/div><div class=\"blur2\"><\/div><\/div>\n <div class=\"hero-inner\">\n <div class=\"hero-content\">\n <p class=\"hero-badge\">Guide p\u00e9dagogique num\u00e9rique<\/p>\n <h2>Le guide ultime des sites pour enseignants<\/h2>\n <p class=\"hero-desc\">Explorez plus de 50 outils gratuits inspir\u00e9s du guide P.A.R.T.S Framework. Filtrez par domaine, recherchez rapidement, et trouvez la ressource id\u00e9ale pour enrichir vos cours.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <main class=\"main\">\n <section class=\"filters\">\n <div class=\"filters-title\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"\/><\/svg>\n <span>Filtrer par cat\u00e9gorie<\/span>\n <\/div>\n <div class=\"categories-wrap\">\n <div id=\"categoriesContainer\" class=\"categories\"><\/div>\n <\/div>\n <\/section>\n\n <section class=\"results-head\">\n <h3>Ressources disponibles<\/h3>\n <p id=\"resultsCount\" class=\"results-count\">Chargement des r\u00e9sultats…<\/p>\n <\/section>\n\n <section>\n <div id=\"resourcesContainer\" class=\"grid\"><\/div>\n <div id=\"emptyState\" class=\"empty-state\">\n <div class=\"empty-icon\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 15 6 6\"\/><path d=\"M9 11a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z\"\/><path d=\"M16 16a5 5 0 0 0-7-7\"\/><\/svg>\n <\/div>\n <h3>Aucun outil trouv\u00e9<\/h3>\n <p>Essaie de modifier tes mots-cl\u00e9s ou de changer de cat\u00e9gorie pour afficher d’autres r\u00e9sultats.<\/p>\n <button type=\"button\" id=\"resetBtn\" class=\"reset-btn\">R\u00e9initialiser les filtres<\/button>\n <\/div>\n <\/section>\n <\/main>\n <\/div>\n\n <script>\n (function() {\n var resources = [\n { id: 30, name: \"Amplify's PolyPad\", category: \"Maths Tools\", description: \"Le meilleur tableau blanc math\u00e9matique avec des manipulateurs g\u00e9om\u00e9triques virtuels.\", icon: \"calculator\", color: \"icon-indigo\", url: \"https:\/\/polypad.amplify.com\" },\n { id: 31, name: \"Maths Learning Center Apps\", category: \"Maths Tools\", description: \"Suite d'applications visuelles pour les concepts math\u00e9matiques, comme les fractions ou les horloges.\", icon: \"layout-grid\", color: \"icon-blue\", url: \"https:\/\/www.mathlearningcenter.org\/apps\" },\n { id: 32, name: \"99Math\", category: \"Maths Tools\", description: \"Jeu multijoueur engageant pour pratiquer le calcul mental en temps r\u00e9el en classe.\", icon: \"gamepad\", color: \"icon-purple\", url: \"https:\/\/99math.com\" },\n { id: 33, name: \"MathsBot\", category: \"Maths Tools\", description: \"Outils pr\u00e9cieux pour les professeurs de maths : manipulateurs, questions al\u00e9atoires et \u00e9nigmes.\", icon: \"calculator\", color: \"icon-slate\", url: \"https:\/\/mathsbot.com\" },\n { id: 34, name: \"TopMarks\", category: \"Maths Tools\", description: \"Hub de jeux \u00e9ducatifs populaires pour r\u00e9viser les math\u00e9matiques.\", icon: \"check\", color: \"icon-green\", url: \"https:\/\/www.topmarks.co.uk\" },\n { id: 35, name: \"IXL\", category: \"Maths Tools\", description: \"Pratique compl\u00e8te et analytique des math\u00e9matiques, class\u00e9e par niveaux de comp\u00e9tence.\", icon: \"activity\", color: \"icon-green\", url: \"https:\/\/fr.ixl.com\" },\n { id: 36, name: \"Corbett Maths Primary\", category: \"Maths Tools\", description: \"Vid\u00e9os explicatives, fiches de travail et probl\u00e8mes quotidiens gratuits.\", icon: \"calculator\", color: \"icon-blue\", url: \"https:\/\/corbettmathsprimary.com\" },\n { id: 37, name: \"Khan Academy\", category: \"Maths Tools\", description: \"Le\u00e7ons vid\u00e9o, exercices interactifs et parcours d'apprentissage gratuits de haute qualit\u00e9.\", icon: \"book\", color: \"icon-emerald\", url: \"https:\/\/fr.khanacademy.org\" },\n { id: 38, name: \"Boddle Learning\", category: \"Maths Tools\", description: \"Jeu math\u00e9matique en 3D engageant pour les \u00e9l\u00e8ves avec personnalisation d'avatars.\", icon: \"gamepad\", color: \"icon-blue\", url: \"https:\/\/www.boddlelearning.com\" },\n { id: 39, name: \"Prodigy Maths\", category: \"Maths Tools\", description: \"Jeu de r\u00f4le fantastique o\u00f9 les combats se gagnent en r\u00e9solvant des probl\u00e8mes de maths.\", icon: \"gamepad\", color: \"icon-orange\", url: \"https:\/\/www.prodigygame.com\" },\n { id: 40, name: \"Splash Learn\", category: \"Maths Tools\", description: \"Programme d'apprentissage des math\u00e9matiques interactif et visuellement attrayant.\", icon: \"smile\", color: \"icon-pink\", url: \"https:\/\/www.splashlearn.com\" },\n { id: 41, name: \"Science Bob\", category: \"Science Tools\", description: \"Exp\u00e9riences scientifiques faciles et s\u00fbres \u00e0 r\u00e9aliser en classe ou \u00e0 la maison.\", icon: \"flask\", color: \"icon-green\", url: \"https:\/\/sciencebob.com\" },\n { id: 42, name: \"BrainPOP Science\", category: \"Science Tools\", description: \"Courtes vid\u00e9os anim\u00e9es expliquant des concepts scientifiques de mani\u00e8re ludique.\", icon: \"video\", color: \"icon-orange\", url: \"https:\/\/www.brainpop.com\/science\/\" },\n { id: 43, name: \"HowStuffWorks\", category: \"Science Tools\", description: \"Explications d\u00e9taill\u00e9es sur le fonctionnement du monde qui nous entoure.\", icon: \"flask\", color: \"icon-blue\", url: \"https:\/\/www.howstuffworks.com\" },\n { id: 44, name: \"Ology\", category: \"Science Tools\", description: \"Site scientifique du mus\u00e9e am\u00e9ricain d'histoire naturelle con\u00e7u pour les enfants.\", icon: \"globe\", color: \"icon-teal\", url: \"https:\/\/www.amnh.org\/explore\/ology\" },\n { id: 45, name: \"PHET Interactive Simulations\", category: \"Science Tools\", description: \"Simulations interactives gratuites cr\u00e9\u00e9es par l'Universit\u00e9 du Colorado.\", icon: \"activity\", color: \"icon-purple\", url: \"https:\/\/phet.colorado.edu\" },\n { id: 27, name: \"Get Epic Reading\", category: \"Reading Websites\", description: \"Biblioth\u00e8que num\u00e9rique de livres pour enfants avec lecture audio int\u00e9gr\u00e9e.\", icon: \"book\", color: \"icon-indigo\", url: \"https:\/\/www.getepic.com\" },\n { id: 28, name: \"StoryLine Online\", category: \"Reading Websites\", description: \"Vid\u00e9os d'acteurs c\u00e9l\u00e8bres lisant \u00e0 haute voix des livres pour enfants.\", icon: \"video\", color: \"icon-red\", url: \"https:\/\/storylineonline.net\" },\n { id: 29, name: \"ReadTheory\", category: \"Reading Websites\", description: \"Exercices de compr\u00e9hension \u00e9crite qui s'adaptent au niveau de l'\u00e9l\u00e8ve.\", icon: \"book\", color: \"icon-blue\", url: \"https:\/\/readtheory.org\" },\n { id: 1, name: \"myViewBoard by ViewSonic\", category: \"Modelling And Teaching\", description: \"\u00c9cosyst\u00e8me de tableau blanc num\u00e9rique complet pour pr\u00e9parer et animer des le\u00e7ons interactives.\", icon: \"monitor\", color: \"icon-blue\", url: \"https:\/\/myviewboard.com\" },\n { id: 2, name: \"Classroomscreen\", category: \"Modelling And Teaching\", description: \"\u00c9cran de classe avec minuterie, feux tricolores et mesure du bruit.\", icon: \"layout-grid\", color: \"icon-green\", url: \"https:\/\/classroomscreen.com\" },\n { id: 3, name: \"Slidesgo\", category: \"Modelling And Teaching\", description: \"Mod\u00e8les gratuits et esth\u00e9tiques pour Google Slides et PowerPoint.\", icon: \"palette\", color: \"icon-orange\", url: \"https:\/\/slidesgo.com\" },\n { id: 4, name: \"Bouncy Balls\", category: \"Modelling And Teaching\", description: \"Outil visuel pour g\u00e9rer le volume sonore de la classe \u00e0 l'aide du micro.\", icon: \"volume\", color: \"icon-red\", url: \"https:\/\/bouncyballs.org\" },\n { id: 5, name: \"Padlet\", category: \"Modelling And Teaching\", description: \"Mur virtuel pour collaborer, partager des id\u00e9es ou publier des ressources.\", icon: \"users\", color: \"icon-purple\", url: \"https:\/\/padlet.com\" },\n { id: 6, name: \"Canva\", category: \"Modelling And Teaching\", description: \"Outil de conception graphique pour cr\u00e9er des affiches, vid\u00e9os et pr\u00e9sentations.\", icon: \"palette\", color: \"icon-indigo\", url: \"https:\/\/www.canva.com\/education\/\" },\n { id: 7, name: \"Oak National Academy\", category: \"Modelling And Teaching\", description: \"Ressources gratuites, le\u00e7ons vid\u00e9o et quiz cr\u00e9\u00e9s par des enseignants.\", icon: \"presentation\", color: \"icon-emerald\", url: \"https:\/\/www.thenational.academy\/\" },\n { id: 8, name: \"Mentimeter\", category: \"Assessment and Gamification\", description: \"Pr\u00e9sentations interactives avec sondages en direct et nuages de mots.\", icon: \"activity\", color: \"icon-blue\", url: \"https:\/\/www.mentimeter.com\" },\n { id: 9, name: \"Gimkit\", category: \"Assessment and Gamification\", description: \"Jeu de quiz en direct o\u00f9 les \u00e9l\u00e8ves gagnent de l'argent virtuel en r\u00e9pondant.\", icon: \"gamepad\", color: \"icon-indigo\", url: \"https:\/\/www.gimkit.com\" },\n { id: 10, name: \"Kahoot!\", category: \"Assessment and Gamification\", description: \"Plateforme incontournable de quiz amusants et interactifs.\", icon: \"check\", color: \"icon-yellow\", url: \"https:\/\/kahoot.com\" },\n { id: 11, name: \"Edpuzzle\", category: \"Assessment and Gamification\", description: \"Transforme n'importe quelle vid\u00e9o en le\u00e7on interactive avec questions int\u00e9gr\u00e9es.\", icon: \"video\", color: \"icon-yellow\", url: \"https:\/\/edpuzzle.com\" },\n { id: 12, name: \"Educaplay\", category: \"Assessment and Gamification\", description: \"Cr\u00e9ation d'activit\u00e9s multim\u00e9dias \u00e9ducatives vari\u00e9es.\", icon: \"layout-grid\", color: \"icon-teal\", url: \"https:\/\/www.educaplay.com\" },\n { id: 13, name: \"Toy Theater\", category: \"Assessment and Gamification\", description: \"Collection de jeux \u00e9ducatifs interactifs pour le primaire.\", icon: \"gamepad\", color: \"icon-red\", url: \"https:\/\/toytheater.com\" },\n { id: 14, name: \"ClassTools.net\", category: \"Assessment and Gamification\", description: \"G\u00e9n\u00e9rateurs gratuits de jeux \u00e9ducatifs, quiz et diagrammes.\", icon: \"file\", color: \"icon-slate\", url: \"https:\/\/www.classtools.net\" },\n { id: 15, name: \"GoNoodle\", category: \"Brain Breaks\", description: \"Vid\u00e9os de mouvement et de pleine conscience pour faire des pauses actives.\", icon: \"smile\", color: \"icon-green\", url: \"https:\/\/www.gonoodle.com\" },\n { id: 16, name: \"Neal.fun\", category: \"Brain Breaks\", description: \"Petites exp\u00e9riences web et jeux interactifs pour d\u00e9tendre l'atmosph\u00e8re.\", icon: \"smile\", color: \"icon-purple\", url: \"https:\/\/neal.fun\" },\n { id: 17, name: \"Teachflix\", category: \"Brain Breaks\", description: \"Collection de vid\u00e9os \u00e9ducatives courtes s\u00e9lectionn\u00e9es pour les enseignants.\", icon: \"video\", color: \"icon-red\", url: \"https:\/\/teachflix.org\" },\n { id: 18, name: \"Classroom Doodles\", category: \"Brain Breaks\", description: \"Coloriages gratuits et cr\u00e9atifs \u00e0 imprimer pour des moments calmes en classe.\", icon: \"palette\", color: \"icon-pink\", url: \"https:\/\/www.classroomdoodles.com\" },\n { id: 19, name: \"Natural Curriculum\", category: \"Writing\/SPAG Websites\", description: \"Ressources de grammaire engageantes bas\u00e9es sur des documentaires animaliers.\", icon: \"pen\", color: \"icon-green\", url: \"https:\/\/www.naturalcurriculum.co.uk\" },\n { id: 20, name: \"Once Upon A Picture\", category: \"Writing\/SPAG Websites\", description: \"Images inspirantes et questions pour stimuler l'\u00e9criture cr\u00e9ative.\", icon: \"pen\", color: \"icon-blue\", url: \"https:\/\/www.onceuponapicture.co.uk\" },\n { id: 21, name: \"Handwriting Repeater\", category: \"Writing\/SPAG Websites\", description: \"Outil pratique pour g\u00e9n\u00e9rer et animer des mod\u00e8les d'\u00e9criture.\", icon: \"pen\", color: \"icon-slate\", url: \"https:\/\/www.ictgames.com\/mobilePage\/writingRepeater\/\" },\n { id: 22, name: \"Pobble 365\", category: \"Writing\/SPAG Websites\", description: \"Une image par jour accompagn\u00e9e d'amorces d'histoires et d'activit\u00e9s d'\u00e9criture.\", icon: \"pen\", color: \"icon-indigo\", url: \"https:\/\/pobble365.com\" },\n { id: 23, name: \"Galactic Phonics\", category: \"Writing\/SPAG Websites\", description: \"Ressources imprimables et interactives pour la phon\u00e9tique.\", icon: \"file\", color: \"icon-yellow\", url: \"https:\/\/www.galacticphonics.com\" },\n { id: 24, name: \"Phonics and Stuff\", category: \"Writing\/SPAG Websites\", description: \"Jeux et activit\u00e9s en ligne pour accompagner l'apprentissage de la phon\u00e9tique.\", icon: \"volume\", color: \"icon-blue\", url: \"https:\/\/phonicsandstuff.com\" },\n { id: 25, name: \"Phonics Play\", category: \"Writing\/SPAG Websites\", description: \"Jeux interactifs populaires pour l'enseignement ludique de la phon\u00e9tique.\", icon: \"gamepad\", color: \"icon-orange\", url: \"https:\/\/www.phonicsplay.co.uk\" },\n { id: 26, name: \"Wordwall\", category: \"Writing\/SPAG Websites\", description: \"Cr\u00e9ation facile d'activit\u00e9s personnalis\u00e9es comme les anagrammes ou les quiz.\", icon: \"gamepad\", color: \"icon-blue\", url: \"https:\/\/wordwall.net\" },\n { id: 46, name: \"Seterra Geography Games\", category: \"Humanities Tools\", description: \"Jeux de quiz g\u00e9ographiques sur les pays, capitales, villes et drapeaux.\", icon: \"globe\", color: \"icon-blue\", url: \"https:\/\/www.seterra.com\" },\n { id: 47, name: \"rooms.xyz\", category: \"Humanities Tools\", description: \"Cr\u00e9ation de pi\u00e8ces interactives en 3D pour des reconstitutions historiques.\", icon: \"layout-grid\", color: \"icon-indigo\", url: \"https:\/\/rooms.xyz\" },\n { id: 48, name: \"Ducksters\", category: \"Humanities Tools\", description: \"Articles \u00e9ducatifs clairs et adapt\u00e9s aux enfants sur l'histoire et la g\u00e9ographie.\", icon: \"book\", color: \"icon-yellow\", url: \"https:\/\/www.ducksters.com\" },\n { id: 49, name: \"Discovery Education\", category: \"Humanities Tools\", description: \"Ressources multim\u00e9dias et vid\u00e9os pour l'enseignement des sciences humaines.\", icon: \"video\", color: \"icon-blue\", url: \"https:\/\/www.discoveryeducation.com\" },\n { id: 50, name: \"Google Arts and Culture\", category: \"Humanities Tools\", description: \"Visites virtuelles de mus\u00e9es et exploration d'\u0153uvres d'art en haute r\u00e9solution.\", icon: \"palette\", color: \"icon-red\", url: \"https:\/\/artsandculture.google.com\" }\n ];\n\n var iconSvgs = {\n book: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>',\n search: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>',\n calculator: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\"\/><path d=\"M8 6h.01\"\/><path d=\"M16 6h.01\"\/><path d=\"M8 10h.01\"\/><path d=\"M8 14h.01\"\/><path d=\"M12 14h.01\"\/><path d=\"M16 10h.01\"\/><path d=\"M16 14h.01\"\/><\/svg>',\n \"layout-grid\": '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>',\n gamepad: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"6\" y1=\"12\" x2=\"10\" y2=\"12\"\/><line x1=\"8\" y1=\"10\" x2=\"8\" y2=\"14\"\/><line x1=\"15\" y1=\"13\" x2=\"15.01\" y2=\"13\"\/><line x1=\"18\" y1=\"11\" x2=\"18.01\" y2=\"11\"\/><rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"2\"\/><\/svg>',\n check: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><path d=\"m9 11 3 3L22 4\"\/><\/svg>',\n activity: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>',\n flask: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 2v7.31\"\/><path d=\"M14 9.3V2\"\/><path d=\"M8.5 2h7\"\/><path d=\"M14 9.3a6.5 6.5 0 1 1-4 0\"\/><path d=\"M5.52 16h12.96\"\/><\/svg>',\n video: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\"\/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"\/><\/svg>',\n globe: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"\/><path d=\"M2 12h20\"\/><\/svg>',\n pen: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19l7-7 3 3-7 7-3-3z\"\/><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/><path d=\"M2 2l7.586 7.586\"\/><\/svg>',\n file: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><path d=\"M14 2v6h6\"\/><path d=\"M16 13H8\"\/><path d=\"M16 17H8\"\/><\/svg>',\n smile: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"\/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"\/><\/svg>',\n \"external-link\": '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><path d=\"M15 3h6v6\"\/><path d=\"M10 14L21 3\"\/><\/svg>',\n monitor: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>',\n palette: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"13.5\" cy=\"6.5\" r=\".5\"\/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\"\/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\"\/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\"\/><path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.648 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.648-1.648H20c5.5 0 10-4.5 10-10 0-.926-.746-1.648-1.648-1.648-.437 0-.835.18-1.125.437-.289.29-.652.438-1.125.438-.926 0-1.648-.746-1.648-1.648 0-.437.18-.835.437-1.125.29-.29.652-.438 1.125-.438C20.746 2 20 2.722 20 3.648Z\"\/><\/svg>',\n volume: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"\/><path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"\/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14\"\/><\/svg>',\n users: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>',\n presentation: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 7v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7\"\/><path d=\"M12 22v-8\"\/><path d=\"M2 3h20\"\/><\/svg>'\n };\n\n function icon(name) { return iconSvgs[name] || iconSvgs.book; }\n\n var searchTerm = \"\";\n var selectedCategory = \"Toutes\";\n var categories = [\"Toutes\"].concat(resources.reduce(function(acc, r) {\n if (acc.indexOf(r.category) === -1) acc.push(r.category);\n return acc;\n }, []));\n\n var searchInput = document.getElementById(\"searchInput\");\n var categoriesContainer = document.getElementById(\"categoriesContainer\");\n var resourcesContainer = document.getElementById(\"resourcesContainer\");\n var emptyState = document.getElementById(\"emptyState\");\n var resetBtn = document.getElementById(\"resetBtn\");\n var resultsCount = document.getElementById(\"resultsCount\");\n\n function escapeQuotes(t) { return t.replace(\/'\/g, \"\\\\'\"); }\n\n function renderCategories() {\n categoriesContainer.innerHTML = categories.map(function(cat) {\n var isActive = cat === selectedCategory;\n return '<button type=\"button\" onclick=\"window.setCategory(\\'' + escapeQuotes(cat) + '\\')\" class=\"cat-btn' + (isActive ? ' active' : '') + '\">' + cat + '<\/button>';\n }).join(\"\");\n }\n\n window.setCategory = function(cat) {\n selectedCategory = cat;\n renderCategories();\n renderResources();\n };\n\n function getFiltered() {\n var term = searchTerm.trim().toLowerCase();\n return resources.filter(function(r) {\n var matchSearch = !term || r.name.toLowerCase().indexOf(term) !== -1 || r.description.toLowerCase().indexOf(term) !== -1 || r.category.toLowerCase().indexOf(term) !== -1;\n var matchCat = selectedCategory === \"Toutes\" || r.category === selectedCategory;\n return matchSearch && matchCat;\n });\n }\n\n function renderResources() {\n var list = getFiltered();\n resultsCount.textContent = list.length + \" outil\" + (list.length > 1 ? \"s\" : \"\") + \" trouv\u00e9\" + (list.length > 1 ? \"s\" : \"\");\n\n if (list.length === 0) {\n resourcesContainer.classList.add(\"hidden\");\n emptyState.classList.add(\"visible\");\n return;\n }\n resourcesContainer.classList.remove(\"hidden\");\n emptyState.classList.remove(\"visible\");\n\n resourcesContainer.innerHTML = list.map(function(r) {\n return '<article class=\"card\">' +\n '<div class=\"card-top\">' +\n '<div class=\"card-icon-wrap\"><span class=\"' + r.color + '\">' + icon(r.icon) + '<\/span><\/div>' +\n '<span class=\"card-cat\">' + r.category + '<\/span>' +\n '<\/div>' +\n '<h3>' + r.name + '<\/h3>' +\n '<p class=\"card-desc\">' + r.description + '<\/p>' +\n '<a href=\"' + r.url + '\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"card-link\">Visiter le site ' + icon(\"external-link\") + '<\/a>' +\n '<\/article>';\n }).join(\"\");\n }\n\n searchInput.addEventListener(\"input\", function(e) {\n searchTerm = e.target.value;\n renderResources();\n });\n\n resetBtn.addEventListener(\"click\", function() {\n searchTerm = \"\";\n selectedCategory = \"Toutes\";\n searchInput.value = \"\";\n renderCategories();\n renderResources();\n });\n\n function init() {\n if (!categoriesContainer || !resourcesContainer) return;\n renderCategories();\n renderResources();\n }\n\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", init);\n } else {\n init();\n }\n })();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>EdTech Empowered Directory EdTech Empowered Directory Un r\u00e9pertoire d’outils p\u00e9dagogiques pour enseignants Guide p\u00e9dagogique num\u00e9rique Le guide ultime des sites pour enseignants Explorez plus de 50 outils gratuits inspir\u00e9s du guide P.A.R.T.S Framework. Filtrez par domaine, recherchez rapidement, et trouvez la ressource id\u00e9ale pour enrichir vos cours. Filtrer par cat\u00e9gorie Ressources disponibles Chargement des r\u00e9sultats……<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_eb_attr":"","inline_featured_image":false,"footnotes":""},"categories":[],"class_list":["post-151731","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/pages\/151731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/comments?post=151731"}],"version-history":[{"count":0,"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/pages\/151731\/revisions"}],"wp:attachment":[{"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/media?parent=151731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/categories?post=151731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":151731,"date":"2026-03-10T13:12:59","date_gmt":"2026-03-10T13:12:59","guid":{"rendered":"https:\/\/preparia.ma\/?page_id=151731"},"modified":"2026-03-10T13:23:17","modified_gmt":"2026-03-10T13:23:17","slug":"ai2","status":"publish","type":"page","link":"https:\/\/preparia.ma\/en\/ai2\/","title":{"rendered":"AI3"},"content":{"rendered":"\n\n\n\n \n \n EdTech Empowered Directory<\/title>\n <style>\n *, *::before, *::after { box-sizing: border-box; }\n html { scroll-behavior: smooth; height: 100%; }\n body {\n margin: 0;\n font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n background: #f8fafc;\n color: #1e293b;\n min-height: 100vh;\n min-height: 100svh;\n }\n .app-shell { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }\n .header {\n position: sticky; top: 0; z-index: 30;\n border-bottom: 1px solid #e2e8f0;\n background: rgba(255,255,255,.95);\n backdrop-filter: blur(8px);\n }\n .header-inner { max-width: 80rem; margin: 0 auto; padding: 1rem 1rem; }\n @media (min-width: 768px) { .header-inner { padding: 1rem 1.5rem; } }\n @media (min-width: 1024px) { .header-inner { padding: 1rem 2rem; } }\n .header-row {\n display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0;\n }\n @media (min-width: 768px) {\n .header-row { flex-direction: row; align-items: center; justify-content: space-between; }\n }\n .brand { display: flex; min-width: 0; align-items: center; gap: 0.75rem; }\n .brand-icon-wrap {\n flex-shrink: 0; width: 2.75rem; height: 2.75rem;\n display: flex; align-items: center; justify-content: center;\n border-radius: 1rem; background: #4f46e5; box-shadow: 0 1px 2px rgba(0,0,0,.05);\n }\n .brand-icon-wrap svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: white; stroke-width: 2; }\n .brand-text { min-width: 0; }\n .brand-title { margin: 0; font-size: 1rem; font-weight: 600; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n .brand-title .accent { color: #4f46e5; }\n @media (min-width: 640px) { .brand-title { font-size: 1.125rem; } }\n @media (min-width: 1024px) { .brand-title { font-size: 1.25rem; } }\n .brand-desc { margin: 0; font-size: 0.875rem; color: #64748b; display: none; }\n @media (min-width: 640px) { .brand-desc { display: block; } }\n .search-wrap { width: 100%; }\n @media (min-width: 768px) { .search-wrap { max-width: 28rem; } }\n @media (min-width: 1024px) { .search-wrap { max-width: 32rem; } }\n .search-box { position: relative; }\n .search-icon-wrap {\n position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; padding-left: 1rem; pointer-events: none;\n }\n .search-icon-wrap svg { width: 1.25rem; height: 1.25rem; stroke: #94a3b8; fill: none; stroke-width: 2; }\n .search-input {\n width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem;\n font-size: 0.875rem; color: #1e293b; background: #f1f5f9;\n border: 1px solid #cbd5e1; border-radius: 1rem;\n outline: none; transition: border-color .2s, background .2s, box-shadow .2s;\n }\n .search-input::placeholder { color: #94a3b8; }\n .search-input:focus { border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,.1); }\n .hero {\n min-height: clamp(260px, 42svh, 520px); display: flex; align-items: center;\n position: relative; overflow: hidden;\n background: linear-gradient(to bottom right, #4f46e5, #4f46e5, #4338ca);\n }\n @media (max-width: 640px) { .hero { min-height: auto; } }\n .hero-bg { position: absolute; inset: 0; opacity: .1; }\n .hero-bg .blur1 { position: absolute; top: -5rem; left: -5rem; width: 16rem; height: 16rem; border-radius: 50%; background: white; filter: blur(48px); }\n .hero-bg .blur2 { position: absolute; right: 0; bottom: 0; width: 18rem; height: 18rem; border-radius: 50%; background: white; filter: blur(48px); }\n .hero-inner { position: relative; width: 100%; max-width: 80rem; margin: 0 auto; padding: 2.5rem 1rem; text-align: center; }\n @media (min-width: 640px) { .hero-inner { padding: 3.5rem 1.5rem; } }\n @media (min-width: 1024px) { .hero-inner { padding: 5rem 2rem; } }\n .hero-content { max-width: 48rem; margin: 0 auto; }\n .hero-badge {\n display: inline-flex; align-items: center; margin-bottom: 1rem;\n padding: 0.375rem 1rem; font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,.9);\n background: rgba(255,255,255,.15); border-radius: 9999px; border: 1px solid rgba(255,255,255,.2);\n }\n @media (min-width: 640px) { .hero-badge { font-size: 0.875rem; } }\n .hero h2 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: white; }\n @media (min-width: 640px) { .hero h2 { font-size: 2.25rem; } }\n @media (min-width: 1024px) { .hero h2 { font-size: 3rem; } }\n .hero-desc { margin: 1rem auto 0; max-width: 42rem; font-size: 0.875rem; line-height: 1.5; color: rgba(255,255,255,.8); }\n @media (min-width: 640px) { .hero-desc { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.75; } }\n .main { flex: 1; max-width: 80rem; width: 100%; margin: 0 auto; padding: 1.5rem 1rem; }\n @media (min-width: 640px) { .main { padding: 2rem 1.5rem; } }\n @media (min-width: 1024px) { .main { padding: 2.5rem 2rem; } }\n .filters { margin-bottom: 2rem; }\n .filters-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }\n .filters-title svg { width: 1rem; height: 1rem; stroke: #64748b; fill: none; stroke-width: 2; }\n .filters-title span { font-size: 0.875rem; font-weight: 600; color: #334155; }\n .categories-wrap { overflow-x: auto; padding-bottom: 0.5rem; }\n .categories-wrap::-webkit-scrollbar { display: none; }\n .categories-wrap { -ms-overflow-style: none; scrollbar-width: none; }\n .categories { display: flex; gap: 0.5rem; width: max-content; min-width: 100%; }\n .cat-btn {\n flex-shrink: 0; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 9999px;\n border: 1px solid #e2e8f0; background: white; color: #334155; cursor: pointer; transition: all .2s;\n }\n .cat-btn:hover { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }\n .cat-btn.active { background: #4f46e5; color: white; border-color: #4f46e5; box-shadow: 0 1px 2px rgba(0,0,0,.05); }\n .results-head { margin-bottom: 1.5rem; }\n .results-head h3 { margin: 0; font-size: 1.125rem; font-weight: 600; color: #0f172a; }\n .results-count { margin: 0; font-size: 0.875rem; color: #64748b; }\n .grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }\n @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }\n @media (min-width: 1280px) { .grid { grid-template-columns: repeat(3, 1fr); } }\n .card {\n display: flex; flex-direction: column; min-height: 280px;\n padding: 1.25rem; background: white; border: 1px solid #e2e8f0; border-radius: 1.5rem;\n box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s;\n }\n .card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }\n @media (min-width: 640px) { .card { padding: 1.5rem; } }\n .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }\n .card-icon-wrap {\n flex-shrink: 0; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;\n border-radius: 1rem; background: #f1f5f9; transition: background .2s;\n }\n .card:hover .card-icon-wrap { background: #eef2ff; }\n .card-icon-wrap svg { width: 1.5rem; height: 1.5rem; fill: none; stroke-width: 2; }\n .card-cat {\n max-width: 58%; padding: 0.25rem 0.75rem; font-size: 11px; font-weight: 500; line-height: 1.25; text-align: right;\n background: #f1f5f9; color: #334155; border-radius: 9999px;\n }\n @media (min-width: 640px) { .card-cat { font-size: 12px; } }\n .card h3 { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: #0f172a; }\n @media (min-width: 640px) { .card h3 { font-size: 1.25rem; } }\n .card-desc { margin: 0 0 1.5rem; flex-grow: 1; font-size: 0.875rem; line-height: 1.5; color: #475569; }\n .card-link {\n display: inline-flex; align-items: center; justify-content: center; width: 100%;\n padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; color: #4338ca; background: #eef2ff;\n border-radius: 1rem; text-decoration: none; transition: background .2s;\n }\n .card-link:hover { background: #e0e7ff; }\n .card-link svg { margin-left: 0.5rem; width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }\n .empty-state {\n display: none; padding: 3rem 1.25rem; text-align: center; background: white;\n border: 1px dashed #cbd5e1; border-radius: 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05);\n }\n .empty-state.visible { display: block; }\n @media (min-width: 640px) { .empty-state { padding: 3.5rem 1.5rem; } }\n .empty-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; background: #f1f5f9; border-radius: 1rem; }\n .empty-icon svg { width: 1.75rem; height: 1.75rem; stroke: #94a3b8; fill: none; stroke-width: 2; }\n .empty-state h3 { margin: 0; font-size: 1.125rem; font-weight: 600; color: #0f172a; }\n .empty-state p { margin: 0.5rem auto 0; max-width: 28rem; font-size: 0.875rem; line-height: 1.5; color: #64748b; }\n .reset-btn {\n margin-top: 1.5rem; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; color: white; background: #4f46e5;\n border: none; border-radius: 0.75rem; cursor: pointer; transition: background .2s;\n }\n .reset-btn:hover { background: #4338ca; }\n .hidden { display: none !important; }\n .icon-indigo svg, .icon-indigo { stroke: #6366f1; }\n .icon-blue svg, .icon-blue { stroke: #60a5fa; }\n .icon-purple svg, .icon-purple { stroke: #a855f7; }\n .icon-green svg, .icon-green { stroke: #22c55e; }\n .icon-slate svg, .icon-slate { stroke: #334155; }\n .icon-orange svg, .icon-orange { stroke: #f97316; }\n .icon-pink svg, .icon-pink { stroke: #ec4899; }\n .icon-red svg, .icon-red { stroke: #ef4444; }\n .icon-teal svg, .icon-teal { stroke: #0d9488; }\n .icon-yellow svg, .icon-yellow { stroke: #eab308; }\n .icon-emerald svg, .icon-emerald { stroke: #10b981; }\n <\/style>\n<\/head>\n<body>\n <div class=\"app-shell\">\n <header class=\"header\">\n <div class=\"header-inner\">\n <div class=\"header-row\">\n <div class=\"brand\">\n <div class=\"brand-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\n <\/div>\n <div class=\"brand-text\">\n <h1 class=\"brand-title\">EdTech Empowered <span class=\"accent\">Directory<\/span><\/h1>\n <p class=\"brand-desc\">Un r\u00e9pertoire d’outils p\u00e9dagogiques pour enseignants<\/p>\n <\/div>\n <\/div>\n <div class=\"search-wrap\">\n <div class=\"search-box\">\n <div class=\"search-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>\n <\/div>\n <input type=\"text\" id=\"searchInput\" class=\"search-input\" placeholder=\"Rechercher un outil, une cat\u00e9gorie ou un usage...\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n <section class=\"hero\">\n <div class=\"hero-bg\"><div class=\"blur1\"><\/div><div class=\"blur2\"><\/div><\/div>\n <div class=\"hero-inner\">\n <div class=\"hero-content\">\n <p class=\"hero-badge\">Guide p\u00e9dagogique num\u00e9rique<\/p>\n <h2>Le guide ultime des sites pour enseignants<\/h2>\n <p class=\"hero-desc\">Explorez plus de 50 outils gratuits inspir\u00e9s du guide P.A.R.T.S Framework. Filtrez par domaine, recherchez rapidement, et trouvez la ressource id\u00e9ale pour enrichir vos cours.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <main class=\"main\">\n <section class=\"filters\">\n <div class=\"filters-title\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"\/><\/svg>\n <span>Filtrer par cat\u00e9gorie<\/span>\n <\/div>\n <div class=\"categories-wrap\">\n <div id=\"categoriesContainer\" class=\"categories\"><\/div>\n <\/div>\n <\/section>\n\n <section class=\"results-head\">\n <h3>Ressources disponibles<\/h3>\n <p id=\"resultsCount\" class=\"results-count\">Chargement des r\u00e9sultats…<\/p>\n <\/section>\n\n <section>\n <div id=\"resourcesContainer\" class=\"grid\"><\/div>\n <div id=\"emptyState\" class=\"empty-state\">\n <div class=\"empty-icon\">\n <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 15 6 6\"\/><path d=\"M9 11a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z\"\/><path d=\"M16 16a5 5 0 0 0-7-7\"\/><\/svg>\n <\/div>\n <h3>Aucun outil trouv\u00e9<\/h3>\n <p>Essaie de modifier tes mots-cl\u00e9s ou de changer de cat\u00e9gorie pour afficher d’autres r\u00e9sultats.<\/p>\n <button type=\"button\" id=\"resetBtn\" class=\"reset-btn\">R\u00e9initialiser les filtres<\/button>\n <\/div>\n <\/section>\n <\/main>\n <\/div>\n\n <script>\n (function() {\n var resources = [\n { id: 30, name: \"Amplify's PolyPad\", category: \"Maths Tools\", description: \"Le meilleur tableau blanc math\u00e9matique avec des manipulateurs g\u00e9om\u00e9triques virtuels.\", icon: \"calculator\", color: \"icon-indigo\", url: \"https:\/\/polypad.amplify.com\" },\n { id: 31, name: \"Maths Learning Center Apps\", category: \"Maths Tools\", description: \"Suite d'applications visuelles pour les concepts math\u00e9matiques, comme les fractions ou les horloges.\", icon: \"layout-grid\", color: \"icon-blue\", url: \"https:\/\/www.mathlearningcenter.org\/apps\" },\n { id: 32, name: \"99Math\", category: \"Maths Tools\", description: \"Jeu multijoueur engageant pour pratiquer le calcul mental en temps r\u00e9el en classe.\", icon: \"gamepad\", color: \"icon-purple\", url: \"https:\/\/99math.com\" },\n { id: 33, name: \"MathsBot\", category: \"Maths Tools\", description: \"Outils pr\u00e9cieux pour les professeurs de maths : manipulateurs, questions al\u00e9atoires et \u00e9nigmes.\", icon: \"calculator\", color: \"icon-slate\", url: \"https:\/\/mathsbot.com\" },\n { id: 34, name: \"TopMarks\", category: \"Maths Tools\", description: \"Hub de jeux \u00e9ducatifs populaires pour r\u00e9viser les math\u00e9matiques.\", icon: \"check\", color: \"icon-green\", url: \"https:\/\/www.topmarks.co.uk\" },\n { id: 35, name: \"IXL\", category: \"Maths Tools\", description: \"Pratique compl\u00e8te et analytique des math\u00e9matiques, class\u00e9e par niveaux de comp\u00e9tence.\", icon: \"activity\", color: \"icon-green\", url: \"https:\/\/fr.ixl.com\" },\n { id: 36, name: \"Corbett Maths Primary\", category: \"Maths Tools\", description: \"Vid\u00e9os explicatives, fiches de travail et probl\u00e8mes quotidiens gratuits.\", icon: \"calculator\", color: \"icon-blue\", url: \"https:\/\/corbettmathsprimary.com\" },\n { id: 37, name: \"Khan Academy\", category: \"Maths Tools\", description: \"Le\u00e7ons vid\u00e9o, exercices interactifs et parcours d'apprentissage gratuits de haute qualit\u00e9.\", icon: \"book\", color: \"icon-emerald\", url: \"https:\/\/fr.khanacademy.org\" },\n { id: 38, name: \"Boddle Learning\", category: \"Maths Tools\", description: \"Jeu math\u00e9matique en 3D engageant pour les \u00e9l\u00e8ves avec personnalisation d'avatars.\", icon: \"gamepad\", color: \"icon-blue\", url: \"https:\/\/www.boddlelearning.com\" },\n { id: 39, name: \"Prodigy Maths\", category: \"Maths Tools\", description: \"Jeu de r\u00f4le fantastique o\u00f9 les combats se gagnent en r\u00e9solvant des probl\u00e8mes de maths.\", icon: \"gamepad\", color: \"icon-orange\", url: \"https:\/\/www.prodigygame.com\" },\n { id: 40, name: \"Splash Learn\", category: \"Maths Tools\", description: \"Programme d'apprentissage des math\u00e9matiques interactif et visuellement attrayant.\", icon: \"smile\", color: \"icon-pink\", url: \"https:\/\/www.splashlearn.com\" },\n { id: 41, name: \"Science Bob\", category: \"Science Tools\", description: \"Exp\u00e9riences scientifiques faciles et s\u00fbres \u00e0 r\u00e9aliser en classe ou \u00e0 la maison.\", icon: \"flask\", color: \"icon-green\", url: \"https:\/\/sciencebob.com\" },\n { id: 42, name: \"BrainPOP Science\", category: \"Science Tools\", description: \"Courtes vid\u00e9os anim\u00e9es expliquant des concepts scientifiques de mani\u00e8re ludique.\", icon: \"video\", color: \"icon-orange\", url: \"https:\/\/www.brainpop.com\/science\/\" },\n { id: 43, name: \"HowStuffWorks\", category: \"Science Tools\", description: \"Explications d\u00e9taill\u00e9es sur le fonctionnement du monde qui nous entoure.\", icon: \"flask\", color: \"icon-blue\", url: \"https:\/\/www.howstuffworks.com\" },\n { id: 44, name: \"Ology\", category: \"Science Tools\", description: \"Site scientifique du mus\u00e9e am\u00e9ricain d'histoire naturelle con\u00e7u pour les enfants.\", icon: \"globe\", color: \"icon-teal\", url: \"https:\/\/www.amnh.org\/explore\/ology\" },\n { id: 45, name: \"PHET Interactive Simulations\", category: \"Science Tools\", description: \"Simulations interactives gratuites cr\u00e9\u00e9es par l'Universit\u00e9 du Colorado.\", icon: \"activity\", color: \"icon-purple\", url: \"https:\/\/phet.colorado.edu\" },\n { id: 27, name: \"Get Epic Reading\", category: \"Reading Websites\", description: \"Biblioth\u00e8que num\u00e9rique de livres pour enfants avec lecture audio int\u00e9gr\u00e9e.\", icon: \"book\", color: \"icon-indigo\", url: \"https:\/\/www.getepic.com\" },\n { id: 28, name: \"StoryLine Online\", category: \"Reading Websites\", description: \"Vid\u00e9os d'acteurs c\u00e9l\u00e8bres lisant \u00e0 haute voix des livres pour enfants.\", icon: \"video\", color: \"icon-red\", url: \"https:\/\/storylineonline.net\" },\n { id: 29, name: \"ReadTheory\", category: \"Reading Websites\", description: \"Exercices de compr\u00e9hension \u00e9crite qui s'adaptent au niveau de l'\u00e9l\u00e8ve.\", icon: \"book\", color: \"icon-blue\", url: \"https:\/\/readtheory.org\" },\n { id: 1, name: \"myViewBoard by ViewSonic\", category: \"Modelling And Teaching\", description: \"\u00c9cosyst\u00e8me de tableau blanc num\u00e9rique complet pour pr\u00e9parer et animer des le\u00e7ons interactives.\", icon: \"monitor\", color: \"icon-blue\", url: \"https:\/\/myviewboard.com\" },\n { id: 2, name: \"Classroomscreen\", category: \"Modelling And Teaching\", description: \"\u00c9cran de classe avec minuterie, feux tricolores et mesure du bruit.\", icon: \"layout-grid\", color: \"icon-green\", url: \"https:\/\/classroomscreen.com\" },\n { id: 3, name: \"Slidesgo\", category: \"Modelling And Teaching\", description: \"Mod\u00e8les gratuits et esth\u00e9tiques pour Google Slides et PowerPoint.\", icon: \"palette\", color: \"icon-orange\", url: \"https:\/\/slidesgo.com\" },\n { id: 4, name: \"Bouncy Balls\", category: \"Modelling And Teaching\", description: \"Outil visuel pour g\u00e9rer le volume sonore de la classe \u00e0 l'aide du micro.\", icon: \"volume\", color: \"icon-red\", url: \"https:\/\/bouncyballs.org\" },\n { id: 5, name: \"Padlet\", category: \"Modelling And Teaching\", description: \"Mur virtuel pour collaborer, partager des id\u00e9es ou publier des ressources.\", icon: \"users\", color: \"icon-purple\", url: \"https:\/\/padlet.com\" },\n { id: 6, name: \"Canva\", category: \"Modelling And Teaching\", description: \"Outil de conception graphique pour cr\u00e9er des affiches, vid\u00e9os et pr\u00e9sentations.\", icon: \"palette\", color: \"icon-indigo\", url: \"https:\/\/www.canva.com\/education\/\" },\n { id: 7, name: \"Oak National Academy\", category: \"Modelling And Teaching\", description: \"Ressources gratuites, le\u00e7ons vid\u00e9o et quiz cr\u00e9\u00e9s par des enseignants.\", icon: \"presentation\", color: \"icon-emerald\", url: \"https:\/\/www.thenational.academy\/\" },\n { id: 8, name: \"Mentimeter\", category: \"Assessment and Gamification\", description: \"Pr\u00e9sentations interactives avec sondages en direct et nuages de mots.\", icon: \"activity\", color: \"icon-blue\", url: \"https:\/\/www.mentimeter.com\" },\n { id: 9, name: \"Gimkit\", category: \"Assessment and Gamification\", description: \"Jeu de quiz en direct o\u00f9 les \u00e9l\u00e8ves gagnent de l'argent virtuel en r\u00e9pondant.\", icon: \"gamepad\", color: \"icon-indigo\", url: \"https:\/\/www.gimkit.com\" },\n { id: 10, name: \"Kahoot!\", category: \"Assessment and Gamification\", description: \"Plateforme incontournable de quiz amusants et interactifs.\", icon: \"check\", color: \"icon-yellow\", url: \"https:\/\/kahoot.com\" },\n { id: 11, name: \"Edpuzzle\", category: \"Assessment and Gamification\", description: \"Transforme n'importe quelle vid\u00e9o en le\u00e7on interactive avec questions int\u00e9gr\u00e9es.\", icon: \"video\", color: \"icon-yellow\", url: \"https:\/\/edpuzzle.com\" },\n { id: 12, name: \"Educaplay\", category: \"Assessment and Gamification\", description: \"Cr\u00e9ation d'activit\u00e9s multim\u00e9dias \u00e9ducatives vari\u00e9es.\", icon: \"layout-grid\", color: \"icon-teal\", url: \"https:\/\/www.educaplay.com\" },\n { id: 13, name: \"Toy Theater\", category: \"Assessment and Gamification\", description: \"Collection de jeux \u00e9ducatifs interactifs pour le primaire.\", icon: \"gamepad\", color: \"icon-red\", url: \"https:\/\/toytheater.com\" },\n { id: 14, name: \"ClassTools.net\", category: \"Assessment and Gamification\", description: \"G\u00e9n\u00e9rateurs gratuits de jeux \u00e9ducatifs, quiz et diagrammes.\", icon: \"file\", color: \"icon-slate\", url: \"https:\/\/www.classtools.net\" },\n { id: 15, name: \"GoNoodle\", category: \"Brain Breaks\", description: \"Vid\u00e9os de mouvement et de pleine conscience pour faire des pauses actives.\", icon: \"smile\", color: \"icon-green\", url: \"https:\/\/www.gonoodle.com\" },\n { id: 16, name: \"Neal.fun\", category: \"Brain Breaks\", description: \"Petites exp\u00e9riences web et jeux interactifs pour d\u00e9tendre l'atmosph\u00e8re.\", icon: \"smile\", color: \"icon-purple\", url: \"https:\/\/neal.fun\" },\n { id: 17, name: \"Teachflix\", category: \"Brain Breaks\", description: \"Collection de vid\u00e9os \u00e9ducatives courtes s\u00e9lectionn\u00e9es pour les enseignants.\", icon: \"video\", color: \"icon-red\", url: \"https:\/\/teachflix.org\" },\n { id: 18, name: \"Classroom Doodles\", category: \"Brain Breaks\", description: \"Coloriages gratuits et cr\u00e9atifs \u00e0 imprimer pour des moments calmes en classe.\", icon: \"palette\", color: \"icon-pink\", url: \"https:\/\/www.classroomdoodles.com\" },\n { id: 19, name: \"Natural Curriculum\", category: \"Writing\/SPAG Websites\", description: \"Ressources de grammaire engageantes bas\u00e9es sur des documentaires animaliers.\", icon: \"pen\", color: \"icon-green\", url: \"https:\/\/www.naturalcurriculum.co.uk\" },\n { id: 20, name: \"Once Upon A Picture\", category: \"Writing\/SPAG Websites\", description: \"Images inspirantes et questions pour stimuler l'\u00e9criture cr\u00e9ative.\", icon: \"pen\", color: \"icon-blue\", url: \"https:\/\/www.onceuponapicture.co.uk\" },\n { id: 21, name: \"Handwriting Repeater\", category: \"Writing\/SPAG Websites\", description: \"Outil pratique pour g\u00e9n\u00e9rer et animer des mod\u00e8les d'\u00e9criture.\", icon: \"pen\", color: \"icon-slate\", url: \"https:\/\/www.ictgames.com\/mobilePage\/writingRepeater\/\" },\n { id: 22, name: \"Pobble 365\", category: \"Writing\/SPAG Websites\", description: \"Une image par jour accompagn\u00e9e d'amorces d'histoires et d'activit\u00e9s d'\u00e9criture.\", icon: \"pen\", color: \"icon-indigo\", url: \"https:\/\/pobble365.com\" },\n { id: 23, name: \"Galactic Phonics\", category: \"Writing\/SPAG Websites\", description: \"Ressources imprimables et interactives pour la phon\u00e9tique.\", icon: \"file\", color: \"icon-yellow\", url: \"https:\/\/www.galacticphonics.com\" },\n { id: 24, name: \"Phonics and Stuff\", category: \"Writing\/SPAG Websites\", description: \"Jeux et activit\u00e9s en ligne pour accompagner l'apprentissage de la phon\u00e9tique.\", icon: \"volume\", color: \"icon-blue\", url: \"https:\/\/phonicsandstuff.com\" },\n { id: 25, name: \"Phonics Play\", category: \"Writing\/SPAG Websites\", description: \"Jeux interactifs populaires pour l'enseignement ludique de la phon\u00e9tique.\", icon: \"gamepad\", color: \"icon-orange\", url: \"https:\/\/www.phonicsplay.co.uk\" },\n { id: 26, name: \"Wordwall\", category: \"Writing\/SPAG Websites\", description: \"Cr\u00e9ation facile d'activit\u00e9s personnalis\u00e9es comme les anagrammes ou les quiz.\", icon: \"gamepad\", color: \"icon-blue\", url: \"https:\/\/wordwall.net\" },\n { id: 46, name: \"Seterra Geography Games\", category: \"Humanities Tools\", description: \"Jeux de quiz g\u00e9ographiques sur les pays, capitales, villes et drapeaux.\", icon: \"globe\", color: \"icon-blue\", url: \"https:\/\/www.seterra.com\" },\n { id: 47, name: \"rooms.xyz\", category: \"Humanities Tools\", description: \"Cr\u00e9ation de pi\u00e8ces interactives en 3D pour des reconstitutions historiques.\", icon: \"layout-grid\", color: \"icon-indigo\", url: \"https:\/\/rooms.xyz\" },\n { id: 48, name: \"Ducksters\", category: \"Humanities Tools\", description: \"Articles \u00e9ducatifs clairs et adapt\u00e9s aux enfants sur l'histoire et la g\u00e9ographie.\", icon: \"book\", color: \"icon-yellow\", url: \"https:\/\/www.ducksters.com\" },\n { id: 49, name: \"Discovery Education\", category: \"Humanities Tools\", description: \"Ressources multim\u00e9dias et vid\u00e9os pour l'enseignement des sciences humaines.\", icon: \"video\", color: \"icon-blue\", url: \"https:\/\/www.discoveryeducation.com\" },\n { id: 50, name: \"Google Arts and Culture\", category: \"Humanities Tools\", description: \"Visites virtuelles de mus\u00e9es et exploration d'\u0153uvres d'art en haute r\u00e9solution.\", icon: \"palette\", color: \"icon-red\", url: \"https:\/\/artsandculture.google.com\" }\n ];\n\n var iconSvgs = {\n book: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>',\n search: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>',\n calculator: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\"\/><path d=\"M8 6h.01\"\/><path d=\"M16 6h.01\"\/><path d=\"M8 10h.01\"\/><path d=\"M8 14h.01\"\/><path d=\"M12 14h.01\"\/><path d=\"M16 10h.01\"\/><path d=\"M16 14h.01\"\/><\/svg>',\n \"layout-grid\": '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>',\n gamepad: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"6\" y1=\"12\" x2=\"10\" y2=\"12\"\/><line x1=\"8\" y1=\"10\" x2=\"8\" y2=\"14\"\/><line x1=\"15\" y1=\"13\" x2=\"15.01\" y2=\"13\"\/><line x1=\"18\" y1=\"11\" x2=\"18.01\" y2=\"11\"\/><rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"2\"\/><\/svg>',\n check: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><path d=\"m9 11 3 3L22 4\"\/><\/svg>',\n activity: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 12h-4l-3 9L9 3l-3 9H2\"\/><\/svg>',\n flask: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10 2v7.31\"\/><path d=\"M14 9.3V2\"\/><path d=\"M8.5 2h7\"\/><path d=\"M14 9.3a6.5 6.5 0 1 1-4 0\"\/><path d=\"M5.52 16h12.96\"\/><\/svg>',\n video: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5\"\/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"\/><\/svg>',\n globe: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"\/><path d=\"M2 12h20\"\/><\/svg>',\n pen: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 19l7-7 3 3-7 7-3-3z\"\/><path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/><path d=\"M2 2l7.586 7.586\"\/><\/svg>',\n file: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z\"\/><path d=\"M14 2v6h6\"\/><path d=\"M16 13H8\"\/><path d=\"M16 17H8\"\/><\/svg>',\n smile: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"\/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"\/><\/svg>',\n \"external-link\": '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\/><path d=\"M15 3h6v6\"\/><path d=\"M10 14L21 3\"\/><\/svg>',\n monitor: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\"\/><line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/><line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/><\/svg>',\n palette: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"13.5\" cy=\"6.5\" r=\".5\"\/><circle cx=\"17.5\" cy=\"10.5\" r=\".5\"\/><circle cx=\"8.5\" cy=\"7.5\" r=\".5\"\/><circle cx=\"6.5\" cy=\"12.5\" r=\".5\"\/><path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.648 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.648-1.648H20c5.5 0 10-4.5 10-10 0-.926-.746-1.648-1.648-1.648-.437 0-.835.18-1.125.437-.289.29-.652.438-1.125.438-.926 0-1.648-.746-1.648-1.648 0-.437.18-.835.437-1.125.29-.29.652-.438 1.125-.438C20.746 2 20 2.722 20 3.648Z\"\/><\/svg>',\n volume: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"11 5 6 9 2 9 2 15 6 15 11 19 11 5\"\/><path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\"\/><path d=\"M19.07 4.93a10 10 0 0 1 0 14.14\"\/><\/svg>',\n users: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>',\n presentation: '<svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 7v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7\"\/><path d=\"M12 22v-8\"\/><path d=\"M2 3h20\"\/><\/svg>'\n };\n\n function icon(name) { return iconSvgs[name] || iconSvgs.book; }\n\n var searchTerm = \"\";\n var selectedCategory = \"Toutes\";\n var categories = [\"Toutes\"].concat(resources.reduce(function(acc, r) {\n if (acc.indexOf(r.category) === -1) acc.push(r.category);\n return acc;\n }, []));\n\n var searchInput = document.getElementById(\"searchInput\");\n var categoriesContainer = document.getElementById(\"categoriesContainer\");\n var resourcesContainer = document.getElementById(\"resourcesContainer\");\n var emptyState = document.getElementById(\"emptyState\");\n var resetBtn = document.getElementById(\"resetBtn\");\n var resultsCount = document.getElementById(\"resultsCount\");\n\n function escapeQuotes(t) { return t.replace(\/'\/g, \"\\\\'\"); }\n\n function renderCategories() {\n categoriesContainer.innerHTML = categories.map(function(cat) {\n var isActive = cat === selectedCategory;\n return '<button type=\"button\" onclick=\"window.setCategory(\\'' + escapeQuotes(cat) + '\\')\" class=\"cat-btn' + (isActive ? ' active' : '') + '\">' + cat + '<\/button>';\n }).join(\"\");\n }\n\n window.setCategory = function(cat) {\n selectedCategory = cat;\n renderCategories();\n renderResources();\n };\n\n function getFiltered() {\n var term = searchTerm.trim().toLowerCase();\n return resources.filter(function(r) {\n var matchSearch = !term || r.name.toLowerCase().indexOf(term) !== -1 || r.description.toLowerCase().indexOf(term) !== -1 || r.category.toLowerCase().indexOf(term) !== -1;\n var matchCat = selectedCategory === \"Toutes\" || r.category === selectedCategory;\n return matchSearch && matchCat;\n });\n }\n\n function renderResources() {\n var list = getFiltered();\n resultsCount.textContent = list.length + \" outil\" + (list.length > 1 ? \"s\" : \"\") + \" trouv\u00e9\" + (list.length > 1 ? \"s\" : \"\");\n\n if (list.length === 0) {\n resourcesContainer.classList.add(\"hidden\");\n emptyState.classList.add(\"visible\");\n return;\n }\n resourcesContainer.classList.remove(\"hidden\");\n emptyState.classList.remove(\"visible\");\n\n resourcesContainer.innerHTML = list.map(function(r) {\n return '<article class=\"card\">' +\n '<div class=\"card-top\">' +\n '<div class=\"card-icon-wrap\"><span class=\"' + r.color + '\">' + icon(r.icon) + '<\/span><\/div>' +\n '<span class=\"card-cat\">' + r.category + '<\/span>' +\n '<\/div>' +\n '<h3>' + r.name + '<\/h3>' +\n '<p class=\"card-desc\">' + r.description + '<\/p>' +\n '<a href=\"' + r.url + '\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"card-link\">Visiter le site ' + icon(\"external-link\") + '<\/a>' +\n '<\/article>';\n }).join(\"\");\n }\n\n searchInput.addEventListener(\"input\", function(e) {\n searchTerm = e.target.value;\n renderResources();\n });\n\n resetBtn.addEventListener(\"click\", function() {\n searchTerm = \"\";\n selectedCategory = \"Toutes\";\n searchInput.value = \"\";\n renderCategories();\n renderResources();\n });\n\n function init() {\n if (!categoriesContainer || !resourcesContainer) return;\n renderCategories();\n renderResources();\n }\n\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", init);\n } else {\n init();\n }\n })();\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>EdTech Empowered Directory EdTech Empowered Directory Un r\u00e9pertoire d’outils p\u00e9dagogiques pour enseignants Guide p\u00e9dagogique num\u00e9rique Le guide ultime des sites pour enseignants Explorez plus de 50 outils gratuits inspir\u00e9s du guide P.A.R.T.S Framework. Filtrez par domaine, recherchez rapidement, et trouvez la ressource id\u00e9ale pour enrichir vos cours. Filtrer par cat\u00e9gorie Ressources disponibles Chargement des r\u00e9sultats……<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_eb_attr":"","inline_featured_image":false,"footnotes":""},"categories":[],"class_list":["post-151731","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/pages\/151731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/comments?post=151731"}],"version-history":[{"count":0,"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/pages\/151731\/revisions"}],"wp:attachment":[{"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/media?parent=151731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preparia.ma\/en\/wp-json\/wp\/v2\/categories?post=151731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}