|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Procédure TTC Émotionnelle - TDAH</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.decision-node { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.decision-node:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
.connector-line { |
|
|
position: relative; |
|
|
height: 40px; |
|
|
width: 2px; |
|
|
background-color: #4f46e5; |
|
|
margin: 0 auto; |
|
|
} |
|
|
.connector-line::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: -4px; |
|
|
width: 10px; |
|
|
height: 10px; |
|
|
background-color: #4f46e5; |
|
|
border-radius: 50%; |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
.floating-btn { |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
|
|
<header class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-bold text-indigo-800 mb-3">Procédure TTC Émotionnelle pour le TDAH</h1> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto"> |
|
|
Une approche structurée pour gérer les émotions intenses liées au TDAH |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 mb-10"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-indigo-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-info-circle text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-3">Qu'est-ce que la procédure TTC ?</h2> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
La procédure TTC (Temps - Technique - Communication) est une méthode en trois étapes pour aider les personnes avec TDAH à réguler leurs émotions intenses. Elle combine des stratégies temporelles, des techniques de régulation émotionnelle et des compétences communicationnelles. |
|
|
</p> |
|
|
<div class="grid md:grid-cols-3 gap-4 mt-6"> |
|
|
<div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100"> |
|
|
<h3 class="font-semibold text-indigo-700 mb-2"><i class="fas fa-clock mr-2"></i>Temps</h3> |
|
|
<p class="text-gray-600 text-sm">Prendre du recul avant de réagir à une émotion intense</p> |
|
|
</div> |
|
|
<div class="bg-purple-50 p-4 rounded-lg border border-purple-100"> |
|
|
<h3 class="font-semibold text-purple-700 mb-2"><i class="fas fa-tools mr-2"></i>Technique</h3> |
|
|
<p class="text-gray-600 text-sm">Appliquer des stratégies pour réguler l'émotion</p> |
|
|
</div> |
|
|
<div class="bg-blue-50 p-4 rounded-lg border border-blue-100"> |
|
|
<h3 class="font-semibold text-blue-700 mb-2"><i class="fas fa-comments mr-2"></i>Communication</h3> |
|
|
<p class="text-gray-600 text-sm">Exprimer ses besoins de manière constructive</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-12"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Arbre de Décision Émotionnelle</h2> |
|
|
|
|
|
<div class="flex justify-center mb-8"> |
|
|
<div class="relative"> |
|
|
|
|
|
<div class="decision-node bg-red-100 border-2 border-red-200 rounded-lg p-4 w-64 mx-auto text-center cursor-pointer transition-all duration-300 hover:bg-red-50" onclick="showNext(this, 'level2')"> |
|
|
<h3 class="font-bold text-red-700 mb-2"><i class="fas fa-bolt mr-2"></i>Émotion Intense</h3> |
|
|
<p class="text-sm text-red-600">Je ressens une émotion très forte (colère, frustration, tristesse)</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="connector-line"></div> |
|
|
|
|
|
|
|
|
<div id="level2" class="hidden fade-in"> |
|
|
<div class="decision-node bg-yellow-100 border-2 border-yellow-200 rounded-lg p-4 w-64 mx-auto text-center cursor-pointer transition-all duration-300 hover:bg-yellow-50" onclick="showNext(this, 'level3')"> |
|
|
<h3 class="font-bold text-yellow-700 mb-2"><i class="fas fa-hourglass-half mr-2"></i>Prendre du Temps</h3> |
|
|
<p class="text-sm text-yellow-600">Je m'accorde un moment pour ne pas réagir impulsivement</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="connector-line"></div> |
|
|
|
|
|
|
|
|
<div id="level3" class="hidden fade-in"> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div> |
|
|
<div class="decision-node bg-green-100 border-2 border-green-200 rounded-lg p-4 mx-auto text-center cursor-pointer transition-all duration-300 hover:bg-green-50" onclick="showNext(this, 'level4a')"> |
|
|
<h3 class="font-bold text-green-700 mb-2"><i class="fas fa-brain mr-2"></i>Technique Cognitive</h3> |
|
|
<p class="text-sm text-green-600">Je questionne mes pensées automatiques</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="connector-line"></div> |
|
|
|
|
|
|
|
|
<div id="level4a" class="hidden fade-in"> |
|
|
<div class="decision-node bg-blue-100 border-2 border-blue-200 rounded-lg p-4 mx-auto text-center"> |
|
|
<h3 class="font-bold text-blue-700 mb-2"><i class="fas fa-check-circle mr-2"></i>Évaluation Réaliste</h3> |
|
|
<p class="text-sm text-blue-600">Est-ce que ma réaction est proportionnelle ? Y a-t-il une autre interprétation ?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="decision-node bg-purple-100 border-2 border-purple-200 rounded-lg p-4 mx-auto text-center cursor-pointer transition-all duration-300 hover:bg-purple-50" onclick="showNext(this, 'level4b')"> |
|
|
<h3 class="font-bold text-purple-700 mb-2"><i class="fas fa-heartbeat mr-2"></i>Technique Corporelle</h3> |
|
|
<p class="text-sm text-purple-600">Je régule mon état physiologique</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="connector-line"></div> |
|
|
|
|
|
|
|
|
<div id="level4b" class="hidden fade-in"> |
|
|
<div class="decision-node bg-pink-100 border-2 border-pink-200 rounded-lg p-4 mx-auto text-center"> |
|
|
<h3 class="font-bold text-pink-700 mb-2"><i class="fas fa-wind mr-2"></i>Respiration 5-5-5</h3> |
|
|
<p class="text-sm text-pink-600">Inspirer 5s - Bloquer 5s - Expirer 5s. Répéter 5 fois.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="connector-line mt-6"></div> |
|
|
|
|
|
|
|
|
<div class="decision-node bg-indigo-100 border-2 border-indigo-200 rounded-lg p-4 w-64 mx-auto text-center mt-6"> |
|
|
<h3 class="font-bold text-indigo-700 mb-2"><i class="fas fa-comment-dots mr-2"></i>Communication</h3> |
|
|
<p class="text-sm text-indigo-600">J'exprime mon besoin avec la méthode DESC : Décrire - Exprimer - Spécifier - Conséquences</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-8"> |
|
|
<button onclick="resetTree()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-6 rounded-full transition duration-300 flex items-center mx-auto"> |
|
|
<i class="fas fa-redo mr-2"></i> Recommencer |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-xl shadow-md p-6 mb-10"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6">Démarche Complète</h2> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
|
|
|
<div class="flex items-start bg-blue-50 rounded-lg p-4"> |
|
|
<div class="bg-blue-100 text-blue-800 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">1</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-blue-700 mb-2">Identifier l'Émotion</h3> |
|
|
<p class="text-gray-600"> |
|
|
Reconnaître et nommer l'émotion intense (colère, frustration, tristesse, etc.). Utiliser une échelle de 1 à 10 pour évaluer son intensité. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start bg-purple-50 rounded-lg p-4"> |
|
|
<div class="bg-purple-100 text-purple-800 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">2</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-purple-700 mb-2">Prendre du Temps</h3> |
|
|
<p class="text-gray-600"> |
|
|
S'accorder une pause (5-15 minutes) avant de réagir. Cela peut inclure une marche courte, écouter de la musique, ou s'isoler dans un espace calme. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start bg-green-50 rounded-lg p-4"> |
|
|
<div class="bg-green-100 text-green-800 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">3</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-green-700 mb-2">Technique de Régulation</h3> |
|
|
<p class="text-gray-600 mb-2"> |
|
|
Choisir une technique adaptée : |
|
|
</p> |
|
|
<ul class="list-disc pl-5 text-gray-600 space-y-1"> |
|
|
<li><strong>Cognitive :</strong> Questionner ses pensées ("Est-ce vraiment grave ?", "Y a-t-il une autre explication ?")</li> |
|
|
<li><strong>Corporelle :</strong> Respiration 5-5-5, relaxation musculaire progressive, exercice physique</li> |
|
|
<li><strong>Sensorielle :</strong> Objet anti-stress, eau froide sur le visage, odeur apaisante</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start bg-yellow-50 rounded-lg p-4"> |
|
|
<div class="bg-yellow-100 text-yellow-800 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">4</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-yellow-700 mb-2">Communication Constructive</h3> |
|
|
<p class="text-gray-600"> |
|
|
Utiliser la méthode DESC pour exprimer ses besoins : |
|
|
</p> |
|
|
<div class="grid md:grid-cols-4 gap-3 mt-3"> |
|
|
<div class="bg-white p-2 rounded border border-yellow-200"> |
|
|
<h4 class="font-medium text-yellow-700 text-sm">Décrire</h4> |
|
|
<p class="text-xs text-gray-500">"Quand tu fais X..."</p> |
|
|
</div> |
|
|
<div class="bg-white p-2 rounded border border-yellow-200"> |
|
|
<h4 class="font-medium text-yellow-700 text-sm">Exprimer</h4> |
|
|
<p class="text-xs text-gray-500">"Je ressens Y..."</p> |
|
|
</div> |
|
|
<div class="bg-white p-2 rounded border border-yellow-200"> |
|
|
<h4 class="font-medium text-yellow-700 text-sm">Spécifier</h4> |
|
|
<p class="text-xs text-gray-500">"J'aimerais Z..."</p> |
|
|
</div> |
|
|
<div class="bg-white p-2 rounded border border-yellow-200"> |
|
|
<h4 class="font-medium text-yellow-700 text-sm">Conséquences</h4> |
|
|
<p class="text-xs text-gray-500">"Ce serait bénéfique parce que..."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex items-start bg-indigo-50 rounded-lg p-4"> |
|
|
<div class="bg-indigo-100 text-indigo-800 font-bold rounded-full w-8 h-8 flex items-center justify-center mr-4 mt-1 flex-shrink-0">5</div> |
|
|
<div> |
|
|
<h3 class="font-semibold text-indigo-700 mb-2">Évaluation et Apprentissage</h3> |
|
|
<p class="text-gray-600"> |
|
|
Après la situation, évaluer ce qui a fonctionné et ce qui pourrait être amélioré. Noter les déclencheurs fréquents pour mieux les anticiper à l'avenir. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-indigo-50 rounded-xl shadow-md p-6 mb-10"> |
|
|
<h2 class="text-2xl font-semibold text-indigo-800 mb-6">Conseils Pratiques</h2> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
<div class="bg-white p-4 rounded-lg border border-indigo-100"> |
|
|
<h3 class="font-semibold text-indigo-700 mb-3 flex items-center"> |
|
|
<i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Préparation |
|
|
</h3> |
|
|
<ul class="space-y-2 text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i> |
|
|
<span>Créer une "boîte à outils" avec des techniques qui fonctionnent pour vous</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i> |
|
|
<span>Identifier à l'avance des espaces calmes où se retirer</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i> |
|
|
<span>Prévenir son entourage de cette méthode pour qu'ils comprennent vos besoins</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-4 rounded-lg border border-indigo-100"> |
|
|
<h3 class="font-semibold text-indigo-700 mb-3 flex items-center"> |
|
|
<i class="fas fa-heart mr-2 text-red-500"></i> Bienveillance |
|
|
</h3> |
|
|
<ul class="space-y-2 text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i> |
|
|
<span>Accepter que les émotions intenses font partie du TDAH</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i> |
|
|
<span>Ne pas se juger pour les échecs - chaque situation est une opportunité d'apprentissage</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i> |
|
|
<span>Célébrer les petites victoires dans la gestion émotionnelle</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="text-center bg-white rounded-xl shadow-md p-6 mb-10"> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Ressources à Télécharger</h2> |
|
|
<p class="text-gray-600 mb-6 max-w-2xl mx-auto"> |
|
|
Téléchargez ces aides-mémoire pour avoir la procédure TTC toujours à portée de main |
|
|
</p> |
|
|
<div class="grid md:grid-cols-3 gap-4 max-w-4xl mx-auto"> |
|
|
<div class="border-2 border-dashed border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition cursor-pointer"> |
|
|
<i class="fas fa-file-pdf text-red-500 text-3xl mb-3"></i> |
|
|
<h3 class="font-medium text-gray-700">Fiche Mémo TTC</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">PDF - 250Ko</p> |
|
|
</div> |
|
|
<div class="border-2 border-dashed border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition cursor-pointer"> |
|
|
<i class="fas fa-image text-blue-500 text-3xl mb-3"></i> |
|
|
<h3 class="font-medium text-gray-700">Arbre de Décision</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">JPG - 1.2Mo</p> |
|
|
</div> |
|
|
<div class="border-2 border-dashed border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition cursor-pointer"> |
|
|
<i class="fas fa-list-check text-green-500 text-3xl mb-3"></i> |
|
|
<h3 class="font-medium text-gray-700">Journal Émotionnel</h3> |
|
|
<p class="text-sm text-gray-500 mt-1">PDF - 180Ko</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="fixed bottom-6 right-6"> |
|
|
<button class="floating-btn bg-indigo-600 hover:bg-indigo-700 text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg transition duration-300 transform hover:scale-110"> |
|
|
<i class="fas fa-question text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function showNext(element, nextId) { |
|
|
|
|
|
const parent = element.parentElement; |
|
|
const siblings = parent.querySelectorAll('.decision-node'); |
|
|
siblings.forEach(sib => { |
|
|
if (sib !== element) { |
|
|
sib.classList.remove('bg-yellow-100', 'border-yellow-200'); |
|
|
sib.classList.add('bg-gray-100', 'border-gray-200'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const nextElement = document.getElementById(nextId); |
|
|
if (nextElement) { |
|
|
nextElement.classList.remove('hidden'); |
|
|
nextElement.classList.add('fade-in'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
nextElement.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
|
|
}, 300); |
|
|
} |
|
|
} |
|
|
|
|
|
function resetTree() { |
|
|
|
|
|
document.querySelectorAll('[id^="level"]').forEach(el => { |
|
|
el.classList.add('hidden'); |
|
|
el.classList.remove('fade-in'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.decision-node').forEach(node => { |
|
|
node.classList.remove('bg-gray-100', 'border-gray-200'); |
|
|
|
|
|
|
|
|
if (node.querySelector('.fa-bolt')) { |
|
|
node.classList.add('bg-red-100', 'border-red-200'); |
|
|
} else if (node.querySelector('.fa-hourglass-half')) { |
|
|
node.classList.add('bg-yellow-100', 'border-yellow-200'); |
|
|
} else if (node.querySelector('.fa-brain')) { |
|
|
node.classList.add('bg-green-100', 'border-green-200'); |
|
|
} else if (node.querySelector('.fa-heartbeat')) { |
|
|
node.classList.add('bg-purple-100', 'border-purple-200'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
window.scrollTo({ top: 0, behavior: 'smooth' }); |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MGros/tcc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
