Canvas Gem P\u00e9dagogique \u2014 Eduservices<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n --navy: #1C3D5A;\n --navy2: #0F2438;\n --navydark: #071828;\n --blue: #2A5F8A;\n --sky: #3B82B8;\n --skylight: #6BAED6;\n --white: #FFFFFF;\n --offwhite: #F4F7FA;\n --light: #E8EFF6;\n --muted: #7A9AB5;\n --dark: #0A1E2E;\n --accent: #C8A84B;\n\n --P: #1C3D5A;\n --T: #0F2438;\n --C: #2A5F8A;\n --F: #3B82B8;\n --E: #071828;\n}\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nbody {\n font-family: 'DM Sans', sans-serif;\n background: var(--offwhite);\n color: var(--dark);\n min-height: 100vh;\n}\n\n\/* \u2500\u2500 Header \u2500\u2500 *\/\nheader {\n background: var(--navydark);\n padding: 1.2rem 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 3px solid var(--sky);\n}\n\n.header-left { display: flex; align-items: center; gap: 1.2rem; }\n\n.logo-badge {\n background: var(--navy);\n border: 2px solid var(--sky);\n border-radius: 8px;\n padding: 0.3rem 0.7rem;\n font-size: 0.7rem;\n font-weight: 600;\n color: var(--sky);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\nheader h1 {\n font-size: 1.1rem;\n font-weight: 600;\n color: var(--white);\n letter-spacing: -0.01em;\n}\n\nheader p {\n font-size: 0.75rem;\n color: var(--muted);\n margin-top: 0.1rem;\n}\n\n.credit {\n font-size: 0.72rem;\n color: var(--muted);\n font-weight: 500;\n}\n\n\/* \u2500\u2500 Layout \u2500\u2500 *\/\n.main {\n display: grid;\n grid-template-columns: 1fr 480px;\n gap: 0;\n min-height: calc(100vh - 72px);\n}\n\n\/* \u2500\u2500 Left panel \u2500\u2500 *\/\n.inputs {\n padding: 2rem;\n overflow-y: auto;\n}\n\n\/* \u2500\u2500 PTCFE badges \u2500\u2500 *\/\n.ptcfe-legend {\n display: flex;\n gap: 0.5rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n\n.badge {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n padding: 0.35rem 0.75rem;\n border-radius: 100px;\n font-size: 0.72rem;\n font-weight: 600;\n letter-spacing: 0.04em;\n}\n\n.badge .letter {\n font-size: 0.95rem;\n font-weight: 700;\n line-height: 1;\n}\n\n.badge-P { background: var(--P); color: var(--white); }\n.badge-T { background: var(--T); color: var(--skylight); border: 1px solid var(--blue); }\n.badge-C { background: var(--C); color: var(--white); }\n.badge-F { background: var(--F); color: var(--white); }\n.badge-E { background: var(--E); color: var(--skylight); border: 1px solid var(--blue); }\n\n\/* \u2500\u2500 Sections \u2500\u2500 *\/\n.section {\n background: var(--white);\n border-radius: 12px;\n margin-bottom: 1rem;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n border: 1px solid var(--light);\n transition: box-shadow 0.2s;\n}\n.section:focus-within {\n box-shadow: 0 0 0 2px var(--sky), 0 4px 12px rgba(59,130,184,0.15);\n}\n\n.section-header {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.9rem 1.2rem;\n background: var(--navydark);\n border-bottom: 1px solid var(--navy);\n}\n\n.section-letter {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n font-weight: 700;\n color: var(--white);\n flex-shrink: 0;\n}\n\n.ltr-P { background: var(--sky); }\n.ltr-T { background: var(--blue); }\n.ltr-C { background: var(--navy); }\n.ltr-F { background: var(--sky); }\n.ltr-E { background: var(--navy2); border: 1px solid var(--blue); }\n\n.section-title {\n font-size: 0.82rem;\n font-weight: 600;\n color: var(--white);\n letter-spacing: 0.03em;\n}\n\n.section-hint {\n font-size: 0.7rem;\n color: var(--muted);\n margin-left: auto;\n text-align: right;\n max-width: 180px;\n line-height: 1.3;\n}\n\n.section-body { padding: 1rem 1.2rem; }\n\nlabel {\n display: block;\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--navy);\n margin: 0.75rem 0 0.3rem;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n}\nlabel:first-child { margin-top: 0; }\n\ninput, textarea, select {\n width: 100%;\n padding: 0.6rem 0.8rem;\n border: 1.5px solid var(--light);\n border-radius: 7px;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.875rem;\n color: var(--dark);\n background: var(--offwhite);\n transition: border-color 0.15s, background 0.15s;\n resize: vertical;\n}\ninput:focus, textarea:focus, select:focus {\n outline: none;\n border-color: var(--sky);\n background: var(--white);\n}\n\ntextarea { min-height: 64px; }\n\n.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }\n\n\/* \u2500\u2500 Chips de format \u2500\u2500 *\/\n.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }\n.chip {\n padding: 0.28rem 0.7rem;\n border-radius: 100px;\n border: 1.5px solid var(--light);\n background: var(--offwhite);\n font-size: 0.72rem;\n font-weight: 500;\n color: var(--blue);\n cursor: pointer;\n transition: all 0.15s;\n user-select: none;\n}\n.chip:hover { border-color: var(--sky); color: var(--navy); }\n.chip.active { background: var(--sky); border-color: var(--sky); color: var(--white); }\n\n\/* \u2500\u2500 Right panel \u2014 Prompt output \u2500\u2500 *\/\n.output-panel {\n background: var(--navydark);\n display: flex;\n flex-direction: column;\n position: sticky;\n top: 0;\n height: 100vh;\n border-left: 2px solid var(--navy);\n}\n\n.output-header {\n padding: 1.2rem 1.5rem;\n border-bottom: 1px solid var(--navy);\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.output-title {\n font-size: 0.8rem;\n font-weight: 600;\n color: var(--sky);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.completeness {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.72rem;\n color: var(--muted);\n}\n\n.completeness-bar {\n width: 80px;\n height: 4px;\n background: var(--navy);\n border-radius: 2px;\n overflow: hidden;\n}\n.completeness-fill {\n height: 100%;\n background: var(--sky);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\npre {\n flex: 1;\n padding: 1.5rem;\n font-family: 'DM Mono', monospace;\n font-size: 0.78rem;\n color: #CBD5E1;\n overflow-y: auto;\n white-space: pre-wrap;\n line-height: 1.7;\n}\n\n\/* Syntax-like coloring via spans injected in JS *\/\npre .section-tag { color: var(--skylight); font-weight: 500; }\npre .label-tag { color: var(--accent); }\npre .value-tag { color: #E2E8F0; }\npre .rule-tag { color: #94A3B8; }\n\n.output-footer {\n padding: 1rem 1.5rem;\n border-top: 1px solid var(--navy);\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n}\n\n.btn {\n padding: 0.7rem 1.2rem;\n border-radius: 8px;\n border: none;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.82rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n\n.btn-primary {\n background: var(--sky);\n color: var(--white);\n}\n.btn-primary:hover { background: var(--blue); }\n\n.btn-secondary {\n background: var(--navy);\n color: var(--skylight);\n border: 1px solid var(--blue);\n}\n.btn-secondary:hover { background: var(--blue); color: var(--white); }\n\n.copy-feedback {\n text-align: center;\n font-size: 0.72rem;\n color: var(--accent);\n height: 16px;\n transition: opacity 0.3s;\n opacity: 0;\n}\n.copy-feedback.show { opacity: 1; }\n\n\/* \u2500\u2500 Instructions d'usage \u2500\u2500 *\/\n.usage-tip {\n background: var(--navy);\n border-left: 3px solid var(--sky);\n padding: 0.75rem 1rem;\n border-radius: 0 8px 8px 0;\n margin-bottom: 1.5rem;\n font-size: 0.78rem;\n color: var(--light);\n line-height: 1.5;\n}\n.usage-tip strong { color: var(--sky); }\n\n@media (max-width: 900px) {\n .main { grid-template-columns: 1fr; }\n .output-panel { position: relative; height: auto; }\n pre { height: 400px; }\n}\n<\/style>\n<\/head>\n<body>\n\n<header>\n <div class=\"header-left\">\n <div class=\"logo-badge\">Eduservices<\/div>\n <div>\n <h1>Canvas Gem P\u00e9dagogique<\/h1>\n <p>G\u00e9n\u00e8re le prompt syst\u00e8me de votre Gem en 5 \u00e9tapes<\/p>\n <\/div>\n <\/div>\n <div class=\"credit\">Con\u00e7u par Julien Caudrelier<\/div>\n<\/header>\n\n<div class=\"main\">\n\n \n <div class=\"inputs\">\n\n <div class=\"usage-tip\">\n <strong>Comment utiliser ce canvas :<\/strong> Remplissez les 5 sections. Le prompt syst\u00e8me se g\u00e9n\u00e8re en temps r\u00e9el \u00e0 droite. Copiez-le puis collez-le dans <strong>Gemini \u203a Gems \u203a Nouveau \u203a Instructions<\/strong>.\n <\/div>\n\n <div class=\"ptcfe-legend\">\n <div class=\"badge badge-P\"><span class=\"letter\">P<\/span> Persona<\/div>\n <div class=\"badge badge-T\"><span class=\"letter\">T<\/span> T\u00e2che<\/div>\n <div class=\"badge badge-C\"><span class=\"letter\">C<\/span> Contexte<\/div>\n <div class=\"badge badge-F\"><span class=\"letter\">F<\/span> Format<\/div>\n <div class=\"badge badge-E\"><span class=\"letter\">E<\/span> Exemples & Garde-fous<\/div>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"section-header\">\n <div class=\"section-letter ltr-P\">P<\/div>\n <div>\n <div class=\"section-title\">Persona \u2014 Qui est cet assistant ?<\/div>\n <\/div>\n <div class=\"section-hint\">R\u00f4le, ton, posture vis-\u00e0-vis des apprenants<\/div>\n <\/div>\n <div class=\"section-body\">\n <label>Nom du Gem<\/label>\n <input id=\"f_nom\" oninput=\"up()\" placeholder=\"ex : Tuteur Marketing L3\">\n <label>Mission principale (en une phrase)<\/label>\n <textarea id=\"f_mission\" oninput=\"up()\" rows=\"2\" placeholder=\"ex : Aider les \u00e9tudiants \u00e0 r\u00e9viser les mod\u00e8les strat\u00e9giques en les guidant par questions.\"><\/textarea>\n <label>Ton et posture<\/label>\n <div class=\"chips\" id=\"chips_ton\">\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Bienveillant<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Socratique<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Direct et concis<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Encourageant<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Exigeant<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Neutre \/ factuel<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"section-header\">\n <div class=\"section-letter ltr-T\">T<\/div>\n <div>\n <div class=\"section-title\">T\u00e2che \u2014 Que produit cet assistant ?<\/div>\n <\/div>\n <div class=\"section-hint\">Actions concr\u00e8tes que le Gem sait faire<\/div>\n <\/div>\n <div class=\"section-body\">\n <label>Ce que le Gem peut produire<\/label>\n <div class=\"chips\" id=\"chips_tache\">\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">QCM<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Questions ouvertes<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Fiche de r\u00e9vision<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Correction de copie<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Trame de cours<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">\u00c9tude de cas<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Exercices d'application<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">R\u00e9sum\u00e9<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Plan de cours<\/div>\n <\/div>\n <label>Autres t\u00e2ches sp\u00e9cifiques<\/label>\n <textarea id=\"f_tache\" oninput=\"up()\" rows=\"2\" placeholder=\"ex : Proposer des mises en situation professionnelles r\u00e9alistes...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"section-header\">\n <div class=\"section-letter ltr-C\">C<\/div>\n <div>\n <div class=\"section-title\">Contexte \u2014 Dans quel cadre ?<\/div>\n <\/div>\n <div class=\"section-hint\">Niveau, mati\u00e8re, moment dans le cursus<\/div>\n <\/div>\n <div class=\"section-body\">\n <div class=\"row2\">\n <div>\n <label>Niveau des apprenants<\/label>\n <select id=\"f_niveau\" onchange=\"up()\">\n <option value=\"\">\u2014 Choisir \u2014<\/option>\n <option>1\u00e8re ann\u00e9e (Bac+1)<\/option>\n <option>2\u00e8me ann\u00e9e (Bac+2)<\/option>\n <option>Bachelor 1 (Bac+3)<\/option>\n <option>Bachelor 2 (Bac+3)<\/option>\n <option>Bachelor 3 (Bac+3)<\/option>\n <option>Master 1 (Bac+4)<\/option>\n <option>Master 2 (Bac+5)<\/option>\n <option>Formation continue<\/option>\n <\/select>\n <\/div>\n <div>\n <label>Moment dans le cursus<\/label>\n <select id=\"f_moment\" onchange=\"up()\">\n <option value=\"\">\u2014 Choisir \u2014<\/option>\n <option>D\u00e9but de module<\/option>\n <option>En cours de module<\/option>\n <option>R\u00e9vision avant examen<\/option>\n <option>Apr\u00e8s cours (consolidation)<\/option>\n <option>Projet \/ m\u00e9moire<\/option>\n <\/select>\n <\/div>\n <\/div>\n <label>Mati\u00e8re \/ domaine<\/label>\n <input id=\"f_matiere\" oninput=\"up()\" placeholder=\"ex : Marketing strat\u00e9gique, Droit des contrats, Finance d'entreprise...\">\n <label>Sources NotebookLM (chapitres ou th\u00e9matiques)<\/label>\n <textarea id=\"f_sources\" oninput=\"up()\" rows=\"3\" placeholder=\"ex : Chapitre 1 \u2014 Segmentation, Chapitre 2 \u2014 Positionnement, Fiche synth\u00e8se BCG...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"section-header\">\n <div class=\"section-letter ltr-F\">F<\/div>\n <div>\n <div class=\"section-title\">Format \u2014 Quelle structure de r\u00e9ponse ?<\/div>\n <\/div>\n <div class=\"section-hint\">Longueur, mise en forme, rendu attendu<\/div>\n <\/div>\n <div class=\"section-body\">\n <label>Longueur des r\u00e9ponses<\/label>\n <div class=\"chips\" id=\"chips_longueur\">\n <div class=\"chip\" onclick=\"toggleChip(this,'longueur')\">Courtes (3-5 lignes)<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'longueur')\">Moyennes (1 paragraphe)<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'longueur')\">Longues (structur\u00e9es)<\/div>\n <\/div>\n <label>Mise en forme<\/label>\n <div class=\"chips\" id=\"chips_forme\">\n <div class=\"chip\" onclick=\"toggleChip(this,'forme')\">Bullet points<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'forme')\">Num\u00e9rotation<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'forme')\">Tableau<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'forme')\">Texte continu<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'forme')\">Fiche imprimable<\/div>\n <\/div>\n <label>Toujours terminer par<\/label>\n <div class=\"chips\" id=\"chips_fin\">\n <div class=\"chip active\" onclick=\"toggleChip(this,'fin')\">Une question de relance<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'fin')\">Un point cl\u00e9 \u00e0 retenir<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'fin')\">Une mise en situation<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'fin')\">Rien de particulier<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"section-header\">\n <div class=\"section-letter ltr-E\">E<\/div>\n <div>\n <div class=\"section-title\">Exemples & Garde-fous<\/div>\n <\/div>\n <div class=\"section-hint\">Ce qu'il fait bien, ce qu'il refuse<\/div>\n <\/div>\n <div class=\"section-body\">\n <label>Exemple d'une bonne r\u00e9ponse (optionnel)<\/label>\n <textarea id=\"f_exemple\" oninput=\"up()\" rows=\"3\" placeholder=\"Collez ici un exemple du type de r\u00e9ponse attendu \u2014 le Gem s'en inspirera syst\u00e9matiquement...\"><\/textarea>\n <label>Ce que le Gem doit toujours refuser<\/label>\n <div class=\"chips\" id=\"chips_refus\">\n <div class=\"chip active\" onclick=\"toggleChip(this,'refus')\">R\u00e9diger les devoirs<\/div>\n <div class=\"chip active\" onclick=\"toggleChip(this,'refus')\">Donner la r\u00e9ponse directement<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'refus')\">Sortir des sources<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'refus')\">Inventer des chiffres<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'refus')\">R\u00e9pondre hors mati\u00e8re<\/div>\n <\/div>\n <label>Autres garde-fous sp\u00e9cifiques<\/label>\n <textarea id=\"f_refus\" oninput=\"up()\" rows=\"2\" placeholder=\"ex : Ne jamais donner une note ou une appr\u00e9ciation sur le travail de l'\u00e9tudiant...\"><\/textarea>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"output-panel\">\n <div class=\"output-header\">\n <div class=\"output-title\">Prompt syst\u00e8me g\u00e9n\u00e9r\u00e9<\/div>\n <div class=\"completeness\">\n <div class=\"completeness-bar\">\n <div class=\"completeness-fill\" id=\"comp_fill\" style=\"width:0%\"><\/div>\n <\/div>\n <span id=\"comp_label\">0 \/ 5<\/span>\n <\/div>\n <\/div>\n <pre id=\"prompt_out\"><\/pre>\n <div class=\"output-footer\">\n <button class=\"btn btn-primary\" onclick=\"copyPrompt()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>\n Copier le prompt syst\u00e8me\n <\/button>\n <button class=\"btn btn-secondary\" onclick=\"resetAll()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><\/svg>\n R\u00e9initialiser\n <\/button>\n <div class=\"copy-feedback\" id=\"copy_fb\">\u2713 Prompt copi\u00e9 dans le presse-papier<\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n\/\/ \u2500\u2500 Chip state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst chipState = { ton: [], tache: [], longueur: [], forme: [], fin: ['Une question de relance'], refus: ['R\u00e9diger les devoirs', 'Donner la r\u00e9ponse directement'] };\n\nfunction toggleChip(el, group) {\n const val = el.textContent.trim();\n const idx = chipState[group].indexOf(val);\n if (idx === -1) {\n \/\/ Longueur = single select\n if (group === 'longueur') {\n chipState.longueur = [val];\n document.querySelectorAll('#chips_longueur .chip').forEach(c => c.classList.remove('active'));\n }\n chipState[group].push(val);\n el.classList.add('active');\n } else {\n chipState[group].splice(idx, 1);\n el.classList.remove('active');\n }\n up();\n}\n\n\/\/ \u2500\u2500 Completeness \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction completeness() {\n let score = 0;\n if (v('f_nom') || v('f_mission')) score++;\n if (chipState.tache.length > 0 || v('f_tache')) score++;\n if (v('f_niveau') || v('f_matiere') || v('f_sources')) score++;\n if (chipState.longueur.length > 0 || chipState.forme.length > 0) score++;\n if (chipState.refus.length > 0 || v('f_refus')) score++;\n const pct = (score \/ 5) * 100;\n document.getElementById('comp_fill').style.width = pct + '%';\n document.getElementById('comp_label').textContent = score + ' \/ 5';\n}\n\n\/\/ \u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction v(id) { return (document.getElementById(id)?.value || '').trim(); }\nfunction list(arr) { return arr.length ? arr.join(', ') : null; }\n\n\/\/ \u2500\u2500 Prompt builder \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction up() {\n completeness();\n\n const nom = v('f_nom') || 'Assistant P\u00e9dagogique';\n const mission = v('f_mission') || 'Accompagner les apprenants dans leur parcours.';\n const ton = list(chipState.ton) || 'Bienveillant et professionnel';\n const taches = [...chipState.tache, ...(v('f_tache') ? [v('f_tache')] : [])];\n const niveau = v('f_niveau') || '';\n const moment = v('f_moment') || '';\n const matiere = v('f_matiere') || '';\n const sources = v('f_sources') || 'Sources p\u00e9dagogiques fournies via NotebookLM.';\n const longueur= list(chipState.longueur) || '';\n const forme = list(chipState.forme) || '';\n const fin = list(chipState.fin) || '';\n const refusList = [...chipState.refus, ...(v('f_refus') ? [v('f_refus')] : [])];\n const exemple = v('f_exemple') || '';\n\n let p = '';\n\n \/\/ Directives globales\n p += `## DIRECTIVES GLOBALES (STRICTES)\\n`;\n p += `- Ne te pr\u00e9sente jamais au d\u00e9but de tes r\u00e9ponses.\\n`;\n p += `- Ne r\u00e9sume jamais tes instructions ni tes capacit\u00e9s.\\n`;\n p += `- R\u00e9ponds de mani\u00e8re directe et op\u00e9rationnelle.\\n`;\n p += `- Si une modification est demand\u00e9e, effectue-la sans pr\u00e9ambule.\\n`;\n p += `\\n`;\n\n \/\/ P \u2014 Persona\n p += `## P \u2014 PERSONA\\n`;\n p += `Tu es \"${nom}\".\\n`;\n p += `Mission : ${mission}\\n`;\n p += `Ton et posture : ${ton}.\\n`;\n p += `\\n`;\n\n \/\/ T \u2014 T\u00e2che\n p += `## T \u2014 T\u00c2CHE\\n`;\n if (taches.length > 0) {\n p += `Tu peux produire les \u00e9l\u00e9ments suivants :\\n`;\n taches.forEach(t => { p += `- ${t}\\n`; });\n } else {\n p += `Accompagne l'apprenant dans sa progression.\\n`;\n }\n p += `\\n`;\n\n \/\/ C \u2014 Contexte\n p += `## C \u2014 CONTEXTE\\n`;\n if (niveau) p += `Niveau des apprenants : ${niveau}.\\n`;\n if (matiere) p += `Domaine \/ mati\u00e8re : ${matiere}.\\n`;\n if (moment) p += `Moment dans le cursus : ${moment}.\\n`;\n p += `\\n`;\n\n \/\/ Sources\n p += `## SOURCES (NOTEBOOKLM)\\n`;\n p += `Tu es connect\u00e9 \u00e0 un NotebookLM contenant : ${sources}\\n`;\n p += `- Appuie-toi EXCLUSIVEMENT sur ces sources pour r\u00e9pondre.\\n`;\n p += `- Cite syst\u00e9matiquement tes sources (r\u00e9f\u00e9rence de chapitre ou paragraphe).\\n`;\n p += `- Si la r\u00e9ponse n'est pas dans les sources, indique-le explicitement. N'invente jamais.\\n`;\n p += `\\n`;\n\n \/\/ F \u2014 Format\n p += `## F \u2014 FORMAT\\n`;\n if (longueur) p += `Longueur des r\u00e9ponses : ${longueur}.\\n`;\n if (forme) p += `Mise en forme : ${forme}.\\n`;\n if (fin) p += `Toujours terminer par : ${fin}.\\n`;\n if (!longueur && !forme && !fin) p += `Adapte le format \u00e0 la demande.\\n`;\n p += `\\n`;\n\n \/\/ E \u2014 Exemples & Garde-fous\n p += `## E \u2014 GARDE-FOUS\\n`;\n if (refusList.length > 0) {\n p += `Tu refuses syst\u00e9matiquement de :\\n`;\n refusList.forEach(r => { p += `- ${r}\\n`; });\n }\n if (exemple) {\n p += `\\n## EXEMPLE DE BONNE R\u00c9PONSE\\n`;\n p += exemple + `\\n`;\n }\n\n \/\/ Colorize\n const html = p\n .replace(\/^(## .+)$\/gm, '<span class=\"section-tag\">$1<\/span>')\n .replace(\/^(- .+)$\/gm, '<span class=\"rule-tag\">$1<\/span>');\n\n document.getElementById('prompt_out').innerHTML = html;\n}\n\n\/\/ \u2500\u2500 Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction copyPrompt() {\n const text = document.getElementById('prompt_out').textContent;\n navigator.clipboard.writeText(text).then(() => {\n const fb = document.getElementById('copy_fb');\n fb.classList.add('show');\n setTimeout(() => fb.classList.remove('show'), 2500);\n });\n}\n\n\/\/ \u2500\u2500 Reset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction resetAll() {\n ['f_nom','f_mission','f_tache','f_niveau','f_moment','f_matiere','f_sources','f_exemple','f_refus'].forEach(id => {\n const el = document.getElementById(id);\n if (el) el.value = '';\n });\n Object.keys(chipState).forEach(k => chipState[k] = []);\n chipState.fin = ['Une question de relance'];\n chipState.refus = ['R\u00e9diger les devoirs', 'Donner la r\u00e9ponse directement'];\n document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));\n \/\/ R\u00e9activer les chips par d\u00e9faut\n document.querySelectorAll('#chips_fin .chip').forEach(c => {\n if (c.textContent.trim() === 'Une question de relance') c.classList.add('active');\n });\n document.querySelectorAll('#chips_refus .chip').forEach(c => {\n if (['R\u00e9diger les devoirs','Donner la r\u00e9ponse directement'].includes(c.textContent.trim())) c.classList.add('active');\n });\n up();\n}\n\n\/\/ Init\nup();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Canvas Gem P\u00e9dagogique \u2014 Eduservices Eduservices Canvas Gem P\u00e9dagogique G\u00e9n\u00e8re le prompt syst\u00e8me de votre Gem en 5 \u00e9tapes Con\u00e7u par Julien Caudrelier Comment utiliser ce canvas : Remplissez les 5 sections. Le prompt syst\u00e8me se g\u00e9n\u00e8re en temps r\u00e9el \u00e0 droite. Copiez-le puis collez-le dans Gemini \u203a Gems \u203a Nouveau \u203a Instructions. P Persona […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-676","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>JIP - Julien Caudrelier communication efficace<\/title>\n<meta name=\"description\" content=\"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/juliencaudrelier.fr\/index.php\/test\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JIP - Julien Caudrelier communication efficace\" \/>\n<meta property=\"og:description\" content=\"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/juliencaudrelier.fr\/index.php\/test\/\" \/>\n<meta property=\"og:site_name\" content=\"Julien Caudrelier communication efficace\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-03T12:26:58+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/index.php\\\/test\\\/\",\"url\":\"https:\\\/\\\/juliencaudrelier.fr\\\/index.php\\\/test\\\/\",\"name\":\"JIP - Julien Caudrelier communication efficace\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#website\"},\"datePublished\":\"2020-05-26T11:41:43+00:00\",\"dateModified\":\"2026-06-03T12:26:58+00:00\",\"description\":\"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/index.php\\\/test\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/juliencaudrelier.fr\\\/index.php\\\/test\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/index.php\\\/test\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/juliencaudrelier.fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JIP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#website\",\"url\":\"https:\\\/\\\/juliencaudrelier.fr\\\/\",\"name\":\"Julien Caudrelier communication efficace\",\"description\":\"Consultant formateur strat\u00e9gie de communication\",\"publisher\":{\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/juliencaudrelier.fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#organization\",\"name\":\"Julien Caudrelier conseil en strat\u00e9gie de communication\",\"url\":\"https:\\\/\\\/juliencaudrelier.fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/juliencaudrelier.fr\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/cropped-julien-Caudrelier-2-1.png\",\"contentUrl\":\"https:\\\/\\\/juliencaudrelier.fr\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/cropped-julien-Caudrelier-2-1.png\",\"width\":486,\"height\":137,\"caption\":\"Julien Caudrelier conseil en strat\u00e9gie de communication\"},\"image\":{\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/julien-caudrelier-71933710b\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"JIP - Julien Caudrelier communication efficace","description":"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/juliencaudrelier.fr\/index.php\/test\/","og_locale":"fr_FR","og_type":"article","og_title":"JIP - Julien Caudrelier communication efficace","og_description":"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.","og_url":"https:\/\/juliencaudrelier.fr\/index.php\/test\/","og_site_name":"Julien Caudrelier communication efficace","article_modified_time":"2026-06-03T12:26:58+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/juliencaudrelier.fr\/index.php\/test\/","url":"https:\/\/juliencaudrelier.fr\/index.php\/test\/","name":"JIP - Julien Caudrelier communication efficace","isPartOf":{"@id":"https:\/\/juliencaudrelier.fr\/#website"},"datePublished":"2020-05-26T11:41:43+00:00","dateModified":"2026-06-03T12:26:58+00:00","description":"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.","breadcrumb":{"@id":"https:\/\/juliencaudrelier.fr\/index.php\/test\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/juliencaudrelier.fr\/index.php\/test\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/juliencaudrelier.fr\/index.php\/test\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/juliencaudrelier.fr\/"},{"@type":"ListItem","position":2,"name":"JIP"}]},{"@type":"WebSite","@id":"https:\/\/juliencaudrelier.fr\/#website","url":"https:\/\/juliencaudrelier.fr\/","name":"Julien Caudrelier communication efficace","description":"Consultant formateur strat\u00e9gie de communication","publisher":{"@id":"https:\/\/juliencaudrelier.fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/juliencaudrelier.fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/juliencaudrelier.fr\/#organization","name":"Julien Caudrelier conseil en strat\u00e9gie de communication","url":"https:\/\/juliencaudrelier.fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/juliencaudrelier.fr\/#\/schema\/logo\/image\/","url":"https:\/\/juliencaudrelier.fr\/wp-content\/uploads\/2020\/08\/cropped-julien-Caudrelier-2-1.png","contentUrl":"https:\/\/juliencaudrelier.fr\/wp-content\/uploads\/2020\/08\/cropped-julien-Caudrelier-2-1.png","width":486,"height":137,"caption":"Julien Caudrelier conseil en strat\u00e9gie de communication"},"image":{"@id":"https:\/\/juliencaudrelier.fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/in\/julien-caudrelier-71933710b\/"]}]}},"_links":{"self":[{"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/pages\/676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/comments?post=676"}],"version-history":[{"count":11,"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/pages\/676\/revisions"}],"predecessor-version":[{"id":2918,"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/pages\/676\/revisions\/2918"}],"wp:attachment":[{"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/media?parent=676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\n\nCanvas Gem P\u00e9dagogique \u2014 Eduservices<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n:root {\n --navy: #1C3D5A;\n --navy2: #0F2438;\n --navydark: #071828;\n --blue: #2A5F8A;\n --sky: #3B82B8;\n --skylight: #6BAED6;\n --white: #FFFFFF;\n --offwhite: #F4F7FA;\n --light: #E8EFF6;\n --muted: #7A9AB5;\n --dark: #0A1E2E;\n --accent: #C8A84B;\n\n --P: #1C3D5A;\n --T: #0F2438;\n --C: #2A5F8A;\n --F: #3B82B8;\n --E: #071828;\n}\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\nbody {\n font-family: 'DM Sans', sans-serif;\n background: var(--offwhite);\n color: var(--dark);\n min-height: 100vh;\n}\n\n\/* \u2500\u2500 Header \u2500\u2500 *\/\nheader {\n background: var(--navydark);\n padding: 1.2rem 2rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 3px solid var(--sky);\n}\n\n.header-left { display: flex; align-items: center; gap: 1.2rem; }\n\n.logo-badge {\n background: var(--navy);\n border: 2px solid var(--sky);\n border-radius: 8px;\n padding: 0.3rem 0.7rem;\n font-size: 0.7rem;\n font-weight: 600;\n color: var(--sky);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\nheader h1 {\n font-size: 1.1rem;\n font-weight: 600;\n color: var(--white);\n letter-spacing: -0.01em;\n}\n\nheader p {\n font-size: 0.75rem;\n color: var(--muted);\n margin-top: 0.1rem;\n}\n\n.credit {\n font-size: 0.72rem;\n color: var(--muted);\n font-weight: 500;\n}\n\n\/* \u2500\u2500 Layout \u2500\u2500 *\/\n.main {\n display: grid;\n grid-template-columns: 1fr 480px;\n gap: 0;\n min-height: calc(100vh - 72px);\n}\n\n\/* \u2500\u2500 Left panel \u2500\u2500 *\/\n.inputs {\n padding: 2rem;\n overflow-y: auto;\n}\n\n\/* \u2500\u2500 PTCFE badges \u2500\u2500 *\/\n.ptcfe-legend {\n display: flex;\n gap: 0.5rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n\n.badge {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n padding: 0.35rem 0.75rem;\n border-radius: 100px;\n font-size: 0.72rem;\n font-weight: 600;\n letter-spacing: 0.04em;\n}\n\n.badge .letter {\n font-size: 0.95rem;\n font-weight: 700;\n line-height: 1;\n}\n\n.badge-P { background: var(--P); color: var(--white); }\n.badge-T { background: var(--T); color: var(--skylight); border: 1px solid var(--blue); }\n.badge-C { background: var(--C); color: var(--white); }\n.badge-F { background: var(--F); color: var(--white); }\n.badge-E { background: var(--E); color: var(--skylight); border: 1px solid var(--blue); }\n\n\/* \u2500\u2500 Sections \u2500\u2500 *\/\n.section {\n background: var(--white);\n border-radius: 12px;\n margin-bottom: 1rem;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n border: 1px solid var(--light);\n transition: box-shadow 0.2s;\n}\n.section:focus-within {\n box-shadow: 0 0 0 2px var(--sky), 0 4px 12px rgba(59,130,184,0.15);\n}\n\n.section-header {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.9rem 1.2rem;\n background: var(--navydark);\n border-bottom: 1px solid var(--navy);\n}\n\n.section-letter {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n font-weight: 700;\n color: var(--white);\n flex-shrink: 0;\n}\n\n.ltr-P { background: var(--sky); }\n.ltr-T { background: var(--blue); }\n.ltr-C { background: var(--navy); }\n.ltr-F { background: var(--sky); }\n.ltr-E { background: var(--navy2); border: 1px solid var(--blue); }\n\n.section-title {\n font-size: 0.82rem;\n font-weight: 600;\n color: var(--white);\n letter-spacing: 0.03em;\n}\n\n.section-hint {\n font-size: 0.7rem;\n color: var(--muted);\n margin-left: auto;\n text-align: right;\n max-width: 180px;\n line-height: 1.3;\n}\n\n.section-body { padding: 1rem 1.2rem; }\n\nlabel {\n display: block;\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--navy);\n margin: 0.75rem 0 0.3rem;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n}\nlabel:first-child { margin-top: 0; }\n\ninput, textarea, select {\n width: 100%;\n padding: 0.6rem 0.8rem;\n border: 1.5px solid var(--light);\n border-radius: 7px;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.875rem;\n color: var(--dark);\n background: var(--offwhite);\n transition: border-color 0.15s, background 0.15s;\n resize: vertical;\n}\ninput:focus, textarea:focus, select:focus {\n outline: none;\n border-color: var(--sky);\n background: var(--white);\n}\n\ntextarea { min-height: 64px; }\n\n.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }\n\n\/* \u2500\u2500 Chips de format \u2500\u2500 *\/\n.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }\n.chip {\n padding: 0.28rem 0.7rem;\n border-radius: 100px;\n border: 1.5px solid var(--light);\n background: var(--offwhite);\n font-size: 0.72rem;\n font-weight: 500;\n color: var(--blue);\n cursor: pointer;\n transition: all 0.15s;\n user-select: none;\n}\n.chip:hover { border-color: var(--sky); color: var(--navy); }\n.chip.active { background: var(--sky); border-color: var(--sky); color: var(--white); }\n\n\/* \u2500\u2500 Right panel \u2014 Prompt output \u2500\u2500 *\/\n.output-panel {\n background: var(--navydark);\n display: flex;\n flex-direction: column;\n position: sticky;\n top: 0;\n height: 100vh;\n border-left: 2px solid var(--navy);\n}\n\n.output-header {\n padding: 1.2rem 1.5rem;\n border-bottom: 1px solid var(--navy);\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.output-title {\n font-size: 0.8rem;\n font-weight: 600;\n color: var(--sky);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.completeness {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.72rem;\n color: var(--muted);\n}\n\n.completeness-bar {\n width: 80px;\n height: 4px;\n background: var(--navy);\n border-radius: 2px;\n overflow: hidden;\n}\n.completeness-fill {\n height: 100%;\n background: var(--sky);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\npre {\n flex: 1;\n padding: 1.5rem;\n font-family: 'DM Mono', monospace;\n font-size: 0.78rem;\n color: #CBD5E1;\n overflow-y: auto;\n white-space: pre-wrap;\n line-height: 1.7;\n}\n\n\/* Syntax-like coloring via spans injected in JS *\/\npre .section-tag { color: var(--skylight); font-weight: 500; }\npre .label-tag { color: var(--accent); }\npre .value-tag { color: #E2E8F0; }\npre .rule-tag { color: #94A3B8; }\n\n.output-footer {\n padding: 1rem 1.5rem;\n border-top: 1px solid var(--navy);\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n}\n\n.btn {\n padding: 0.7rem 1.2rem;\n border-radius: 8px;\n border: none;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.82rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n}\n\n.btn-primary {\n background: var(--sky);\n color: var(--white);\n}\n.btn-primary:hover { background: var(--blue); }\n\n.btn-secondary {\n background: var(--navy);\n color: var(--skylight);\n border: 1px solid var(--blue);\n}\n.btn-secondary:hover { background: var(--blue); color: var(--white); }\n\n.copy-feedback {\n text-align: center;\n font-size: 0.72rem;\n color: var(--accent);\n height: 16px;\n transition: opacity 0.3s;\n opacity: 0;\n}\n.copy-feedback.show { opacity: 1; }\n\n\/* \u2500\u2500 Instructions d'usage \u2500\u2500 *\/\n.usage-tip {\n background: var(--navy);\n border-left: 3px solid var(--sky);\n padding: 0.75rem 1rem;\n border-radius: 0 8px 8px 0;\n margin-bottom: 1.5rem;\n font-size: 0.78rem;\n color: var(--light);\n line-height: 1.5;\n}\n.usage-tip strong { color: var(--sky); }\n\n@media (max-width: 900px) {\n .main { grid-template-columns: 1fr; }\n .output-panel { position: relative; height: auto; }\n pre { height: 400px; }\n}\n<\/style>\n<\/head>\n<body>\n\n<header>\n <div class=\"header-left\">\n <div class=\"logo-badge\">Eduservices<\/div>\n <div>\n <h1>Canvas Gem P\u00e9dagogique<\/h1>\n <p>G\u00e9n\u00e8re le prompt syst\u00e8me de votre Gem en 5 \u00e9tapes<\/p>\n <\/div>\n <\/div>\n <div class=\"credit\">Con\u00e7u par Julien Caudrelier<\/div>\n<\/header>\n\n<div class=\"main\">\n\n \n <div class=\"inputs\">\n\n <div class=\"usage-tip\">\n <strong>Comment utiliser ce canvas :<\/strong> Remplissez les 5 sections. Le prompt syst\u00e8me se g\u00e9n\u00e8re en temps r\u00e9el \u00e0 droite. Copiez-le puis collez-le dans <strong>Gemini \u203a Gems \u203a Nouveau \u203a Instructions<\/strong>.\n <\/div>\n\n <div class=\"ptcfe-legend\">\n <div class=\"badge badge-P\"><span class=\"letter\">P<\/span> Persona<\/div>\n <div class=\"badge badge-T\"><span class=\"letter\">T<\/span> T\u00e2che<\/div>\n <div class=\"badge badge-C\"><span class=\"letter\">C<\/span> Contexte<\/div>\n <div class=\"badge badge-F\"><span class=\"letter\">F<\/span> Format<\/div>\n <div class=\"badge badge-E\"><span class=\"letter\">E<\/span> Exemples & Garde-fous<\/div>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"section-header\">\n <div class=\"section-letter ltr-P\">P<\/div>\n <div>\n <div class=\"section-title\">Persona \u2014 Qui est cet assistant ?<\/div>\n <\/div>\n <div class=\"section-hint\">R\u00f4le, ton, posture vis-\u00e0-vis des apprenants<\/div>\n <\/div>\n <div class=\"section-body\">\n <label>Nom du Gem<\/label>\n <input id=\"f_nom\" oninput=\"up()\" placeholder=\"ex : Tuteur Marketing L3\">\n <label>Mission principale (en une phrase)<\/label>\n <textarea id=\"f_mission\" oninput=\"up()\" rows=\"2\" placeholder=\"ex : Aider les \u00e9tudiants \u00e0 r\u00e9viser les mod\u00e8les strat\u00e9giques en les guidant par questions.\"><\/textarea>\n <label>Ton et posture<\/label>\n <div class=\"chips\" id=\"chips_ton\">\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Bienveillant<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Socratique<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Direct et concis<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Encourageant<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Exigeant<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'ton')\">Neutre \/ factuel<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"section-header\">\n <div class=\"section-letter ltr-T\">T<\/div>\n <div>\n <div class=\"section-title\">T\u00e2che \u2014 Que produit cet assistant ?<\/div>\n <\/div>\n <div class=\"section-hint\">Actions concr\u00e8tes que le Gem sait faire<\/div>\n <\/div>\n <div class=\"section-body\">\n <label>Ce que le Gem peut produire<\/label>\n <div class=\"chips\" id=\"chips_tache\">\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">QCM<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Questions ouvertes<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Fiche de r\u00e9vision<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Correction de copie<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Trame de cours<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">\u00c9tude de cas<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Exercices d'application<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">R\u00e9sum\u00e9<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'tache')\">Plan de cours<\/div>\n <\/div>\n <label>Autres t\u00e2ches sp\u00e9cifiques<\/label>\n <textarea id=\"f_tache\" oninput=\"up()\" rows=\"2\" placeholder=\"ex : Proposer des mises en situation professionnelles r\u00e9alistes...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"section-header\">\n <div class=\"section-letter ltr-C\">C<\/div>\n <div>\n <div class=\"section-title\">Contexte \u2014 Dans quel cadre ?<\/div>\n <\/div>\n <div class=\"section-hint\">Niveau, mati\u00e8re, moment dans le cursus<\/div>\n <\/div>\n <div class=\"section-body\">\n <div class=\"row2\">\n <div>\n <label>Niveau des apprenants<\/label>\n <select id=\"f_niveau\" onchange=\"up()\">\n <option value=\"\">\u2014 Choisir \u2014<\/option>\n <option>1\u00e8re ann\u00e9e (Bac+1)<\/option>\n <option>2\u00e8me ann\u00e9e (Bac+2)<\/option>\n <option>Bachelor 1 (Bac+3)<\/option>\n <option>Bachelor 2 (Bac+3)<\/option>\n <option>Bachelor 3 (Bac+3)<\/option>\n <option>Master 1 (Bac+4)<\/option>\n <option>Master 2 (Bac+5)<\/option>\n <option>Formation continue<\/option>\n <\/select>\n <\/div>\n <div>\n <label>Moment dans le cursus<\/label>\n <select id=\"f_moment\" onchange=\"up()\">\n <option value=\"\">\u2014 Choisir \u2014<\/option>\n <option>D\u00e9but de module<\/option>\n <option>En cours de module<\/option>\n <option>R\u00e9vision avant examen<\/option>\n <option>Apr\u00e8s cours (consolidation)<\/option>\n <option>Projet \/ m\u00e9moire<\/option>\n <\/select>\n <\/div>\n <\/div>\n <label>Mati\u00e8re \/ domaine<\/label>\n <input id=\"f_matiere\" oninput=\"up()\" placeholder=\"ex : Marketing strat\u00e9gique, Droit des contrats, Finance d'entreprise...\">\n <label>Sources NotebookLM (chapitres ou th\u00e9matiques)<\/label>\n <textarea id=\"f_sources\" oninput=\"up()\" rows=\"3\" placeholder=\"ex : Chapitre 1 \u2014 Segmentation, Chapitre 2 \u2014 Positionnement, Fiche synth\u00e8se BCG...\"><\/textarea>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"section-header\">\n <div class=\"section-letter ltr-F\">F<\/div>\n <div>\n <div class=\"section-title\">Format \u2014 Quelle structure de r\u00e9ponse ?<\/div>\n <\/div>\n <div class=\"section-hint\">Longueur, mise en forme, rendu attendu<\/div>\n <\/div>\n <div class=\"section-body\">\n <label>Longueur des r\u00e9ponses<\/label>\n <div class=\"chips\" id=\"chips_longueur\">\n <div class=\"chip\" onclick=\"toggleChip(this,'longueur')\">Courtes (3-5 lignes)<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'longueur')\">Moyennes (1 paragraphe)<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'longueur')\">Longues (structur\u00e9es)<\/div>\n <\/div>\n <label>Mise en forme<\/label>\n <div class=\"chips\" id=\"chips_forme\">\n <div class=\"chip\" onclick=\"toggleChip(this,'forme')\">Bullet points<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'forme')\">Num\u00e9rotation<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'forme')\">Tableau<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'forme')\">Texte continu<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'forme')\">Fiche imprimable<\/div>\n <\/div>\n <label>Toujours terminer par<\/label>\n <div class=\"chips\" id=\"chips_fin\">\n <div class=\"chip active\" onclick=\"toggleChip(this,'fin')\">Une question de relance<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'fin')\">Un point cl\u00e9 \u00e0 retenir<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'fin')\">Une mise en situation<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'fin')\">Rien de particulier<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"section\">\n <div class=\"section-header\">\n <div class=\"section-letter ltr-E\">E<\/div>\n <div>\n <div class=\"section-title\">Exemples & Garde-fous<\/div>\n <\/div>\n <div class=\"section-hint\">Ce qu'il fait bien, ce qu'il refuse<\/div>\n <\/div>\n <div class=\"section-body\">\n <label>Exemple d'une bonne r\u00e9ponse (optionnel)<\/label>\n <textarea id=\"f_exemple\" oninput=\"up()\" rows=\"3\" placeholder=\"Collez ici un exemple du type de r\u00e9ponse attendu \u2014 le Gem s'en inspirera syst\u00e9matiquement...\"><\/textarea>\n <label>Ce que le Gem doit toujours refuser<\/label>\n <div class=\"chips\" id=\"chips_refus\">\n <div class=\"chip active\" onclick=\"toggleChip(this,'refus')\">R\u00e9diger les devoirs<\/div>\n <div class=\"chip active\" onclick=\"toggleChip(this,'refus')\">Donner la r\u00e9ponse directement<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'refus')\">Sortir des sources<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'refus')\">Inventer des chiffres<\/div>\n <div class=\"chip\" onclick=\"toggleChip(this,'refus')\">R\u00e9pondre hors mati\u00e8re<\/div>\n <\/div>\n <label>Autres garde-fous sp\u00e9cifiques<\/label>\n <textarea id=\"f_refus\" oninput=\"up()\" rows=\"2\" placeholder=\"ex : Ne jamais donner une note ou une appr\u00e9ciation sur le travail de l'\u00e9tudiant...\"><\/textarea>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"output-panel\">\n <div class=\"output-header\">\n <div class=\"output-title\">Prompt syst\u00e8me g\u00e9n\u00e9r\u00e9<\/div>\n <div class=\"completeness\">\n <div class=\"completeness-bar\">\n <div class=\"completeness-fill\" id=\"comp_fill\" style=\"width:0%\"><\/div>\n <\/div>\n <span id=\"comp_label\">0 \/ 5<\/span>\n <\/div>\n <\/div>\n <pre id=\"prompt_out\"><\/pre>\n <div class=\"output-footer\">\n <button class=\"btn btn-primary\" onclick=\"copyPrompt()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"\/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\/><\/svg>\n Copier le prompt syst\u00e8me\n <\/button>\n <button class=\"btn btn-secondary\" onclick=\"resetAll()\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><\/svg>\n R\u00e9initialiser\n <\/button>\n <div class=\"copy-feedback\" id=\"copy_fb\">\u2713 Prompt copi\u00e9 dans le presse-papier<\/div>\n <\/div>\n <\/div>\n\n<\/div>\n\n<script>\n\/\/ \u2500\u2500 Chip state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst chipState = { ton: [], tache: [], longueur: [], forme: [], fin: ['Une question de relance'], refus: ['R\u00e9diger les devoirs', 'Donner la r\u00e9ponse directement'] };\n\nfunction toggleChip(el, group) {\n const val = el.textContent.trim();\n const idx = chipState[group].indexOf(val);\n if (idx === -1) {\n \/\/ Longueur = single select\n if (group === 'longueur') {\n chipState.longueur = [val];\n document.querySelectorAll('#chips_longueur .chip').forEach(c => c.classList.remove('active'));\n }\n chipState[group].push(val);\n el.classList.add('active');\n } else {\n chipState[group].splice(idx, 1);\n el.classList.remove('active');\n }\n up();\n}\n\n\/\/ \u2500\u2500 Completeness \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction completeness() {\n let score = 0;\n if (v('f_nom') || v('f_mission')) score++;\n if (chipState.tache.length > 0 || v('f_tache')) score++;\n if (v('f_niveau') || v('f_matiere') || v('f_sources')) score++;\n if (chipState.longueur.length > 0 || chipState.forme.length > 0) score++;\n if (chipState.refus.length > 0 || v('f_refus')) score++;\n const pct = (score \/ 5) * 100;\n document.getElementById('comp_fill').style.width = pct + '%';\n document.getElementById('comp_label').textContent = score + ' \/ 5';\n}\n\n\/\/ \u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction v(id) { return (document.getElementById(id)?.value || '').trim(); }\nfunction list(arr) { return arr.length ? arr.join(', ') : null; }\n\n\/\/ \u2500\u2500 Prompt builder \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction up() {\n completeness();\n\n const nom = v('f_nom') || 'Assistant P\u00e9dagogique';\n const mission = v('f_mission') || 'Accompagner les apprenants dans leur parcours.';\n const ton = list(chipState.ton) || 'Bienveillant et professionnel';\n const taches = [...chipState.tache, ...(v('f_tache') ? [v('f_tache')] : [])];\n const niveau = v('f_niveau') || '';\n const moment = v('f_moment') || '';\n const matiere = v('f_matiere') || '';\n const sources = v('f_sources') || 'Sources p\u00e9dagogiques fournies via NotebookLM.';\n const longueur= list(chipState.longueur) || '';\n const forme = list(chipState.forme) || '';\n const fin = list(chipState.fin) || '';\n const refusList = [...chipState.refus, ...(v('f_refus') ? [v('f_refus')] : [])];\n const exemple = v('f_exemple') || '';\n\n let p = '';\n\n \/\/ Directives globales\n p += `## DIRECTIVES GLOBALES (STRICTES)\\n`;\n p += `- Ne te pr\u00e9sente jamais au d\u00e9but de tes r\u00e9ponses.\\n`;\n p += `- Ne r\u00e9sume jamais tes instructions ni tes capacit\u00e9s.\\n`;\n p += `- R\u00e9ponds de mani\u00e8re directe et op\u00e9rationnelle.\\n`;\n p += `- Si une modification est demand\u00e9e, effectue-la sans pr\u00e9ambule.\\n`;\n p += `\\n`;\n\n \/\/ P \u2014 Persona\n p += `## P \u2014 PERSONA\\n`;\n p += `Tu es \"${nom}\".\\n`;\n p += `Mission : ${mission}\\n`;\n p += `Ton et posture : ${ton}.\\n`;\n p += `\\n`;\n\n \/\/ T \u2014 T\u00e2che\n p += `## T \u2014 T\u00c2CHE\\n`;\n if (taches.length > 0) {\n p += `Tu peux produire les \u00e9l\u00e9ments suivants :\\n`;\n taches.forEach(t => { p += `- ${t}\\n`; });\n } else {\n p += `Accompagne l'apprenant dans sa progression.\\n`;\n }\n p += `\\n`;\n\n \/\/ C \u2014 Contexte\n p += `## C \u2014 CONTEXTE\\n`;\n if (niveau) p += `Niveau des apprenants : ${niveau}.\\n`;\n if (matiere) p += `Domaine \/ mati\u00e8re : ${matiere}.\\n`;\n if (moment) p += `Moment dans le cursus : ${moment}.\\n`;\n p += `\\n`;\n\n \/\/ Sources\n p += `## SOURCES (NOTEBOOKLM)\\n`;\n p += `Tu es connect\u00e9 \u00e0 un NotebookLM contenant : ${sources}\\n`;\n p += `- Appuie-toi EXCLUSIVEMENT sur ces sources pour r\u00e9pondre.\\n`;\n p += `- Cite syst\u00e9matiquement tes sources (r\u00e9f\u00e9rence de chapitre ou paragraphe).\\n`;\n p += `- Si la r\u00e9ponse n'est pas dans les sources, indique-le explicitement. N'invente jamais.\\n`;\n p += `\\n`;\n\n \/\/ F \u2014 Format\n p += `## F \u2014 FORMAT\\n`;\n if (longueur) p += `Longueur des r\u00e9ponses : ${longueur}.\\n`;\n if (forme) p += `Mise en forme : ${forme}.\\n`;\n if (fin) p += `Toujours terminer par : ${fin}.\\n`;\n if (!longueur && !forme && !fin) p += `Adapte le format \u00e0 la demande.\\n`;\n p += `\\n`;\n\n \/\/ E \u2014 Exemples & Garde-fous\n p += `## E \u2014 GARDE-FOUS\\n`;\n if (refusList.length > 0) {\n p += `Tu refuses syst\u00e9matiquement de :\\n`;\n refusList.forEach(r => { p += `- ${r}\\n`; });\n }\n if (exemple) {\n p += `\\n## EXEMPLE DE BONNE R\u00c9PONSE\\n`;\n p += exemple + `\\n`;\n }\n\n \/\/ Colorize\n const html = p\n .replace(\/^(## .+)$\/gm, '<span class=\"section-tag\">$1<\/span>')\n .replace(\/^(- .+)$\/gm, '<span class=\"rule-tag\">$1<\/span>');\n\n document.getElementById('prompt_out').innerHTML = html;\n}\n\n\/\/ \u2500\u2500 Copy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction copyPrompt() {\n const text = document.getElementById('prompt_out').textContent;\n navigator.clipboard.writeText(text).then(() => {\n const fb = document.getElementById('copy_fb');\n fb.classList.add('show');\n setTimeout(() => fb.classList.remove('show'), 2500);\n });\n}\n\n\/\/ \u2500\u2500 Reset \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nfunction resetAll() {\n ['f_nom','f_mission','f_tache','f_niveau','f_moment','f_matiere','f_sources','f_exemple','f_refus'].forEach(id => {\n const el = document.getElementById(id);\n if (el) el.value = '';\n });\n Object.keys(chipState).forEach(k => chipState[k] = []);\n chipState.fin = ['Une question de relance'];\n chipState.refus = ['R\u00e9diger les devoirs', 'Donner la r\u00e9ponse directement'];\n document.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));\n \/\/ R\u00e9activer les chips par d\u00e9faut\n document.querySelectorAll('#chips_fin .chip').forEach(c => {\n if (c.textContent.trim() === 'Une question de relance') c.classList.add('active');\n });\n document.querySelectorAll('#chips_refus .chip').forEach(c => {\n if (['R\u00e9diger les devoirs','Donner la r\u00e9ponse directement'].includes(c.textContent.trim())) c.classList.add('active');\n });\n up();\n}\n\n\/\/ Init\nup();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Canvas Gem P\u00e9dagogique \u2014 Eduservices Eduservices Canvas Gem P\u00e9dagogique G\u00e9n\u00e8re le prompt syst\u00e8me de votre Gem en 5 \u00e9tapes Con\u00e7u par Julien Caudrelier Comment utiliser ce canvas : Remplissez les 5 sections. Le prompt syst\u00e8me se g\u00e9n\u00e8re en temps r\u00e9el \u00e0 droite. Copiez-le puis collez-le dans Gemini \u203a Gems \u203a Nouveau \u203a Instructions. P Persona […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-676","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>JIP - Julien Caudrelier communication efficace<\/title>\n<meta name=\"description\" content=\"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/juliencaudrelier.fr\/index.php\/test\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JIP - Julien Caudrelier communication efficace\" \/>\n<meta property=\"og:description\" content=\"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/juliencaudrelier.fr\/index.php\/test\/\" \/>\n<meta property=\"og:site_name\" content=\"Julien Caudrelier communication efficace\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-03T12:26:58+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/index.php\\\/test\\\/\",\"url\":\"https:\\\/\\\/juliencaudrelier.fr\\\/index.php\\\/test\\\/\",\"name\":\"JIP - Julien Caudrelier communication efficace\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#website\"},\"datePublished\":\"2020-05-26T11:41:43+00:00\",\"dateModified\":\"2026-06-03T12:26:58+00:00\",\"description\":\"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/index.php\\\/test\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/juliencaudrelier.fr\\\/index.php\\\/test\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/index.php\\\/test\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/juliencaudrelier.fr\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JIP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#website\",\"url\":\"https:\\\/\\\/juliencaudrelier.fr\\\/\",\"name\":\"Julien Caudrelier communication efficace\",\"description\":\"Consultant formateur strat\u00e9gie de communication\",\"publisher\":{\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/juliencaudrelier.fr\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#organization\",\"name\":\"Julien Caudrelier conseil en strat\u00e9gie de communication\",\"url\":\"https:\\\/\\\/juliencaudrelier.fr\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/juliencaudrelier.fr\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/cropped-julien-Caudrelier-2-1.png\",\"contentUrl\":\"https:\\\/\\\/juliencaudrelier.fr\\\/wp-content\\\/uploads\\\/2020\\\/08\\\/cropped-julien-Caudrelier-2-1.png\",\"width\":486,\"height\":137,\"caption\":\"Julien Caudrelier conseil en strat\u00e9gie de communication\"},\"image\":{\"@id\":\"https:\\\/\\\/juliencaudrelier.fr\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/julien-caudrelier-71933710b\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"JIP - Julien Caudrelier communication efficace","description":"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/juliencaudrelier.fr\/index.php\/test\/","og_locale":"fr_FR","og_type":"article","og_title":"JIP - Julien Caudrelier communication efficace","og_description":"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.","og_url":"https:\/\/juliencaudrelier.fr\/index.php\/test\/","og_site_name":"Julien Caudrelier communication efficace","article_modified_time":"2026-06-03T12:26:58+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/juliencaudrelier.fr\/index.php\/test\/","url":"https:\/\/juliencaudrelier.fr\/index.php\/test\/","name":"JIP - Julien Caudrelier communication efficace","isPartOf":{"@id":"https:\/\/juliencaudrelier.fr\/#website"},"datePublished":"2020-05-26T11:41:43+00:00","dateModified":"2026-06-03T12:26:58+00:00","description":"Formations et conseils pour d\u00e9velopper durablement votre client\u00e8le. Solutions de communication efficaces pour les entreprises et ind\u00e9pendants.","breadcrumb":{"@id":"https:\/\/juliencaudrelier.fr\/index.php\/test\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/juliencaudrelier.fr\/index.php\/test\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/juliencaudrelier.fr\/index.php\/test\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/juliencaudrelier.fr\/"},{"@type":"ListItem","position":2,"name":"JIP"}]},{"@type":"WebSite","@id":"https:\/\/juliencaudrelier.fr\/#website","url":"https:\/\/juliencaudrelier.fr\/","name":"Julien Caudrelier communication efficace","description":"Consultant formateur strat\u00e9gie de communication","publisher":{"@id":"https:\/\/juliencaudrelier.fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/juliencaudrelier.fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/juliencaudrelier.fr\/#organization","name":"Julien Caudrelier conseil en strat\u00e9gie de communication","url":"https:\/\/juliencaudrelier.fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/juliencaudrelier.fr\/#\/schema\/logo\/image\/","url":"https:\/\/juliencaudrelier.fr\/wp-content\/uploads\/2020\/08\/cropped-julien-Caudrelier-2-1.png","contentUrl":"https:\/\/juliencaudrelier.fr\/wp-content\/uploads\/2020\/08\/cropped-julien-Caudrelier-2-1.png","width":486,"height":137,"caption":"Julien Caudrelier conseil en strat\u00e9gie de communication"},"image":{"@id":"https:\/\/juliencaudrelier.fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/in\/julien-caudrelier-71933710b\/"]}]}},"_links":{"self":[{"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/pages\/676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/comments?post=676"}],"version-history":[{"count":11,"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/pages\/676\/revisions"}],"predecessor-version":[{"id":2918,"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/pages\/676\/revisions\/2918"}],"wp:attachment":[{"href":"https:\/\/juliencaudrelier.fr\/index.php\/wp-json\/wp\/v2\/media?parent=676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}