Mon Analyse Fonctionnelle SECCA<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background: linear-gradient(135deg, #e0f2fe 0%, #f3e8ff 50%, #fce7f3 100%);\n min-height: 100vh;\n padding: 20px;\n }\n\n .container {\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .card {\n background: white;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n padding: 30px;\n margin-bottom: 20px;\n }\n\n .header {\n text-align: center;\n margin-bottom: 30px;\n }\n\n .header h1 {\n font-size: 2rem;\n background: linear-gradient(135deg, #2563eb, #9333ea);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 10px;\n }\n\n .header p {\n color: #6b7280;\n }\n\n .progress-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 30px 0;\n }\n\n .progress-step {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 14px;\n transition: all 0.3s;\n }\n\n .progress-step.completed {\n background: #10b981;\n color: white;\n }\n\n .progress-step.active {\n background: #9333ea;\n color: white;\n transform: scale(1.15);\n }\n\n .progress-step.pending {\n background: #e5e7eb;\n color: #9ca3af;\n }\n\n .progress-line {\n height: 4px;\n flex: 1;\n margin: 0 5px;\n transition: all 0.3s;\n }\n\n .progress-line.completed {\n background: #10b981;\n }\n\n .progress-line.pending {\n background: #e5e7eb;\n }\n\n .progress-label {\n text-align: center;\n margin-top: 10px;\n font-size: 14px;\n font-weight: 600;\n color: #9333ea;\n }\n\n .content-area {\n min-height: 400px;\n }\n\n .section-title {\n font-size: 1.5rem;\n font-weight: bold;\n color: #1f2937;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n }\n\n .section-title .emoji {\n font-size: 2rem;\n margin-right: 15px;\n }\n\n .section-description {\n color: #6b7280;\n margin-bottom: 20px;\n }\n\n textarea {\n width: 100%;\n padding: 15px;\n border: 2px solid #e9d5ff;\n border-radius: 12px;\n font-size: 14px;\n font-family: inherit;\n resize: vertical;\n min-height: 150px;\n transition: border 0.3s;\n }\n\n textarea:focus {\n outline: none;\n border-color: #9333ea;\n box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);\n }\n\n .emotion-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 15px;\n margin-bottom: 20px;\n }\n\n .emotion-card {\n background: #f3f4f6;\n border-radius: 12px;\n padding: 20px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s;\n border: 3px solid transparent;\n }\n\n .emotion-card:hover {\n transform: scale(1.05);\n }\n\n .emotion-card.selected {\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);\n }\n\n .emotion-card.selected.peur { background: #a855f7; border-color: #7c3aed; }\n .emotion-card.selected.joie { background: #fbbf24; border-color: #f59e0b; }\n .emotion-card.selected.tristesse { background: #3b82f6; border-color: #2563eb; }\n .emotion-card.selected.colere { background: #ef4444; border-color: #dc2626; }\n .emotion-card.selected.honte { background: #ec4899; border-color: #db2777; }\n .emotion-card.selected.degout { background: #059669; border-color: #047857; }\n .emotion-card.selected.surprise { background: #f97316; border-color: #ea580c; }\n\n .emotion-card.selected .emotion-name {\n color: white;\n }\n\n .emotion-emoji {\n font-size: 3rem;\n margin-bottom: 10px;\n }\n\n .emotion-name {\n font-weight: 600;\n color: #374151;\n }\n\n .intensity-slider {\n margin-top: 15px;\n background: white;\n padding: 15px;\n border-radius: 8px;\n border: 2px solid #e9d5ff;\n }\n\n .intensity-label {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: #6b7280;\n margin-bottom: 5px;\n }\n\n .intensity-value {\n font-weight: bold;\n color: #9333ea;\n }\n\n input[type=\"range\"] {\n width: 100%;\n height: 8px;\n border-radius: 5px;\n background: linear-gradient(to right, #9333ea 0%, #9333ea 50%, #e9d5ff 50%, #e9d5ff 100%);\n outline: none;\n -webkit-appearance: none;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #9333ea;\n cursor: pointer;\n }\n\n input[type=\"range\"]::-moz-range-thumb {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #9333ea;\n cursor: pointer;\n border: none;\n }\n\n .sensation-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 12px;\n }\n\n .sensation-item {\n background: white;\n border: 2px solid #e5e7eb;\n border-radius: 12px;\n padding: 15px;\n display: flex;\n align-items: center;\n cursor: pointer;\n transition: all 0.3s;\n }\n\n .sensation-item:hover {\n background: #f9fafb;\n }\n\n .sensation-item.selected {\n background: #9333ea;\n border-color: #9333ea;\n color: white;\n }\n\n .sensation-icon {\n font-size: 1.5rem;\n margin-right: 12px;\n }\n\n .sensation-name {\n font-weight: 500;\n }\n\n .consequence-section {\n margin-bottom: 20px;\n padding: 25px;\n border-radius: 12px;\n }\n\n .consequence-ct {\n background: #d1fae5;\n border: 2px solid #86efac;\n }\n\n .consequence-lt {\n background: #fee2e2;\n border: 2px solid #fca5a5;\n }\n\n .consequence-title {\n font-size: 1.2rem;\n font-weight: bold;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n }\n\n .consequence-ct .consequence-title {\n color: #065f46;\n }\n\n .consequence-lt .consequence-title {\n color: #991b1b;\n }\n\n .vicious-circle {\n background: linear-gradient(135deg, #faf5ff 0%, #fce7f3 100%);\n padding: 30px;\n border-radius: 20px;\n margin-bottom: 20px;\n }\n\n .circle-card {\n background: linear-gradient(135deg, #60a5fa, #3b82f6);\n padding: 25px;\n border-radius: 16px;\n margin-bottom: 15px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s;\n }\n\n .circle-card:hover {\n transform: scale(1.02);\n }\n\n .circle-card.emotions { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }\n .circle-card.cognitions { background: linear-gradient(135deg, #818cf8, #6366f1); }\n .circle-card.comportement { background: linear-gradient(135deg, #f472b6, #ec4899); }\n .circle-card.consequences { background: linear-gradient(135deg, #fb923c, #f97316); }\n\n .circle-card-title {\n color: white;\n font-weight: bold;\n font-size: 1.1rem;\n text-align: center;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .circle-card-content {\n color: white;\n font-size: 0.9rem;\n line-height: 1.6;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n .circle-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 15px;\n }\n\n .circle-subcontent {\n background: rgba(255, 255, 255, 0.2);\n padding: 15px;\n border-radius: 8px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n }\n\n .circle-subtitle {\n font-weight: bold;\n margin-bottom: 8px;\n font-size: 0.95rem;\n }\n\n .arrow {\n text-align: center;\n font-size: 2.5rem;\n color: #9333ea;\n margin: 15px 0;\n animation: bounce 2s infinite;\n }\n\n @keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n .reinforcement-box {\n border: 4px dashed #ef4444;\n background: #fef2f2;\n padding: 25px;\n border-radius: 16px;\n text-align: center;\n margin-top: 20px;\n }\n\n .reinforcement-box .emoji {\n font-size: 3rem;\n margin-bottom: 10px;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n }\n\n .reinforcement-title {\n color: #991b1b;\n font-weight: bold;\n font-size: 1.3rem;\n margin-bottom: 10px;\n }\n\n .reinforcement-text {\n color: #dc2626;\n font-size: 0.9rem;\n }\n\n .info-box {\n background: linear-gradient(135deg, #f3e8ff, #fce7f3);\n border: 2px solid #a78bfa;\n padding: 25px;\n border-radius: 12px;\n margin-top: 20px;\n }\n\n .info-title {\n color: #6b21a8;\n font-weight: bold;\n font-size: 1.1rem;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n }\n\n .info-content {\n color: #374151;\n line-height: 1.6;\n font-size: 0.9rem;\n }\n\n .navigation {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .btn {\n padding: 15px 30px;\n border: none;\n border-radius: 12px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .btn-prev {\n background: #d1d5db;\n color: #374151;\n }\n\n .btn-prev:hover:not(:disabled) {\n background: #9ca3af;\n }\n\n .btn-next {\n background: linear-gradient(135deg, #9333ea, #ec4899);\n color: white;\n }\n\n .btn-next:hover:not(:disabled) {\n box-shadow: 0 5px 15px rgba(147, 51, 234, 0.4);\n }\n\n .btn-reset {\n background: #fee2e2;\n color: #dc2626;\n }\n\n .btn-reset:hover {\n background: #fca5a5;\n }\n\n .btn-print {\n background: linear-gradient(135deg, #10b981, #059669);\n color: white;\n margin-bottom: 20px;\n }\n\n .btn-print:hover {\n box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);\n }\n\n .hidden {\n display: none;\n }\n\n @media print {\n body {\n background: white;\n padding: 0;\n }\n\n .print-hide {\n display: none !important;\n }\n\n .vicious-circle {\n background: white;\n }\n\n .arrow {\n animation: none;\n }\n\n .circle-card:hover {\n transform: none;\n }\n }\n\n @media (max-width: 768px) {\n .emotion-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .circle-grid {\n grid-template-columns: 1fr;\n }\n\n .navigation {\n flex-direction: column;\n gap: 10px;\n }\n\n .btn {\n width: 100%;\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <div class=\"card print-hide\" id=\"header\">\n <div class=\"header\">\n <h1>Mon Analyse Fonctionnelle<\/h1>\n <p>Mod\u00e8le SECCA<\/p>\n <\/div>\n \n \n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n <div class=\"progress-label\" id=\"progressLabel\"><\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"content-area\" id=\"contentArea\"><\/div>\n <\/div>\n\n \n <div class=\"navigation print-hide\">\n <button class=\"btn btn-prev\" id=\"btnPrev\" onclick=\"previousStep()\">\n \u2190 Pr\u00e9c\u00e9dent\n <\/button>\n <button class=\"btn btn-reset\" onclick=\"resetApp()\">\n \ud83d\udd04 Recommencer\n <\/button>\n <button class=\"btn btn-next\" id=\"btnNext\" onclick=\"nextStep()\">\n Suivant \u2192\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u00c9tat de l'application\n let currentStep = 0;\n const steps = ['Situation', '\u00c9motions', 'Sensations', 'Cognitions', 'Comportement', 'Cons\u00e9quences', 'Cercle Vicieux'];\n \n const data = {\n situation: '',\n emotions: {},\n sensations: [],\n cognitions: '',\n comportement: '',\n consequencesCT: '',\n consequencesLT: ''\n };\n\n const emotions = [\n { name: 'Peur', emoji: '\ud83d\ude28', class: 'peur' },\n { name: 'Joie', emoji: '\ud83d\ude0a', class: 'joie' },\n { name: 'Tristesse', emoji: '\ud83d\ude22', class: 'tristesse' },\n { name: 'Col\u00e8re', emoji: '\ud83d\ude20', class: 'colere' },\n { name: 'Honte', emoji: '\ud83d\ude33', class: 'honte' },\n { name: 'D\u00e9go\u00fbt', emoji: '\ud83e\udd22', class: 'degout' },\n { name: 'Surprise', emoji: '\ud83d\ude32', class: 'surprise' }\n ];\n\n const sensations = [\n { name: 'C\u0153ur qui bat vite', icon: '\ud83d\udc93' },\n { name: 'Mains moites', icon: '\ud83d\udd90\ufe0f' },\n { name: 'Gorge serr\u00e9e', icon: '\ud83d\ude36' },\n { name: 'Boule au ventre', icon: '\ud83e\udec3' },\n { name: 'Tremblements', icon: '\ud83e\udee8' },\n { name: 'Tension musculaire', icon: '\ud83d\udcaa' },\n { name: 'Respiration rapide', icon: '\ud83d\udca8' },\n { name: 'Naus\u00e9es', icon: '\ud83e\udd22' },\n { name: 'Chaleur\/Rougeurs', icon: '\ud83c\udf21\ufe0f' },\n { name: 'Vertiges', icon: '\ud83d\udcab' },\n { name: 'Fatigue', icon: '\ud83d\ude34' },\n { name: 'Douleurs', icon: '\ud83e\udd15' }\n ];\n\n \/\/ Initialisation\n function init() {\n updateProgress();\n renderStep();\n }\n\n \/\/ Mise \u00e0 jour de la barre de progression\n function updateProgress() {\n const progressBar = document.getElementById('progressBar');\n const progressLabel = document.getElementById('progressLabel');\n \n let html = '';\n steps.forEach((step, index) => {\n const status = index < currentStep ? 'completed' : (index === currentStep ? 'active' : 'pending');\n const symbol = index < currentStep ? '\u2713' : (index + 1);\n \n html += `<div class=\"progress-step ${status}\">${symbol}<\/div>`;\n if (index < steps.length - 1) {\n const lineStatus = index < currentStep ? 'completed' : 'pending';\n html += `<div class=\"progress-line ${lineStatus}\"><\/div>`;\n }\n });\n \n progressBar.innerHTML = html;\n progressLabel.textContent = steps[currentStep];\n }\n\n \/\/ Rendu de l'\u00e9tape actuelle\n function renderStep() {\n const content = document.getElementById('contentArea');\n \n switch(currentStep) {\n case 0: renderSituation(content); break;\n case 1: renderEmotions(content); break;\n case 2: renderSensations(content); break;\n case 3: renderCognitions(content); break;\n case 4: renderComportement(content); break;\n case 5: renderConsequences(content); break;\n case 6: renderViciousCircle(content); break;\n }\n \n updateButtons();\n }\n\n \/\/ \u00c9tape 0 : Situation\n function renderSituation(content) {\n content.innerHTML = `\n <div class=\"section-title\">\n <span class=\"emoji\">\ud83d\udccd<\/span>\n Quelle est la situation ?\n <\/div>\n <p class=\"section-description\">D\u00e9crivez le contexte, o\u00f9 \u00e9tiez-vous, avec qui, que s'est-il pass\u00e9 ?<\/p>\n <textarea id=\"situationInput\" placeholder=\"Exemple : J'\u00e9tais au supermarch\u00e9, il y avait beaucoup de monde...\">${data.situation}<\/textarea>\n `;\n \n document.getElementById('situationInput').addEventListener('input', (e) => {\n data.situation = e.target.value;\n });\n }\n\n \/\/ \u00c9tape 1 : \u00c9motions\n function renderEmotions(content) {\n let html = `\n <div class=\"section-title\">\n <span class=\"emoji\">\ud83d\udcad<\/span>\n Quelles \u00e9motions avez-vous ressenties ?\n <\/div>\n <p class=\"section-description\">Cliquez sur les \u00e9motions et ajustez leur intensit\u00e9<\/p>\n <div class=\"emotion-grid\">\n `;\n \n emotions.forEach(emotion => {\n const isSelected = data.emotions[emotion.name] !== undefined;\n const intensity = data.emotions[emotion.name] || 5;\n \n html += `\n <div>\n <div class=\"emotion-card ${isSelected ? 'selected ' + emotion.class : ''}\" \n onclick=\"toggleEmotion('${emotion.name}', '${emotion.class}')\">\n <div class=\"emotion-emoji\">${emotion.emoji}<\/div>\n <div class=\"emotion-name\">${emotion.name}<\/div>\n <\/div>\n ${isSelected ? `\n <div class=\"intensity-slider\">\n <div class=\"intensity-label\">\n <span>Faible<\/span>\n <span class=\"intensity-value\">Intensit\u00e9: <span id=\"intensity-${emotion.name}\">${intensity}<\/span>\/10<\/span>\n <span>Forte<\/span>\n <\/div>\n <input type=\"range\" min=\"1\" max=\"10\" value=\"${intensity}\" \n onchange=\"updateIntensity('${emotion.name}', this.value)\">\n <\/div>\n ` : ''}\n <\/div>\n `;\n });\n \n html += '<\/div>';\n content.innerHTML = html;\n }\n\n function toggleEmotion(name, className) {\n if (data.emotions[name] !== undefined) {\n delete data.emotions[name];\n } else {\n data.emotions[name] = 5;\n }\n renderStep();\n }\n\n function updateIntensity(name, value) {\n data.emotions[name] = parseInt(value);\n document.getElementById(`intensity-${name}`).textContent = value;\n \n \/\/ Mettre \u00e0 jour le style du slider\n const slider = event.target;\n const percentage = (value - 1) \/ 9 * 100;\n slider.style.background = `linear-gradient(to right, #9333ea 0%, #9333ea ${percentage}%, #e9d5ff ${percentage}%, #e9d5ff 100%)`;\n }\n\n \/\/ \u00c9tape 2 : Sensations\n function renderSensations(content) {\n let html = `\n <div class=\"section-title\">\n <span class=\"emoji\">\ud83e\udec0<\/span>\n Quelles sensations physiques ?\n <\/div>\n <p class=\"section-description\">Identifiez les sensations corporelles que vous avez \u00e9prouv\u00e9es<\/p>\n <div class=\"sensation-grid\">\n `;\n \n sensations.forEach(sensation => {\n const isSelected = data.sensations.includes(sensation.name);\n html += `\n <div class=\"sensation-item ${isSelected ? 'selected' : ''}\" \n onclick=\"toggleSensation('${sensation.name}')\">\n <span class=\"sensation-icon\">${sensation.icon}<\/span>\n <span class=\"sensation-name\">${sensation.name}<\/span>\n <\/div>\n `;\n });\n \n html += '<\/div>';\n content.innerHTML = html;\n }\n\n function toggleSensation(name) {\n const index = data.sensations.indexOf(name);\n if (index > -1) {\n data.sensations.splice(index, 1);\n } else {\n data.sensations.push(name);\n }\n renderStep();\n }\n\n \/\/ \u00c9tape 3 : Cognitions\n function renderCognitions(content) {\n content.innerHTML = `\n <div class=\"section-title\">\n <span class=\"emoji\">\ud83d\udcac<\/span>\n Quelles pens\u00e9es vous ont travers\u00e9 l'esprit ?\n <\/div>\n <p class=\"section-description\">Notez les pens\u00e9es automatiques qui vous sont venues<\/p>\n <textarea id=\"cognitionsInput\" placeholder=\"Exemple : Je vais faire une crise de panique, tout le monde me regarde...\">${data.cognitions}<\/textarea>\n `;\n \n document.getElementById('cognitionsInput').addEventListener('input', (e) => {\n data.cognitions = e.target.value;\n });\n }\n\n \/\/ \u00c9tape 4 : Comportement\n function renderComportement(content) {\n content.innerHTML = `\n <div class=\"section-title\">\n <span class=\"emoji\">\ud83c\udfc3<\/span>\n Qu'avez-vous fait ?\n <\/div>\n <p class=\"section-description\">D\u00e9crivez votre comportement, vos actions ou \u00e9vitements<\/p>\n <textarea id=\"comportementInput\" placeholder=\"Exemple : J'ai quitt\u00e9 le magasin rapidement, j'ai \u00e9vit\u00e9 les all\u00e9es bond\u00e9es...\">${data.comportement}<\/textarea>\n `;\n \n document.getElementById('comportementInput').addEventListener('input', (e) => {\n data.comportement = e.target.value;\n });\n }\n\n \/\/ \u00c9tape 5 : Cons\u00e9quences\n function renderConsequences(content) {\n content.innerHTML = `\n <div class=\"section-title\">\n <span class=\"emoji\">\u26a1<\/span>\n Quelles ont \u00e9t\u00e9 les cons\u00e9quences ?\n <\/div>\n \n <div class=\"consequence-section consequence-ct\">\n <div class=\"consequence-title\">\n \u23f1\ufe0f \u00c0 court terme\n <\/div>\n <p class=\"section-description\">Qu'est-ce que cela vous a apport\u00e9 imm\u00e9diatement ?<\/p>\n <textarea id=\"consequencesCTInput\" placeholder=\"Exemple : Soulagement imm\u00e9diat, diminution de l'anxi\u00e9t\u00e9...\">${data.consequencesCT}<\/textarea>\n <\/div>\n \n <div class=\"consequence-section consequence-lt\">\n <div class=\"consequence-title\">\n \ud83d\udcc5 \u00c0 long terme\n <\/div>\n <p class=\"section-description\">Quels impacts n\u00e9gatifs sur la dur\u00e9e ?<\/p>\n <textarea id=\"consequencesLTInput\" placeholder=\"Exemple : Renforcement de la peur, limitation de mes activit\u00e9s...\">${data.consequencesLT}<\/textarea>\n <\/div>\n `;\n \n document.getElementById('consequencesCTInput').addEventListener('input', (e) => {\n data.consequencesCT = e.target.value;\n });\n \n document.getElementById('consequencesLTInput').addEventListener('input', (e) => {\n data.consequencesLT = e.target.value;\n });\n }\n\n \/\/ \u00c9tape 6 : Cercle Vicieux\n function renderViciousCircle(content) {\n const emotionsList = Object.entries(data.emotions).map(([e, i]) => `\u2022 ${e} (${i}\/10)`).join('\\n') || 'Non renseign\u00e9';\n const sensationsList = data.sensations.map(s => `\u2022 ${s}`).join('\\n') || 'Non renseign\u00e9';\n \n content.innerHTML = `\n <button class=\"btn btn-print\" onclick=\"window.print()\">\n \ud83d\udda8\ufe0f Imprimer en PDF\n <\/button>\n \n <div class=\"vicious-circle\">\n <div class=\"circle-card\">\n <div class=\"circle-card-title\">\ud83d\udccd SITUATION<\/div>\n <div class=\"circle-card-content\">${data.situation || 'Non renseign\u00e9'}<\/div>\n <\/div>\n \n <div class=\"arrow\">\u2193<\/div>\n \n <div class=\"circle-card emotions\">\n <div class=\"circle-card-title\">\ud83d\udcad \u00c9MOTIONS & SENSATIONS<\/div>\n <div class=\"circle-grid\">\n <div class=\"circle-subcontent\">\n <div class=\"circle-subtitle\">\u00c9motions :<\/div>\n <div class=\"circle-card-content\">${emotionsList}<\/div>\n <\/div>\n <div class=\"circle-subcontent\">\n <div class=\"circle-subtitle\">Sensations :<\/div>\n <div class=\"circle-card-content\">${sensationsList}<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"arrow\">\u2193<\/div>\n \n <div class=\"circle-card cognitions\">\n <div class=\"circle-card-title\">\ud83d\udcac PENS\u00c9ES<\/div>\n <div class=\"circle-card-content\">${data.cognitions || 'Non renseign\u00e9'}<\/div>\n <\/div>\n \n <div class=\"arrow\">\u2193<\/div>\n \n <div class=\"circle-card comportement\">\n <div class=\"circle-card-title\">\ud83c\udfc3 COMPORTEMENT<\/div>\n <div class=\"circle-card-content\">${data.comportement || 'Non renseign\u00e9'}<\/div>\n <\/div>\n \n <div class=\"arrow\">\u2193<\/div>\n \n <div class=\"circle-card consequences\">\n <div class=\"circle-card-title\">\u26a1 CONS\u00c9QUENCES<\/div>\n <div class=\"circle-grid\">\n <div class=\"circle-subcontent\">\n <div class=\"circle-subtitle\">\u2705 Court terme<\/div>\n <div class=\"circle-card-content\">${data.consequencesCT || 'Non renseign\u00e9'}<\/div>\n <\/div>\n <div class=\"circle-subcontent\">\n <div class=\"circle-subtitle\">\u274c Long terme<\/div>\n <div class=\"circle-card-content\">${data.consequencesLT || 'Non renseign\u00e9'}<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"reinforcement-box\">\n <div class=\"emoji\">\ud83d\udd04<\/div>\n <div class=\"reinforcement-title\">LE CERCLE SE RENFORCE !<\/div>\n <div class=\"reinforcement-text\">\n Les cons\u00e9quences \u00e0 long terme maintiennent et renforcent la situation initiale...\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"info-box\">\n <div class=\"info-title\">\ud83d\udca1 Comprendre votre cercle vicieux<\/div>\n <div class=\"info-content\">\n Votre comportement d'\u00e9vitement vous soulage <strong style=\"color: #059669;\">\u00e0 court terme<\/strong> mais \n renforce <strong style=\"color: #dc2626;\">\u00e0 long terme<\/strong> vos peurs et maintient le probl\u00e8me. \n C'est ce qu'on appelle le <strong>cercle vicieux<\/strong>. L'objectif de la th\u00e9rapie \n est de briser ce cercle en modifiant progressivement vos comportements.\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ Navigation\n function previousStep() {\n if (currentStep > 0) {\n currentStep--;\n updateProgress();\n renderStep();\n }\n }\n\n function nextStep() {\n if (currentStep < steps.length - 1) {\n currentStep++;\n updateProgress();\n renderStep();\n }\n }\n\n function updateButtons() {\n document.getElementById('btnPrev').disabled = currentStep === 0;\n document.getElementById('btnNext').disabled = currentStep === steps.length - 1;\n }\n\n function resetApp() {\n if (confirm('\u00cates-vous s\u00fbr de vouloir recommencer ? Toutes vos donn\u00e9es seront perdues.')) {\n currentStep = 0;\n data.situation = '';\n data.emotions = {};\n data.sensations = [];\n data.cognitions = '';\n data.comportement = '';\n data.consequencesCT = '';\n data.consequencesLT = '';\n updateProgress();\n renderStep();\n }\n }\n\n \/\/ D\u00e9marrage\n window.onload = init;\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mon Analyse Fonctionnelle SECCA Mon Analyse Fonctionnelle Mod\u00e8le SECCA \u2190 Pr\u00e9c\u00e9dent \ud83d\udd04 Recommencer Suivant \u2192<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-5096","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages\/5096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/comments?post=5096"}],"version-history":[{"count":0,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages\/5096\/revisions"}],"wp:attachment":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/media?parent=5096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5096,"date":"2025-10-10T21:18:02","date_gmt":"2025-10-10T19:18:02","guid":{"rendered":"https:\/\/iacca.net\/?page_id=5096"},"modified":"2025-10-10T21:19:54","modified_gmt":"2025-10-10T19:19:54","slug":"mon-analyse-fonctionnelle","status":"publish","type":"page","link":"https:\/\/iacca.net\/index.php\/mon-analyse-fonctionnelle\/","title":{"rendered":"Mon analyse fonctionnelle"},"content":{"rendered":"\n\n\n\n \n \n Mon Analyse Fonctionnelle SECCA<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background: linear-gradient(135deg, #e0f2fe 0%, #f3e8ff 50%, #fce7f3 100%);\n min-height: 100vh;\n padding: 20px;\n }\n\n .container {\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .card {\n background: white;\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n padding: 30px;\n margin-bottom: 20px;\n }\n\n .header {\n text-align: center;\n margin-bottom: 30px;\n }\n\n .header h1 {\n font-size: 2rem;\n background: linear-gradient(135deg, #2563eb, #9333ea);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 10px;\n }\n\n .header p {\n color: #6b7280;\n }\n\n .progress-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 30px 0;\n }\n\n .progress-step {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 14px;\n transition: all 0.3s;\n }\n\n .progress-step.completed {\n background: #10b981;\n color: white;\n }\n\n .progress-step.active {\n background: #9333ea;\n color: white;\n transform: scale(1.15);\n }\n\n .progress-step.pending {\n background: #e5e7eb;\n color: #9ca3af;\n }\n\n .progress-line {\n height: 4px;\n flex: 1;\n margin: 0 5px;\n transition: all 0.3s;\n }\n\n .progress-line.completed {\n background: #10b981;\n }\n\n .progress-line.pending {\n background: #e5e7eb;\n }\n\n .progress-label {\n text-align: center;\n margin-top: 10px;\n font-size: 14px;\n font-weight: 600;\n color: #9333ea;\n }\n\n .content-area {\n min-height: 400px;\n }\n\n .section-title {\n font-size: 1.5rem;\n font-weight: bold;\n color: #1f2937;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n }\n\n .section-title .emoji {\n font-size: 2rem;\n margin-right: 15px;\n }\n\n .section-description {\n color: #6b7280;\n margin-bottom: 20px;\n }\n\n textarea {\n width: 100%;\n padding: 15px;\n border: 2px solid #e9d5ff;\n border-radius: 12px;\n font-size: 14px;\n font-family: inherit;\n resize: vertical;\n min-height: 150px;\n transition: border 0.3s;\n }\n\n textarea:focus {\n outline: none;\n border-color: #9333ea;\n box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);\n }\n\n .emotion-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 15px;\n margin-bottom: 20px;\n }\n\n .emotion-card {\n background: #f3f4f6;\n border-radius: 12px;\n padding: 20px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s;\n border: 3px solid transparent;\n }\n\n .emotion-card:hover {\n transform: scale(1.05);\n }\n\n .emotion-card.selected {\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);\n }\n\n .emotion-card.selected.peur { background: #a855f7; border-color: #7c3aed; }\n .emotion-card.selected.joie { background: #fbbf24; border-color: #f59e0b; }\n .emotion-card.selected.tristesse { background: #3b82f6; border-color: #2563eb; }\n .emotion-card.selected.colere { background: #ef4444; border-color: #dc2626; }\n .emotion-card.selected.honte { background: #ec4899; border-color: #db2777; }\n .emotion-card.selected.degout { background: #059669; border-color: #047857; }\n .emotion-card.selected.surprise { background: #f97316; border-color: #ea580c; }\n\n .emotion-card.selected .emotion-name {\n color: white;\n }\n\n .emotion-emoji {\n font-size: 3rem;\n margin-bottom: 10px;\n }\n\n .emotion-name {\n font-weight: 600;\n color: #374151;\n }\n\n .intensity-slider {\n margin-top: 15px;\n background: white;\n padding: 15px;\n border-radius: 8px;\n border: 2px solid #e9d5ff;\n }\n\n .intensity-label {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: #6b7280;\n margin-bottom: 5px;\n }\n\n .intensity-value {\n font-weight: bold;\n color: #9333ea;\n }\n\n input[type=\"range\"] {\n width: 100%;\n height: 8px;\n border-radius: 5px;\n background: linear-gradient(to right, #9333ea 0%, #9333ea 50%, #e9d5ff 50%, #e9d5ff 100%);\n outline: none;\n -webkit-appearance: none;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #9333ea;\n cursor: pointer;\n }\n\n input[type=\"range\"]::-moz-range-thumb {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #9333ea;\n cursor: pointer;\n border: none;\n }\n\n .sensation-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 12px;\n }\n\n .sensation-item {\n background: white;\n border: 2px solid #e5e7eb;\n border-radius: 12px;\n padding: 15px;\n display: flex;\n align-items: center;\n cursor: pointer;\n transition: all 0.3s;\n }\n\n .sensation-item:hover {\n background: #f9fafb;\n }\n\n .sensation-item.selected {\n background: #9333ea;\n border-color: #9333ea;\n color: white;\n }\n\n .sensation-icon {\n font-size: 1.5rem;\n margin-right: 12px;\n }\n\n .sensation-name {\n font-weight: 500;\n }\n\n .consequence-section {\n margin-bottom: 20px;\n padding: 25px;\n border-radius: 12px;\n }\n\n .consequence-ct {\n background: #d1fae5;\n border: 2px solid #86efac;\n }\n\n .consequence-lt {\n background: #fee2e2;\n border: 2px solid #fca5a5;\n }\n\n .consequence-title {\n font-size: 1.2rem;\n font-weight: bold;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n }\n\n .consequence-ct .consequence-title {\n color: #065f46;\n }\n\n .consequence-lt .consequence-title {\n color: #991b1b;\n }\n\n .vicious-circle {\n background: linear-gradient(135deg, #faf5ff 0%, #fce7f3 100%);\n padding: 30px;\n border-radius: 20px;\n margin-bottom: 20px;\n }\n\n .circle-card {\n background: linear-gradient(135deg, #60a5fa, #3b82f6);\n padding: 25px;\n border-radius: 16px;\n margin-bottom: 15px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n transition: transform 0.3s;\n }\n\n .circle-card:hover {\n transform: scale(1.02);\n }\n\n .circle-card.emotions { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }\n .circle-card.cognitions { background: linear-gradient(135deg, #818cf8, #6366f1); }\n .circle-card.comportement { background: linear-gradient(135deg, #f472b6, #ec4899); }\n .circle-card.consequences { background: linear-gradient(135deg, #fb923c, #f97316); }\n\n .circle-card-title {\n color: white;\n font-weight: bold;\n font-size: 1.1rem;\n text-align: center;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .circle-card-content {\n color: white;\n font-size: 0.9rem;\n line-height: 1.6;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n .circle-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 15px;\n }\n\n .circle-subcontent {\n background: rgba(255, 255, 255, 0.2);\n padding: 15px;\n border-radius: 8px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n }\n\n .circle-subtitle {\n font-weight: bold;\n margin-bottom: 8px;\n font-size: 0.95rem;\n }\n\n .arrow {\n text-align: center;\n font-size: 2.5rem;\n color: #9333ea;\n margin: 15px 0;\n animation: bounce 2s infinite;\n }\n\n @keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n .reinforcement-box {\n border: 4px dashed #ef4444;\n background: #fef2f2;\n padding: 25px;\n border-radius: 16px;\n text-align: center;\n margin-top: 20px;\n }\n\n .reinforcement-box .emoji {\n font-size: 3rem;\n margin-bottom: 10px;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.1); }\n }\n\n .reinforcement-title {\n color: #991b1b;\n font-weight: bold;\n font-size: 1.3rem;\n margin-bottom: 10px;\n }\n\n .reinforcement-text {\n color: #dc2626;\n font-size: 0.9rem;\n }\n\n .info-box {\n background: linear-gradient(135deg, #f3e8ff, #fce7f3);\n border: 2px solid #a78bfa;\n padding: 25px;\n border-radius: 12px;\n margin-top: 20px;\n }\n\n .info-title {\n color: #6b21a8;\n font-weight: bold;\n font-size: 1.1rem;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n }\n\n .info-content {\n color: #374151;\n line-height: 1.6;\n font-size: 0.9rem;\n }\n\n .navigation {\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .btn {\n padding: 15px 30px;\n border: none;\n border-radius: 12px;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .btn-prev {\n background: #d1d5db;\n color: #374151;\n }\n\n .btn-prev:hover:not(:disabled) {\n background: #9ca3af;\n }\n\n .btn-next {\n background: linear-gradient(135deg, #9333ea, #ec4899);\n color: white;\n }\n\n .btn-next:hover:not(:disabled) {\n box-shadow: 0 5px 15px rgba(147, 51, 234, 0.4);\n }\n\n .btn-reset {\n background: #fee2e2;\n color: #dc2626;\n }\n\n .btn-reset:hover {\n background: #fca5a5;\n }\n\n .btn-print {\n background: linear-gradient(135deg, #10b981, #059669);\n color: white;\n margin-bottom: 20px;\n }\n\n .btn-print:hover {\n box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);\n }\n\n .hidden {\n display: none;\n }\n\n @media print {\n body {\n background: white;\n padding: 0;\n }\n\n .print-hide {\n display: none !important;\n }\n\n .vicious-circle {\n background: white;\n }\n\n .arrow {\n animation: none;\n }\n\n .circle-card:hover {\n transform: none;\n }\n }\n\n @media (max-width: 768px) {\n .emotion-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .circle-grid {\n grid-template-columns: 1fr;\n }\n\n .navigation {\n flex-direction: column;\n gap: 10px;\n }\n\n .btn {\n width: 100%;\n justify-content: center;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n \n <div class=\"card print-hide\" id=\"header\">\n <div class=\"header\">\n <h1>Mon Analyse Fonctionnelle<\/h1>\n <p>Mod\u00e8le SECCA<\/p>\n <\/div>\n \n \n <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n <div class=\"progress-label\" id=\"progressLabel\"><\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"content-area\" id=\"contentArea\"><\/div>\n <\/div>\n\n \n <div class=\"navigation print-hide\">\n <button class=\"btn btn-prev\" id=\"btnPrev\" onclick=\"previousStep()\">\n \u2190 Pr\u00e9c\u00e9dent\n <\/button>\n <button class=\"btn btn-reset\" onclick=\"resetApp()\">\n \ud83d\udd04 Recommencer\n <\/button>\n <button class=\"btn btn-next\" id=\"btnNext\" onclick=\"nextStep()\">\n Suivant \u2192\n <\/button>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \u00c9tat de l'application\n let currentStep = 0;\n const steps = ['Situation', '\u00c9motions', 'Sensations', 'Cognitions', 'Comportement', 'Cons\u00e9quences', 'Cercle Vicieux'];\n \n const data = {\n situation: '',\n emotions: {},\n sensations: [],\n cognitions: '',\n comportement: '',\n consequencesCT: '',\n consequencesLT: ''\n };\n\n const emotions = [\n { name: 'Peur', emoji: '\ud83d\ude28', class: 'peur' },\n { name: 'Joie', emoji: '\ud83d\ude0a', class: 'joie' },\n { name: 'Tristesse', emoji: '\ud83d\ude22', class: 'tristesse' },\n { name: 'Col\u00e8re', emoji: '\ud83d\ude20', class: 'colere' },\n { name: 'Honte', emoji: '\ud83d\ude33', class: 'honte' },\n { name: 'D\u00e9go\u00fbt', emoji: '\ud83e\udd22', class: 'degout' },\n { name: 'Surprise', emoji: '\ud83d\ude32', class: 'surprise' }\n ];\n\n const sensations = [\n { name: 'C\u0153ur qui bat vite', icon: '\ud83d\udc93' },\n { name: 'Mains moites', icon: '\ud83d\udd90\ufe0f' },\n { name: 'Gorge serr\u00e9e', icon: '\ud83d\ude36' },\n { name: 'Boule au ventre', icon: '\ud83e\udec3' },\n { name: 'Tremblements', icon: '\ud83e\udee8' },\n { name: 'Tension musculaire', icon: '\ud83d\udcaa' },\n { name: 'Respiration rapide', icon: '\ud83d\udca8' },\n { name: 'Naus\u00e9es', icon: '\ud83e\udd22' },\n { name: 'Chaleur\/Rougeurs', icon: '\ud83c\udf21\ufe0f' },\n { name: 'Vertiges', icon: '\ud83d\udcab' },\n { name: 'Fatigue', icon: '\ud83d\ude34' },\n { name: 'Douleurs', icon: '\ud83e\udd15' }\n ];\n\n \/\/ Initialisation\n function init() {\n updateProgress();\n renderStep();\n }\n\n \/\/ Mise \u00e0 jour de la barre de progression\n function updateProgress() {\n const progressBar = document.getElementById('progressBar');\n const progressLabel = document.getElementById('progressLabel');\n \n let html = '';\n steps.forEach((step, index) => {\n const status = index < currentStep ? 'completed' : (index === currentStep ? 'active' : 'pending');\n const symbol = index < currentStep ? '\u2713' : (index + 1);\n \n html += `<div class=\"progress-step ${status}\">${symbol}<\/div>`;\n if (index < steps.length - 1) {\n const lineStatus = index < currentStep ? 'completed' : 'pending';\n html += `<div class=\"progress-line ${lineStatus}\"><\/div>`;\n }\n });\n \n progressBar.innerHTML = html;\n progressLabel.textContent = steps[currentStep];\n }\n\n \/\/ Rendu de l'\u00e9tape actuelle\n function renderStep() {\n const content = document.getElementById('contentArea');\n \n switch(currentStep) {\n case 0: renderSituation(content); break;\n case 1: renderEmotions(content); break;\n case 2: renderSensations(content); break;\n case 3: renderCognitions(content); break;\n case 4: renderComportement(content); break;\n case 5: renderConsequences(content); break;\n case 6: renderViciousCircle(content); break;\n }\n \n updateButtons();\n }\n\n \/\/ \u00c9tape 0 : Situation\n function renderSituation(content) {\n content.innerHTML = `\n <div class=\"section-title\">\n <span class=\"emoji\">\ud83d\udccd<\/span>\n Quelle est la situation ?\n <\/div>\n <p class=\"section-description\">D\u00e9crivez le contexte, o\u00f9 \u00e9tiez-vous, avec qui, que s'est-il pass\u00e9 ?<\/p>\n <textarea id=\"situationInput\" placeholder=\"Exemple : J'\u00e9tais au supermarch\u00e9, il y avait beaucoup de monde...\">${data.situation}<\/textarea>\n `;\n \n document.getElementById('situationInput').addEventListener('input', (e) => {\n data.situation = e.target.value;\n });\n }\n\n \/\/ \u00c9tape 1 : \u00c9motions\n function renderEmotions(content) {\n let html = `\n <div class=\"section-title\">\n <span class=\"emoji\">\ud83d\udcad<\/span>\n Quelles \u00e9motions avez-vous ressenties ?\n <\/div>\n <p class=\"section-description\">Cliquez sur les \u00e9motions et ajustez leur intensit\u00e9<\/p>\n <div class=\"emotion-grid\">\n `;\n \n emotions.forEach(emotion => {\n const isSelected = data.emotions[emotion.name] !== undefined;\n const intensity = data.emotions[emotion.name] || 5;\n \n html += `\n <div>\n <div class=\"emotion-card ${isSelected ? 'selected ' + emotion.class : ''}\" \n onclick=\"toggleEmotion('${emotion.name}', '${emotion.class}')\">\n <div class=\"emotion-emoji\">${emotion.emoji}<\/div>\n <div class=\"emotion-name\">${emotion.name}<\/div>\n <\/div>\n ${isSelected ? `\n <div class=\"intensity-slider\">\n <div class=\"intensity-label\">\n <span>Faible<\/span>\n <span class=\"intensity-value\">Intensit\u00e9: <span id=\"intensity-${emotion.name}\">${intensity}<\/span>\/10<\/span>\n <span>Forte<\/span>\n <\/div>\n <input type=\"range\" min=\"1\" max=\"10\" value=\"${intensity}\" \n onchange=\"updateIntensity('${emotion.name}', this.value)\">\n <\/div>\n ` : ''}\n <\/div>\n `;\n });\n \n html += '<\/div>';\n content.innerHTML = html;\n }\n\n function toggleEmotion(name, className) {\n if (data.emotions[name] !== undefined) {\n delete data.emotions[name];\n } else {\n data.emotions[name] = 5;\n }\n renderStep();\n }\n\n function updateIntensity(name, value) {\n data.emotions[name] = parseInt(value);\n document.getElementById(`intensity-${name}`).textContent = value;\n \n \/\/ Mettre \u00e0 jour le style du slider\n const slider = event.target;\n const percentage = (value - 1) \/ 9 * 100;\n slider.style.background = `linear-gradient(to right, #9333ea 0%, #9333ea ${percentage}%, #e9d5ff ${percentage}%, #e9d5ff 100%)`;\n }\n\n \/\/ \u00c9tape 2 : Sensations\n function renderSensations(content) {\n let html = `\n <div class=\"section-title\">\n <span class=\"emoji\">\ud83e\udec0<\/span>\n Quelles sensations physiques ?\n <\/div>\n <p class=\"section-description\">Identifiez les sensations corporelles que vous avez \u00e9prouv\u00e9es<\/p>\n <div class=\"sensation-grid\">\n `;\n \n sensations.forEach(sensation => {\n const isSelected = data.sensations.includes(sensation.name);\n html += `\n <div class=\"sensation-item ${isSelected ? 'selected' : ''}\" \n onclick=\"toggleSensation('${sensation.name}')\">\n <span class=\"sensation-icon\">${sensation.icon}<\/span>\n <span class=\"sensation-name\">${sensation.name}<\/span>\n <\/div>\n `;\n });\n \n html += '<\/div>';\n content.innerHTML = html;\n }\n\n function toggleSensation(name) {\n const index = data.sensations.indexOf(name);\n if (index > -1) {\n data.sensations.splice(index, 1);\n } else {\n data.sensations.push(name);\n }\n renderStep();\n }\n\n \/\/ \u00c9tape 3 : Cognitions\n function renderCognitions(content) {\n content.innerHTML = `\n <div class=\"section-title\">\n <span class=\"emoji\">\ud83d\udcac<\/span>\n Quelles pens\u00e9es vous ont travers\u00e9 l'esprit ?\n <\/div>\n <p class=\"section-description\">Notez les pens\u00e9es automatiques qui vous sont venues<\/p>\n <textarea id=\"cognitionsInput\" placeholder=\"Exemple : Je vais faire une crise de panique, tout le monde me regarde...\">${data.cognitions}<\/textarea>\n `;\n \n document.getElementById('cognitionsInput').addEventListener('input', (e) => {\n data.cognitions = e.target.value;\n });\n }\n\n \/\/ \u00c9tape 4 : Comportement\n function renderComportement(content) {\n content.innerHTML = `\n <div class=\"section-title\">\n <span class=\"emoji\">\ud83c\udfc3<\/span>\n Qu'avez-vous fait ?\n <\/div>\n <p class=\"section-description\">D\u00e9crivez votre comportement, vos actions ou \u00e9vitements<\/p>\n <textarea id=\"comportementInput\" placeholder=\"Exemple : J'ai quitt\u00e9 le magasin rapidement, j'ai \u00e9vit\u00e9 les all\u00e9es bond\u00e9es...\">${data.comportement}<\/textarea>\n `;\n \n document.getElementById('comportementInput').addEventListener('input', (e) => {\n data.comportement = e.target.value;\n });\n }\n\n \/\/ \u00c9tape 5 : Cons\u00e9quences\n function renderConsequences(content) {\n content.innerHTML = `\n <div class=\"section-title\">\n <span class=\"emoji\">\u26a1<\/span>\n Quelles ont \u00e9t\u00e9 les cons\u00e9quences ?\n <\/div>\n \n <div class=\"consequence-section consequence-ct\">\n <div class=\"consequence-title\">\n \u23f1\ufe0f \u00c0 court terme\n <\/div>\n <p class=\"section-description\">Qu'est-ce que cela vous a apport\u00e9 imm\u00e9diatement ?<\/p>\n <textarea id=\"consequencesCTInput\" placeholder=\"Exemple : Soulagement imm\u00e9diat, diminution de l'anxi\u00e9t\u00e9...\">${data.consequencesCT}<\/textarea>\n <\/div>\n \n <div class=\"consequence-section consequence-lt\">\n <div class=\"consequence-title\">\n \ud83d\udcc5 \u00c0 long terme\n <\/div>\n <p class=\"section-description\">Quels impacts n\u00e9gatifs sur la dur\u00e9e ?<\/p>\n <textarea id=\"consequencesLTInput\" placeholder=\"Exemple : Renforcement de la peur, limitation de mes activit\u00e9s...\">${data.consequencesLT}<\/textarea>\n <\/div>\n `;\n \n document.getElementById('consequencesCTInput').addEventListener('input', (e) => {\n data.consequencesCT = e.target.value;\n });\n \n document.getElementById('consequencesLTInput').addEventListener('input', (e) => {\n data.consequencesLT = e.target.value;\n });\n }\n\n \/\/ \u00c9tape 6 : Cercle Vicieux\n function renderViciousCircle(content) {\n const emotionsList = Object.entries(data.emotions).map(([e, i]) => `\u2022 ${e} (${i}\/10)`).join('\\n') || 'Non renseign\u00e9';\n const sensationsList = data.sensations.map(s => `\u2022 ${s}`).join('\\n') || 'Non renseign\u00e9';\n \n content.innerHTML = `\n <button class=\"btn btn-print\" onclick=\"window.print()\">\n \ud83d\udda8\ufe0f Imprimer en PDF\n <\/button>\n \n <div class=\"vicious-circle\">\n <div class=\"circle-card\">\n <div class=\"circle-card-title\">\ud83d\udccd SITUATION<\/div>\n <div class=\"circle-card-content\">${data.situation || 'Non renseign\u00e9'}<\/div>\n <\/div>\n \n <div class=\"arrow\">\u2193<\/div>\n \n <div class=\"circle-card emotions\">\n <div class=\"circle-card-title\">\ud83d\udcad \u00c9MOTIONS & SENSATIONS<\/div>\n <div class=\"circle-grid\">\n <div class=\"circle-subcontent\">\n <div class=\"circle-subtitle\">\u00c9motions :<\/div>\n <div class=\"circle-card-content\">${emotionsList}<\/div>\n <\/div>\n <div class=\"circle-subcontent\">\n <div class=\"circle-subtitle\">Sensations :<\/div>\n <div class=\"circle-card-content\">${sensationsList}<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"arrow\">\u2193<\/div>\n \n <div class=\"circle-card cognitions\">\n <div class=\"circle-card-title\">\ud83d\udcac PENS\u00c9ES<\/div>\n <div class=\"circle-card-content\">${data.cognitions || 'Non renseign\u00e9'}<\/div>\n <\/div>\n \n <div class=\"arrow\">\u2193<\/div>\n \n <div class=\"circle-card comportement\">\n <div class=\"circle-card-title\">\ud83c\udfc3 COMPORTEMENT<\/div>\n <div class=\"circle-card-content\">${data.comportement || 'Non renseign\u00e9'}<\/div>\n <\/div>\n \n <div class=\"arrow\">\u2193<\/div>\n \n <div class=\"circle-card consequences\">\n <div class=\"circle-card-title\">\u26a1 CONS\u00c9QUENCES<\/div>\n <div class=\"circle-grid\">\n <div class=\"circle-subcontent\">\n <div class=\"circle-subtitle\">\u2705 Court terme<\/div>\n <div class=\"circle-card-content\">${data.consequencesCT || 'Non renseign\u00e9'}<\/div>\n <\/div>\n <div class=\"circle-subcontent\">\n <div class=\"circle-subtitle\">\u274c Long terme<\/div>\n <div class=\"circle-card-content\">${data.consequencesLT || 'Non renseign\u00e9'}<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"reinforcement-box\">\n <div class=\"emoji\">\ud83d\udd04<\/div>\n <div class=\"reinforcement-title\">LE CERCLE SE RENFORCE !<\/div>\n <div class=\"reinforcement-text\">\n Les cons\u00e9quences \u00e0 long terme maintiennent et renforcent la situation initiale...\n <\/div>\n <\/div>\n <\/div>\n \n <div class=\"info-box\">\n <div class=\"info-title\">\ud83d\udca1 Comprendre votre cercle vicieux<\/div>\n <div class=\"info-content\">\n Votre comportement d'\u00e9vitement vous soulage <strong style=\"color: #059669;\">\u00e0 court terme<\/strong> mais \n renforce <strong style=\"color: #dc2626;\">\u00e0 long terme<\/strong> vos peurs et maintient le probl\u00e8me. \n C'est ce qu'on appelle le <strong>cercle vicieux<\/strong>. L'objectif de la th\u00e9rapie \n est de briser ce cercle en modifiant progressivement vos comportements.\n <\/div>\n <\/div>\n `;\n }\n\n \/\/ Navigation\n function previousStep() {\n if (currentStep > 0) {\n currentStep--;\n updateProgress();\n renderStep();\n }\n }\n\n function nextStep() {\n if (currentStep < steps.length - 1) {\n currentStep++;\n updateProgress();\n renderStep();\n }\n }\n\n function updateButtons() {\n document.getElementById('btnPrev').disabled = currentStep === 0;\n document.getElementById('btnNext').disabled = currentStep === steps.length - 1;\n }\n\n function resetApp() {\n if (confirm('\u00cates-vous s\u00fbr de vouloir recommencer ? Toutes vos donn\u00e9es seront perdues.')) {\n currentStep = 0;\n data.situation = '';\n data.emotions = {};\n data.sensations = [];\n data.cognitions = '';\n data.comportement = '';\n data.consequencesCT = '';\n data.consequencesLT = '';\n updateProgress();\n renderStep();\n }\n }\n\n \/\/ D\u00e9marrage\n window.onload = init;\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mon Analyse Fonctionnelle SECCA Mon Analyse Fonctionnelle Mod\u00e8le SECCA \u2190 Pr\u00e9c\u00e9dent \ud83d\udd04 Recommencer Suivant \u2192<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-5096","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages\/5096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/comments?post=5096"}],"version-history":[{"count":0,"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/pages\/5096\/revisions"}],"wp:attachment":[{"href":"https:\/\/iacca.net\/index.php\/wp-json\/wp\/v2\/media?parent=5096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}