Spaces:

pchevallot
/

ddec5455

Running

App Files Files Community

ddec5455 / index.html

pchevallot

Add 2 files

5200325 verified 22 days ago

raw

history blame contribute delete

75.8 kB

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Bibliothèque de Prompts - DDEC 54-55</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	.gradient-bg {
	background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
	}
	.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.1);
	}
	.sidebar {
	scrollbar-width: thin;
	scrollbar-color: #4b5563 #1f2937;
	}
	.sidebar::-webkit-scrollbar {
	width: 6px;
	}
	.sidebar::-webkit-scrollbar-track {
	background: #1f2937;
	}
	.sidebar::-webkit-scrollbar-thumb {
	background-color: #4b5563;
	border-radius: 6px;
	}
	.fade-in {
	animation: fadeIn 0.3s ease-in-out;
	}
	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
	}
	.markdown-content h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	color: #1e40af;
	}
	.markdown-content h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 1.25rem;
	margin-bottom: 0.75rem;
	color: #1e40af;
	}
	.markdown-content p {
	margin-bottom: 1rem;
	line-height: 1.625;
	}
	.markdown-content ul, .markdown-content ol {
	margin-bottom: 1rem;
	padding-left: 1.5rem;
	}
	.markdown-content li {
	margin-bottom: 0.5rem;
	}
	.markdown-content pre {
	background-color: #f3f4f6;
	border-radius: 0.375rem;
	padding: 1rem;
	margin-bottom: 1rem;
	overflow-x: auto;
	}
	.markdown-content code {
	background-color: #f3f4f6;
	padding: 0.2rem 0.4rem;
	border-radius: 0.25rem;
	font-family: monospace;
	}
	.badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	}
	.badge-blue {
	background-color: #dbeafe;
	color: #1e40af;
	}
	.badge-green {
	background-color: #dcfce7;
	color: #166534;
	}
	.badge-purple {
	background-color: #f3e8ff;
	color: #7e22ce;
	}
	.badge-yellow {
	background-color: #fef9c3;
	color: #854d0e;
	}
	.badge-red {
	background-color: #fee2e2;
	color: #991b1b;
	}
	.badge-indigo {
	background-color: #e0e7ff;
	color: #4338ca;
	}
	.badge-pink {
	background-color: #fce7f3;
	color: #be185d;
	}
	.badge-gray {
	background-color: #f3f4f6;
	color: #4b5563;
	}
	.example-card {
	border-left: 4px solid #3b82f6;
	background-color: #f8fafc;
	padding: 1rem;
	margin-bottom: 1rem;
	border-radius: 0.375rem;
	}
	.example-card h4 {
	font-weight: 600;
	color: #1e40af;
	margin-bottom: 0.5rem;
	}
	.principle-card {
	background-color: #eff6ff;
	border-radius: 0.5rem;
	padding: 1rem;
	margin-bottom: 1rem;
	}
	.principle-card h4 {
	font-weight: 600;
	color: #1e40af;
	margin-bottom: 0.5rem;
	}
	.more-details {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
	}
	.more-details.active {
	max-height: 1000px;
	transition: max-height 0.5s ease-in;
	}
	.chevron {
	transition: transform 0.3s ease;
	}
	.chevron.active {
	transform: rotate(90deg);
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<!-- Header -->
	<header class="gradient-bg text-white shadow-lg">
	<div class="container mx-auto px-4 py-6">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="flex items-center mb-4 md:mb-0">
	<i class="fas fa-cross text-3xl mr-3"></i>
	<div>
	<h1 class="text-2xl font-bold">Bibliothèque de Prompts IA</h1>
	<p class="text-blue-100">Guide pratique pour l'Enseignement Catholique - DDEC 54-55</p>
	</div>
	</div>
	<div class="flex items-center space-x-4">
	<div class="relative">
	<input type="text" placeholder="Rechercher un prompt..." class="bg-white bg-opacity-20 placeholder-blue-100 text-white rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-300 w-full md:w-64">
	<i class="fas fa-search absolute left-3 top-2.5 text-blue-100"></i>
	</div>
	<button class="bg-white text-blue-800 font-semibold py-2 px-4 rounded-full hover:bg-blue-100 transition">
	<i class="fas fa-user mr-2"></i>Connexion
	</button>
	</div>
	</div>
	</div>
	</header>

	<!-- Main Content -->
	<div class="container mx-auto px-4 py-8 flex flex-col lg:flex-row">
	<!-- Sidebar -->
	<aside class="w-full lg:w-1/4 lg:pr-6 mb-8 lg:mb-0">
	<div class="bg-white rounded-xl shadow-md overflow-hidden sidebar h-[calc(100vh-180px)] overflow-y-auto">
	<div class="p-4 bg-blue-800 text-white">
	<h2 class="text-xl font-bold flex items-center">
	<i class="fas fa-list-ul mr-2"></i> Catégories
	</h2>
	</div>
	<div class="p-4">
	<div class="mb-6">
	<h3 class="font-semibold text-gray-700 mb-2 flex items-center">
	<i class="fas fa-graduation-cap mr-2 text-blue-600"></i> Techniques de Prompt
	</h3>
	<ul class="space-y-1 ml-2">
	<li><a href="#" class="text-blue-600 hover:text-blue-800 flex items-center" data-category="zero-shot"><i class="fas fa-bolt mr-2 text-xs"></i> Zero-Shot</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="few-shot"><i class="fas fa-copy mr-2 text-xs"></i> One/Few-Shot</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="recherche"><i class="fas fa-search mr-2 text-xs"></i> Recherche</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="creative"><i class="fas fa-pen-fancy mr-2 text-xs"></i> Créatif</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="context"><i class="fas fa-expand mr-2 text-xs"></i> Contextuel (QQOQPC)</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="iteratif"><i class="fas fa-redo mr-2 text-xs"></i> Itératif</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="cot"><i class="fas fa-link mr-2 text-xs"></i> Chain of Thought</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="chaining"><i class="fas fa-project-diagram mr-2 text-xs"></i> Prompt Chaining</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="tot"><i class="fas fa-tree mr-2 text-xs"></i> Tree of Thought</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="roleplay"><i class="fas fa-theater-masks mr-2 text-xs"></i> Role Playing</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="tcrei"><i class="fas fa-list-ol mr-2 text-xs"></i> TCREI</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="metaprompt"><i class="fas fa-comment-dots mr-2 text-xs"></i> Méta-Prompting</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="translation"><i class="fas fa-language mr-2 text-xs"></i> Traduction Contextuelle</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="multimodal"><i class="fas fa-images mr-2 text-xs"></i> Multimodal</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="density"><i class="fas fa-layer-group mr-2 text-xs"></i> Chaîne de Densité</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="expert"><i class="fas fa-user-tie mr-2 text-xs"></i> Instruction/Rôle Expert</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="template"><i class="fas fa-stamp mr-2 text-xs"></i> Remplissage de Templates</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="summary"><i class="fas fa-filter mr-2 text-xs"></i> Résumé Spécifique</a></li>
	</ul>
	</div>

	<div class="mb-6">
	<h3 class="font-semibold text-gray-700 mb-2 flex items-center">
	<i class="fas fa-sitemap mr-2 text-blue-600"></i> Frameworks
	</h3>
	<ul class="space-y-1 ml-2">
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="ape"><i class="fas fa-bullseye mr-2 text-xs"></i> APE</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="bab"><i class="fas fa-arrows-alt-h mr-2 text-xs"></i> BAB</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="care"><i class="fas fa-hands-helping mr-2 text-xs"></i> CARE</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="cidi"><i class="fas fa-tasks mr-2 text-xs"></i> CIDI</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="coast"><i class="fas fa-ship mr-2 text-xs"></i> COAST</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="costar"><i class="fas fa-star mr-2 text-xs"></i> COSTAR</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="era"><i class="fas fa-user-tie mr-2 text-xs"></i> ERA</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="fab"><i class="fas fa-chart-line mr-2 text-xs"></i> FAB</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="focus"><i class="fas fa-bullseye mr-2 text-xs"></i> FOCUS</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="race"><i class="fas fa-running mr-2 text-xs"></i> RACE</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="relic"><i class="fas fa-shield-alt mr-2 text-xs"></i> RELIC</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="risen"><i class="fas fa-mountain mr-2 text-xs"></i> RISEN</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="rodes"><i class="fas fa-check-circle mr-2 text-xs"></i> RODES</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="roses"><i class="fas fa-rose mr-2 text-xs"></i> ROSES</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="rtf"><i class="fas fa-file-alt mr-2 text-xs"></i> RTF</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="spar"><i class="fas fa-fist-raised mr-2 text-xs"></i> SPAR</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="spear"><i class="fas fa-bullhorn mr-2 text-xs"></i> SPEAR</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="tag"><i class="fas fa-tag mr-2 text-xs"></i> TAG</a></li>
	</ul>
	</div>

	<div class="mb-6">
	<h3 class="font-semibold text-gray-700 mb-2 flex items-center">
	<i class="fas fa-users mr-2 text-blue-600"></i> Par Public
	</h3>
	<ul class="space-y-1 ml-2">
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="directeurs"><i class="fas fa-user-tie mr-2 text-xs"></i> Directeurs</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="enseignants"><i class="fas fa-chalkboard-teacher mr-2 text-xs"></i> Enseignants</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="pastorale"><i class="fas fa-pray mr-2 text-xs"></i> Pastorale</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="inclusion"><i class="fas fa-heart mr-2 text-xs"></i> Inclusion</a></li>
	<li><a href="#" class="text-gray-700 hover:text-blue-600 flex items-center" data-category="secretaires"><i class="fas fa-keyboard mr-2 text-xs"></i> Secrétaires</a></li>
	</ul>
	</div>

	<div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
	<h3 class="font-semibold text-blue-800 mb-2 flex items-center">
	<i class="fas fa-lightbulb mr-2"></i> Astuce du jour
	</h3>
	<p class="text-sm text-gray-700">Utilisez le framework CARE pour structurer vos prompts : Contexte, Action, Résultat, Exemple.</p>
	<button class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
	Voir plus <i class="fas fa-chevron-right ml-1 text-xs"></i>
	</button>
	</div>
	</div>
	</div>
	</aside>

	<!-- Main Content Area -->
	<main class="w-full lg:w-3/4">
	<!-- Featured Prompts -->
	<section class="mb-8">
	<div class="flex justify-between items-center mb-4">
	<h2 class="text-2xl font-bold text-gray-800 flex items-center">
	<i class="fas fa-star mr-2 text-yellow-500"></i> Prompts en vedette
	</h2>
	<div class="flex space-x-2">
	<button class="bg-white text-blue-600 border border-blue-600 px-3 py-1 rounded-full text-sm hover:bg-blue-50 transition">
	<i class="fas fa-random mr-1"></i> Aléatoire
	</button>
	<button class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm hover:bg-blue-700 transition">
	<i class="fas fa-plus mr-1"></i> Nouveau
	</button>
	</div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<!-- Prompt Card 1 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
	<div class="p-5">
	<div class="flex justify-between items-start mb-2">
	<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">Zero-Shot</span>
	<button class="text-gray-400 hover:text-blue-600">
	<i class="far fa-bookmark"></i>
	</button>
	</div>
	<h3 class="text-lg font-bold text-gray-800 mb-2">Indicateurs pour piloter un projet pédagogique</h3>
	<p class="text-gray-600 text-sm mb-4">"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?"</p>
	<div class="flex justify-between items-center">
	<span class="text-xs text-gray-500 flex items-center">
	<i class="fas fa-user-tie mr-1"></i> Directeur
	</span>
	<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details1">
	Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
	</button>
	</div>
	<div id="details1" class="more-details mt-4">
	<div class="bg-blue-50 p-4 rounded-lg">
	<h4 class="font-semibold text-blue-800 mb-2">Détails supplémentaires</h4>
	<p class="text-sm text-gray-700 mb-2">Ce prompt permet d'obtenir une liste d'indicateurs clés pour évaluer l'avancement et l'impact d'un projet pédagogique dans un établissement catholique.</p>
	<div class="bg-white p-3 rounded border border-blue-100">
	<h5 class="font-medium text-sm text-blue-700 mb-1">Exemple de réponse attendue :</h5>
	<ul class="text-xs text-gray-600 list-disc pl-4">
	<li>Taux de participation des enseignants aux réunions de suivi</li>
	<li>Évolution des résultats scolaires des élèves concernés</li>
	<li>Nombre d'actions concrètes mises en œuvre</li>
	<li>Retours qualitatifs des familles via les enquêtes</li>
	<li>Degré d'intégration dans le projet d'établissement</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Prompt Card 2 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
	<div class="p-5">
	<div class="flex justify-between items-start mb-2">
	<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">CARE</span>
	<button class="text-gray-400 hover:text-blue-600">
	<i class="far fa-bookmark"></i>
	</button>
	</div>
	<h3 class="text-lg font-bold text-gray-800 mb-2">Stratégie pour élèves à besoins particuliers</h3>
	<p class="text-gray-600 text-sm mb-4">Contexte, Action, Résultat et Exemple pour accompagner les élèves en APC.</p>
	<div class="flex justify-between items-center">
	<span class="text-xs text-gray-500 flex items-center">
	<i class="fas fa-heart mr-1"></i> Inclusion
	</span>
	<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details2">
	Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
	</button>
	</div>
	<div id="details2" class="more-details mt-4">
	<div class="bg-blue-50 p-4 rounded-lg">
	<h4 class="font-semibold text-blue-800 mb-2">Structure CARE complète</h4>
	<div class="grid grid-cols-1 gap-3">
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Contexte :</h5>
	<p class="text-xs text-gray-600">Élèves en difficulté bénéficiant d'APC dans une école primaire rurale avec peu de moyens spécialisés.</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Action :</h5>
	<p class="text-xs text-gray-600">Mettre en place des ateliers différenciés avec des objectifs progressifs et des supports adaptés.</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Résultat attendu :</h5>
	<p class="text-xs text-gray-600">Amélioration des compétences ciblées chez 80% des élèves après un trimestre.</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Exemple :</h5>
	<p class="text-xs text-gray-600">Atelier de lecture avec textes simplifiés et marque-page des stratégies de compréhension.</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Prompt Card 3 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
	<div class="p-5">
	<div class="flex justify-between items-start mb-2">
	<span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">ROSES</span>
	<button class="text-gray-400 hover:text-blue-600">
	<i class="far fa-bookmark"></i>
	</button>
	</div>
	<h3 class="text-lg font-bold text-gray-800 mb-2">Projet pastoral itinérant</h3>
	<p class="text-gray-600 text-sm mb-4">Rôle, Objectif, Scénario, Solution attendue et Étapes pour un projet innovant.</p>
	<div class="flex justify-between items-center">
	<span class="text-xs text-gray-500 flex items-center">
	<i class="fas fa-pray mr-1"></i> Pastorale
	</span>
	<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details3">
	Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
	</button>
	</div>
	<div id="details3" class="more-details mt-4">
	<div class="bg-blue-50 p-4 rounded-lg">
	<h4 class="font-semibold text-blue-800 mb-2">Développement ROSES</h4>
	<div class="grid grid-cols-1 gap-3">
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Rôle :</h5>
	<p class="text-xs text-gray-600">Animateur pastoral itinérant visitant 5 écoles primaires du secteur.</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Objectif :</h5>
	<p class="text-xs text-gray-600">Créer du lien entre les communautés scolaires autour d'un thème commun.</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Scénario :</h5>
	<p class="text-xs text-gray-600">Chaque école prépare une partie d'une fresque collective sur le thème "Chemins de paix".</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Solution attendue :</h5>
	<p class="text-xs text-gray-600">Une œuvre collective exposée lors de la fête de fin d'année diocésaine.</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Étapes :</h5>
	<ol class="text-xs text-gray-600 list-decimal pl-4">
	<li>Présentation du projet aux équipes</li>
	<li>Ateliers dans chaque école</li>
	<li>Rassemblement final pour l'assemblage</li>
	<li>Célébration et exposition</li>
	</ol>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Prompt Details Section -->
	<section class="bg-white rounded-xl shadow-md overflow-hidden mb-8 fade-in" id="prompt-details">
	<div class="p-6">
	<div class="flex justify-between items-start mb-4">
	<div>
	<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded mb-2 inline-block">Zero-Shot</span>
	<h2 class="text-2xl font-bold text-gray-800">ZERO-SHOT PROMPTING – "Pose une question directe"</h2>
	<p class="text-gray-600">Technique de base pour obtenir des réponses factuelles rapides</p>
	</div>
	<div class="flex space-x-2">
	<button class="text-gray-400 hover:text-blue-600 p-2 rounded-full bg-gray-50">
	<i class="far fa-bookmark"></i>
	</button>
	<button class="text-gray-400 hover:text-blue-600 p-2 rounded-full bg-gray-50">
	<i class="fas fa-share-alt"></i>
	</button>
	<button class="text-gray-400 hover:text-blue-600 p-2 rounded-full bg-gray-50">
	<i class="fas fa-copy"></i>
	</button>
	</div>
	</div>

	<div class="border-t border-b border-gray-200 py-4 mb-4">
	<div class="flex items-center space-x-4">
	<div class="flex items-center">
	<i class="fas fa-graduation-cap text-blue-600 mr-2"></i>
	<span class="text-sm text-gray-700">Technique de Prompt</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-clock text-blue-600 mr-2"></i>
	<span class="text-sm text-gray-700">2 min de lecture</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-calendar-alt text-blue-600 mr-2"></i>
	<span class="text-sm text-gray-700">Mis à jour le 15/06/2023</span>
	</div>
	</div>
	</div>

	<div class="markdown-content">
	<div class="principle-card">
	<h4>Principe pédagogique</h4>
	<p>Obtenir une réponse factuelle, rapide, sans fournir d'exemple. Idéal pour les questions directes nécessitant une expertise spécifique.</p>
	</div>

	<h3>Exemples DDEC</h3>
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
	<div class="example-card">
	<h4>Directeur d'établissement</h4>
	<pre>"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?"</pre>
	</div>
	<div class="example-card">
	<h4>Enseignant en maternelle</h4>
	<pre>"Quels sont les signes d'alerte d'un trouble du langage oral chez un élève de grande section ?"</pre>
	</div>
	<div class="example-card">
	<h4>Formateur</h4>
	<pre>"Comment expliquer simplement le concept d'IA générative à des enseignants du 1er degré ?"</pre>
	</div>
	</div>

	<h3>Conseils d'utilisation</h3>
	<div class="bg-blue-50 p-4 rounded-lg mb-4">
	<ul class="list-disc pl-5 space-y-2">
	<li>Être précis dans la formulation de la question</li>
	<li>Spécifier le contexte si nécessaire (niveau scolaire, type d'établissement)</li>
	<li>Demander un format de réponse spécifique si besoin (liste, tableau, etc.)</li>
	<li>Utiliser pour des questions factuelles ou des demandes simples</li>
	<li>Éviter pour des sujets complexes nécessitant des exemples ou un raisonnement</li>
	</ul>
	</div>

	<h3>Variantes pour d'autres techniques</h3>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
	<div class="bg-blue-50 p-4 rounded-lg">
	<h4 class="font-semibold text-blue-800">One/Few-Shot</h4>
	<p class="text-sm">"Voici une évaluation de dictée pour des élèves de CE2. Crée une évaluation similaire pour des CM1 sur l'accord sujet-verbe : « [dictée] »"</p>
	</div>
	<div class="bg-blue-50 p-4 rounded-lg">
	<h4 class="font-semibold text-blue-800">Prompt de recherche</h4>
	<p class="text-sm">"Quels sont les derniers textes parus sur les PIAL dans l'Enseignement Catholique ?"</p>
	</div>
	</div>

	<h3>Tags associés</h3>
	<div class="flex flex-wrap">
	<span class="badge badge-blue">Directeur</span>
	<span class="badge badge-blue">Enseignant</span>
	<span class="badge badge-blue">Formateur</span>
	<span class="badge badge-green">Factuel</span>
	<span class="badge badge-green">Rapide</span>
	<span class="badge badge-purple">Technique de base</span>
	</div>
	</div>
	</div>
	</section>

	<!-- Related Prompts -->
	<section>
	<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
	<i class="fas fa-link mr-2 text-blue-600"></i> Techniques associées
	</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<!-- Related Prompt 1 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
	<div class="p-5">
	<div class="flex justify-between items-start mb-2">
	<span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded">One/Few-Shot</span>
	<button class="text-gray-400 hover:text-blue-600">
	<i class="far fa-bookmark"></i>
	</button>
	</div>
	<h3 class="text-lg font-bold text-gray-800 mb-2">ONE-SHOT / FEW-SHOT PROMPTING</h3>
	<p class="text-gray-600 text-sm mb-4">"Donne un exemple, puis demande le même format"</p>
	<div class="flex justify-between items-center">
	<span class="text-xs text-gray-500 flex items-center">
	<i class="fas fa-chalkboard-teacher mr-1"></i> Technique
	</span>
	<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details4">
	Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
	</button>
	</div>
	<div id="details4" class="more-details mt-4">
	<div class="bg-blue-50 p-4 rounded-lg">
	<h4 class="font-semibold text-blue-800 mb-2">Exemple complet</h4>
	<div class="bg-white p-3 rounded border border-blue-100">
	<h5 class="font-medium text-sm text-blue-700 mb-1">Prompt :</h5>
	<p class="text-xs text-gray-600 mb-2">"Voici un exemple de consigne pour une activité en APC : 'Lisez le texte et soulignez les verbes d'action.' Crée une consigne similaire pour travailler les adjectifs qualificatifs."</p>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Réponse attendue :</h5>
	<p class="text-xs text-gray-600">"Lisez le texte et entourez les adjectifs qualificatifs."</p>
	</div>
	<p class="text-xs text-gray-600 mt-2">Cette technique est particulièrement utile pour maintenir une cohérence dans les formulations pédagogiques.</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Related Prompt 2 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
	<div class="p-5">
	<div class="flex justify-between items-start mb-2">
	<span class="bg-purple-100 text-purple-800 text-xs font-semibold px-2.5 py-0.5 rounded">QQOQPC</span>
	<button class="text-gray-400 hover:text-blue-600">
	<i class="far fa-bookmark"></i>
	</button>
	</div>
	<h3 class="text-lg font-bold text-gray-800 mb-2">EXPANSION CONTEXTUELLE</h3>
	<p class="text-gray-600 text-sm mb-4">"Précise le besoin de manière exhaustive"</p>
	<div class="flex justify-between items-center">
	<span class="text-xs text-gray-500 flex items-center">
	<i class="fas fa-expand mr-1"></i> Technique
	</span>
	<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details5">
	Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
	</button>
	</div>
	<div id="details5" class="more-details mt-4">
	<div class="bg-blue-50 p-4 rounded-lg">
	<h4 class="font-semibold text-blue-800 mb-2">Application QQOQPC</h4>
	<div class="grid grid-cols-1 gap-2">
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Quoi :</h5>
	<p class="text-xs text-gray-600">Note d'information aux familles</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Qui :</h5>
	<p class="text-xs text-gray-600">Parents d'élèves de CM2</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Où :</h5>
	<p class="text-xs text-gray-600">École Saint-Joseph à Nancy</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Quand :</h5>
	<p class="text-xs text-gray-600">Pour la rentrée 2024</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Pourquoi :</h5>
	<p class="text-xs text-gray-600">Présenter les nouveautés pédagogiques</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Comment :</h5>
	<p class="text-xs text-gray-600">Ton rassurant et positif, avec infographies</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Related Prompt 3 -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover transition duration-300">
	<div class="p-5">
	<div class="flex justify-between items-start mb-2">
	<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">TCREI</span>
	<button class="text-gray-400 hover:text-blue-600">
	<i class="far fa-bookmark"></i>
	</button>
	</div>
	<h3 class="text-lg font-bold text-gray-800 mb-2">Cadre structuré TCREI</h3>
	<p class="text-gray-600 text-sm mb-4">Task, Context, Reference, Evaluate, Iterate</p>
	<div class="flex justify-between items-center">
	<span class="text-xs text-gray-500 flex items-center">
	<i class="fas fa-list-ol mr-1"></i> Framework
	</span>
	<button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center see-more-btn" data-target="details6">
	Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>
	</button>
	</div>
	<div id="details6" class="more-details mt-4">
	<div class="bg-blue-50 p-4 rounded-lg">
	<h4 class="font-semibold text-blue-800 mb-2">Détail TCREI</h4>
	<div class="grid grid-cols-1 gap-3">
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Task :</h5>
	<p class="text-xs text-gray-600">Créer une fiche de préparation de séance sur la classification des animaux</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Context :</h5>
	<p class="text-xs text-gray-600">Classe de CE2 en REP+, 24 élèves dont 3 à besoins particuliers</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Reference :</h5>
	<p class="text-xs text-gray-600">Programmes officiels et progression de l'école</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Evaluate :</h5>
	<p class="text-xs text-gray-600">Vérifier l'accessibilité et la différenciation</p>
	</div>
	<div>
	<h5 class="font-medium text-sm text-blue-700 mb-1">Iterate :</h5>
	<p class="text-xs text-gray-600">Ajouter des supports visuels pour les élèves dyslexiques</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>
	</main>
	</div>

	<!-- Footer -->
	<footer class="bg-gray-800 text-white py-8">
	<div class="container mx-auto px-4">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
	<div>
	<h3 class="text-lg font-semibold mb-4">Bibliothèque de Prompts</h3>
	<p class="text-gray-400">Guide pratique des prompts IA pour l'Enseignement Catholique. Outils concrets pour les acteurs de la DDEC 54-55.</p>
	</div>
	<div>
	<h3 class="text-lg font-semibold mb-4">Ressources</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white">Tutoriels</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white">Exemples</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-lg font-semibold mb-4">Contact</h3>
	<ul class="space-y-2">
	<li class="text-gray-400">DDEC 54-55</li>
	<li class="text-gray-400">contact@ddec5455.fr</li>
	<li class="text-gray-400">03 83 00 00 00</li>
	</ul>
	</div>
	<div>
	<h3 class="text-lg font-semibold mb-4">Suivez-nous</h3>
	<div class="flex space-x-4">
	<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
	<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
	<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
	<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a>
	</div>
	</div>
	</div>
	<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
	<p>© 2023 DDEC 54-55. Tous droits réservés.</p>
	</div>
	</div>
	</footer>

	<script>
	// Gestion des liens "Voir plus"
	document.querySelectorAll('.see-more-btn').forEach(button => {
	button.addEventListener('click', function() {
	const targetId = this.getAttribute('data-target');
	const detailsSection = document.getElementById(targetId);
	const chevron = this.querySelector('.chevron');

	detailsSection.classList.toggle('active');
	chevron.classList.toggle('active');

	// Mise à jour du texte du bouton
	if (detailsSection.classList.contains('active')) {
	this.innerHTML = 'Voir moins <i class="fas fa-chevron-right ml-1 text-xs chevron active"></i>';
	} else {
	this.innerHTML = 'Voir plus <i class="fas fa-chevron-right ml-1 text-xs chevron"></i>';
	}
	});
	});

	// Simple interactivity for the demo
	document.querySelectorAll('[data-category]').forEach(item => {
	item.addEventListener('click', function(e) {
	e.preventDefault();
	const category = this.getAttribute('data-category');

	// Update active state in sidebar
	document.querySelectorAll('[data-category]').forEach(link => {
	link.classList.remove('text-blue-600');
	link.classList.add('text-gray-700');
	});
	this.classList.remove('text-gray-700');
	this.classList.add('text-blue-600');

	// Simulate loading content
	const promptDetails = document.getElementById('prompt-details');
	promptDetails.classList.remove('fade-in');
	void promptDetails.offsetWidth; // Trigger reflow
	promptDetails.classList.add('fade-in');

	// Update content based on category (in a real app, this would be fetched from a database)
	let title = "";
	let description = "";
	let principle = "";
	let examples = [];
	let tags = [];

	switch(category) {
	case "zero-shot":
	title = "ZERO-SHOT PROMPTING – \"Pose une question directe\"";
	description = "Technique de base pour obtenir des réponses factuelles rapides";
	principle = "Obtenir une réponse factuelle, rapide, sans fournir d'exemple. Idéal pour les questions directes nécessitant une expertise spécifique.";
	examples = [
	{
	role: "Directeur d'établissement",
	prompt: "\"Quels sont les indicateurs à suivre pour piloter un projet pédagogique dans un collège catholique ?\""
	},
	{
	role: "Enseignant en maternelle",
	prompt: "\"Quels sont les signes d'alerte d'un trouble du langage oral chez un élève de grande section ?\""
	},
	{
	role: "Formateur",
	prompt: "\"Comment expliquer simplement le concept d'IA générative à des enseignants du 1er degré ?\""
	}
	];
	tags = [
	{text: "Directeur", color: "blue"},
	{text: "Enseignant", color: "blue"},
	{text: "Formateur", color: "blue"},
	{text: "Factuel", color: "green"},
	{text: "Rapide", color: "green"},
	{text: "Technique de base", color: "purple"}
	];
	break;
	case "few-shot":
	title = "ONE-SHOT / FEW-SHOT PROMPTING – \"Donne un exemple, puis demande le même format\"";
	description = "Technique d'apprentissage par imitation";
	principle = "L'IA apprend par imitation du style ou de la structure. Fournir un ou plusieurs exemples avant de demander à l'IA de produire un résultat similaire. Excellente pour le style ou le format.";
	examples = [
	{
	role: "Enseignant",
	prompt: "\"Voici une évaluation de dictée pour des élèves de CE2. Crée une évaluation similaire pour des CM1 sur l'accord sujet-verbe : « [dictée] »\""
	},
	{
	role: "Chargé de mission pastoral",
	prompt: "\"À partir de ce message d'invitation à une retraite spirituelle, rédige une invitation similaire pour les familles de 6e : [message d'invitation]\""
	},
	{
	role: "Responsable d'établissement",
	prompt: "\"Rédige un mail de remerciement au prêtre accompagnateur, en gardant un ton à la fois chaleureux et professionnel : [exemple de mail]\""
	}
	];
	tags = [
	{text: "Enseignant", color: "blue"},
	{text: "Pastorale", color: "blue"},
	{text: "Direction", color: "blue"},
	{text: "Imitation", color: "green"},
	{text: "Structure", color: "green"},
	{text: "Style", color: "purple"}
	];
	break;
	case "recherche":
	title = "PROMPTING DE RECHERCHE – \"Obtenir des données précises et récentes\"";
	description = "Adapté à Perplexity ou autres outils de recherche";
	principle = "Cibler une requête pointue, réglementaire ou scientifique. Particulièrement utile pour obtenir des informations actualisées ou des références précises.";
	examples = [
	{
	role: "Directeur diocésain",
	prompt: "\"Quels sont les derniers textes parus sur les PIAL dans l'Enseignement Catholique ?\""
	},
	{
	role: "Enseignant en lycée",
	prompt: "\"Quels sont les derniers ajustements du programme de philosophie en terminale en 2025 ?\""
	},
	{
	role: "Chargé de mission",
	prompt: "\"Quels exemples d'IA sont utilisés aujourd'hui dans des projets pédagogiques d'autres DDEC en France ?\""
	}
	];
	tags = [
	{text: "Recherche", color: "blue"},
	{text: "Actualité", color: "blue"},
	{text: "Réglementation", color: "blue"},
	{text: "Précis", color: "green"},
	{text: "Récent", color: "green"},
	{text: "Perplexity", color: "purple"}
	];
	break;
	case "creative":
	title = "ÉCRITURE CRÉATIVE – \"Génère un contenu original avec style et contraintes\"";
	description = "Pour générer des textes inédits et adaptés";
	principle = "Générer un texte inédit à destination d'un public identifié, avec des contraintes de style, de ton ou de format.";
	examples = [
	{
	role: "Chef d'établissement",
	prompt: "\"Rédige un discours de rentrée à destination des parents en lien avec le projet éducatif de l'établissement.\""
	},
	{
	role: "Enseignant",
	prompt: "\"Rédige une lettre fictive d'un poilu pour un travail d'expression écrite en 3e.\""
	},
	{
	role: "Responsable communication",
	prompt: "\"Crée un post Facebook pour valoriser les élèves qui s'engagent dans l'animation pastorale.\""
	}
	];
	tags = [
	{text: "Création", color: "blue"},
	{text: "Original", color: "blue"},
	{text: "Style", color: "blue"},
	{text: "Contraintes", color: "green"},
	{text: "Public cible", color: "green"},
	{text: "Expression", color: "purple"}
	];
	break;
	case "context":
	title = "EXPANSION CONTEXTUELLE (QQOQPC) – \"Précise le besoin de manière exhaustive\"";
	description = "QQOQPC : Quoi, Qui, Où, Quand, Pourquoi, Comment";
	principle = "Obtenir une réponse contextualisée, éviter les généralités. La méthode QQOQPC permet de structurer une demande en précisant tous les aspects contextuels.";
	examples = [
	{
	role: "Directeur",
	prompt: "\"Rédige une note (Quoi) pour les parents d'élèves (Qui) du collège Sainte-Marie (Où), expliquant l'intégration d'un module d'initiation à l'IA (Pourquoi) à partir de janvier 2025 (Quand), en lien avec le projet éducatif (Comment).\""
	},
	{
	role: "Enseignant",
	prompt: "\"Propose un plan de séance (Quoi) en SVT (Matière) pour une classe de 5e (Qui) dans un établissement rural (Où) sur le thème de la biodiversité (Pourquoi) avec une activité en extérieur (Comment).\""
	},
	{
	role: "Chargé de mission pastorale",
	prompt: "\"Prépare une fiche d'activité (Quoi) à destination des élèves de 4e (Qui) du collège Saint-Jean à Verdun (Où), pour un temps fort de réflexion sur le thème 'Pèlerins d'espérance, sur le chemin de la paix' (Pourquoi), prévu lors du temps de l'Avent 2025 (Quand). L'activité devra combiner une vidéo inspirante, un temps de silence et une expression créative collective (Comment).\""
	}
	];
	tags = [
	{text: "Contextuel", color: "blue"},
	{text: "QQOQPC", color: "blue"},
	{text: "Structuré", color: "blue"},
	{text: "Complet", color: "green"},
	{text: "Précis", color: "green"},
	{text: "Méthodologie", color: "purple"}
	];
	break;
	case "iteratif":
	title = "PROMPTING ITÉRATIF – \"Approfondir progressivement un sujet\"";
	description = "Exploration pas à pas d'un sujet complexe";
	principle = "Explorer un sujet complexe ou technique en plusieurs étapes, comme dans une démarche d'enquête ou de recherche. Chaque prompt s'appuie sur la réponse précédente pour approfondir.";
	examples = [
	{
	role: "Formateur DDEC",
	prompt: "\"Quelles sont les principales compétences numériques attendues pour les élèves de cycle 4 ?\" → \"Comment évaluer ces compétences dans un cadre pastoral ?\" → \"Quels outils numériques sont adaptés à cet usage dans un établissement rural ?\""
	},
	{
	role: "Enseignant de lycée pro",
	prompt: "\"Quels sont les risques de cybersécurité pour un compte scolaire partagé ?\" → \"Quelles bonnes pratiques peuvent être mises en place avec des élèves de seconde ?\""
	},
	{
	role: "Chargé de mission innovation",
	prompt: "\"Quels usages d'IA sont déjà expérimentés dans les établissements catholiques en France ?\" → \"Comment sont-ils évalués ?\" → \"Quels résultats ont été publiés ?\""
	}
	];
	tags = [
	{text: "Itératif", color: "blue"},
	{text: "Approfondissement", color: "blue"},
	{text: "Complexe", color: "blue"},
	{text: "Étapes", color: "green"},
	{text: "Recherche", color: "green"},
	{text: "Enquête", color: "purple"}
	];
	break;
	case "cot":
	title = "CHAIN OF THOUGHT (CHAÎNE DE PENSÉE - CoT) – \"Explique étape par étape\"";
	description = "Obtenir le raisonnement avant la réponse";
	principle = "Obtenir le raisonnement avant la réponse, pour comprendre comment l'IA structure sa pensée. Particulièrement utile pour les problèmes complexes nécessitant une démonstration ou une explication pédagogique.";
	examples = [
	{
	role: "Responsable informatique",
	prompt: "\"Voici une grille de compétences numériques pour les enseignants. Propose une stratégie d'auto-évaluation à partir de cette grille. Explique étape par étape.\""
	},
	{
	role: "Élève en terminale",
	prompt: "\"Résous cet exercice de probabilités. Explique chaque étape de ton raisonnement.\""
	},
	{
	role: "Enseignant de SVT",
	prompt: "\"Pourquoi l'usage excessif de pesticides réduit-il la biodiversité ? Donne une explication pas à pas.\""
	}
	];
	tags = [
	{text: "Raisonnement", color: "blue"},
	{text: "Étapes", color: "blue"},
	{text: "Pédagogique", color: "blue"},
	{text: "Explication", color: "green"},
	{text: "Démonstration", color: "green"},
	{text: "Complexe", color: "purple"}
	];
	break;
	case "chaining":
	title = "PROMPT CHAINING – \"Découper une tâche complexe\"";
	description = "Enchaînement de prompts pour un projet complet";
	principle = "Traiter un projet en plusieurs étapes logiques, chaque prompt s'appuyant sur la réponse précédente. Idéal pour les projets complexes nécessitant une progression méthodique.";
	examples = [
	{
	role: "Chef d'établissement",
	prompt: "Prompt 1 : \"Décris les objectifs de notre projet de jardin pédagogique.\"\nPrompt 2 : \"Sur cette base, propose une fiche action par classe participante.\"\nPrompt 3 : \"Nous sommes à Longwy en Meurthe-et-Moselle. Identifie les partenaires locaux à solliciter pour appuyer le projet.\""
	},
	{
	role: "Enseignant",
	prompt: "Prompt 1 : \"Propose une séquence d'histoire sur la Révolution française pour une classe de CM1.\"\nPrompt 2 : \"Crée une évaluation finale avec des critères clairs.\"\nPrompt 3 : \"Rédige un corrigé commenté.\""
	},
	{
	role: "Animateur pastoral",
	prompt: "Prompt 1 : \"Imagine une animation spirituelle sur le thème de la solidarité.\"\nPrompt 2 : \"Prévois une activité en petits groupes.\"\nPrompt 3 : \"Rédige une prière collective liée au thème.\""
	}
	];
	tags = [
	{text: "Enchaînement", color: "blue"},
	{text: "Projet", color: "blue"},
	{text: "Complexe", color: "blue"},
	{text: "Étapes", color: "green"},
	{text: "Méthodique", color: "green"},
	{text: "Progressif", color: "purple"}
	];
	break;
	case "tot":
	title = "TREE OF THOUGHT (ToT) – \"Explorer plusieurs pistes en parallèle\"";
	description = "Comparaison de stratégies ou options";
	principle = "Comparer différentes stratégies ou options, puis choisir la meilleure ou proposer une synthèse. Utile pour l'analyse stratégique ou la prise de décision.";
	examples = [
	{
	role: "Chef d'établissement",
	prompt: "\"Comment mieux impliquer les familles dans le projet éducatif ? Explore 3 stratégies : 1) réunions de co-construction, 2) café des parents mensuel, 3) communication numérique hebdomadaire. Compare-les et recommande une solution adaptée.\""
	},
	{
	role: "Enseignant de collège",
	prompt: "\"Propose 3 manières différentes d'enseigner la notion d'énergie renouvelable en 5e : 1) sortie terrain, 2) expérience en classe, 3) débat d'argumentation. Compare l'impact pédagogique de chaque méthode.\""
	},
	{
	role: "Responsable pastorale",
	prompt: "\"Quelle est la meilleure façon d'intégrer Laudato Si' dans le parcours de foi des élèves de seconde ? Évalue 3 approches : 1) atelier nature, 2) retraite spirituelle, 3) exposition collaborative.\""
	}
	];
	tags = [
	{text: "Comparaison", color: "blue"},
	{text: "Stratégie", color: "blue"},
	{text: "Options", color: "blue"},
	{text: "Analyse", color: "green"},
	{text: "Décision", color: "green"},
	{text: "Synthèse", color: "purple"}
	];
	break;
	case "roleplay":
	title = "SIMULATION / ROLE PLAYING – \"S'entraîner à gérer des situations concrètes\"";
	description = "Préparation d'interactions réalistes";
	principle = "Préparer une prise de parole, un entretien, une médiation, en simulant une interaction. Permet de s'entraîner à des situations professionnelles délicates.";
	examples = [
	{
	role: "Chef d'établissement",
	prompt: "\"Tu es un parent inquiet car son enfant est victime de harcèlement. J'incarne le chef d'établissement et je veux expliquer notre dispositif de prise en charge. Joue ce rôle avec réalisme.\""
	},
	{
	role: "Enseignant",
	prompt: "\"Tu es un élève de 5ème qui refuse systématiquement de faire ses devoirs. Je suis ton enseignant et je cherche à comprendre ce blocage.\""
	},
	{
	role: "Formateur",
	prompt: "\"Tu es un enseignant réticent à utiliser l'IA. Je suis ton collègue qui mène une formation courte. Posons-nous des questions et cherchons un terrain d'entente.\""
	}
	];
	tags = [
	{text: "Simulation", color: "blue"},
	{text: "Interaction", color: "blue"},
	{text: "Rôle", color: "blue"},
	{text: "Entraînement", color: "green"},
	{text: "Réaliste", color: "green"},
	{text: "Professionnel", color: "purple"}
	];
	break;
	case "tcrei":
	title = "TCREI (Task, Context, Reference, Evaluate, Iterate) – Cadre structuré pour écrire un bon prompt";
	description = "Structurer ses demandes selon 5 étapes";
	principle = "Structurer ses demandes selon 5 étapes : Tâche, Contexte, Référence, Évaluation, Itération. Méthode complète pour des prompts efficaces et précis.";
	examples = [
	{
	role: "Exemple DDEC",
	prompt: "• Tâche : \"Tu es un conseiller pédagogique expert. Propose un atelier de formation.\"\n• Contexte : \"Cet atelier est destiné aux enseignants de cycle 3 sur l'évaluation par compétences.\"\n• Référence : \"Modèle attendu : titre, objectifs, déroulé, durée.\"\n• Évaluation : \"La proposition est-elle actionnable avec 12 enseignants ?\"\n• Itération : \"Ajoute une variante pour les enseignants de collège.\""
	}
	];
	tags = [
	{text: "Structure", color: "blue"},
	{text: "Méthode", color: "blue"},
	{text: "Complet", color: "blue"},
	{text: "Tâche", color: "green"},
	{text: "Contexte", color: "green"},
	{text: "Itération", color: "purple"}
	];
	break;
	case "metaprompt":
	title = "MÉTA-PROMPTING – \"Demande à l'IA d'écrire un bon prompt pour toi\"";
	description = "Utiliser l'IA pour améliorer ses prompts";
	principle = "Utiliser l'IA pour générer des prompts réutilisables ou améliorer ses propres formulations. Particulièrement utile pour affiner ses techniques de prompting.";
	examples = [
	{
	role: "Enseignant",
	prompt: "\"Je veux un prompt pour générer des fiches de lecture adaptées au niveau CM1. Aide-moi à le formuler. Voici mon premier jet : [prompt initial]\""
	},
	{
	role: "Chef d'établissement",
	prompt: "\"Quel serait le meilleur prompt pour générer une lettre de félicitations personnalisée aux enseignants en fin d'année ? Voici une première idée de prompt : [prompt initial]\""
	},
	{
	role: "Formateur",
	prompt: "\"Améliore ce prompt : 'Explique l'IA aux enseignants de maternelle.' Fais-le plus précis, plus structuré, plus engageant.\""
	}
	];
	tags = [
	{text: "Amélioration", color: "blue"},
	{text: "Optimisation", color: "blue"},
	{text: "Prompting", color: "blue"},
	{text: "Affinage", color: "green"},
	{text: "Formulation", color: "green"},
	{text: "Réutilisable", color: "purple"}
	];
	break;
	case "translation":
	title = "TRADUCTION CONTEXTUELLE – \"Traduire avec sens et précision\"";
	description = "Traduction adaptée au contexte et au public";
	principle = "Traduire un texte en tenant compte du contexte d'usage, du public et du registre. Plus qu'une simple traduction mot à mot, il s'agit d'adapter le message.";
	examples = [
	{
	role: "Enseignant en anglais",
	prompt: "\"Traduis cette consigne d'évaluation en anglais niveau A2 pour des élèves de 5e.\""
	},
	{
	role: "Responsable de jumelage",
	prompt: "\"Traduis ce discours de bienvenue pour nos correspondants espagnols. Le ton doit être chaleureux et respectueux.\""
	},
	{
	role: "Responsable communication",
	prompt: "\"Traduis cette affiche sur la Semaine de la Foi en allemand pour notre école partenaire de Sarre.\""
	}
	];
	tags = [
	{text: "Traduction", color: "blue"},
	{text: "Langue", color: "blue"},
	{text: "Adaptation", color: "blue"},
	{text: "Contexte", color: "green"},
	{text: "Public", color: "green"},
	{text: "Registre", color: "purple"}
	];
	break;
	case "multimodal":
	title = "PROMPTING MULTIMODAL – \"Utiliser images, sons ou vidéos dans le prompt\"";
	description = "Pour les vidéos YouTube, utiliser NotebookLM par exemple";
	principle = "Fournir une image ou un média et poser une question à son sujet, ou générer un visuel à partir d'une consigne. Permet d'exploiter les capacités multimodales des IA avancées
	</html>