File size: 15,113 Bytes
881c493
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
document.addEventListener('DOMContentLoaded', function() {
    const constellations = [
        {
            name: "Présence",
            description: "L'alliance se construit dans les 3 premières minutes par des signaux non-verbaux",
            cards: [
                { title: "Grand-Père Étoile", description: "Le Silence Habité - Tenir 7 secondes de silence après une émotion forte" },
                { title: "Grand-Mère Étoile", description: "La Synchronisation - Observer et ralentir progressivement sa respiration visible" },
                { title: "Père Étoile", description: "Le Triangle d'Or - Corps à 45°, buste légèrement penché, mains visibles" },
                { title: "Mère Étoile", description: "Le Regard Ancré - Regarder 3 secondes dans les yeux, puis détourner naturellement" },
                { title: "Fils Étoile", description: "L'Ancrage Sensoriel - Nommer ce qui se passe dans le corps" },
                { title: "Fille Étoile", description: "La Distance Juste - 60-120 cm en consultation, ajuster selon confort" }
            ],
            color: "bg-indigo-500"
        },
        {
            name: "Validation",
            description: "La validation émotionnelle précoce prédit 30% de l'amélioration du patient",
            cards: [
                { title: "Grand-Père Étoile", description: "Le Miroir Empathique - Nommer l'émotion observée" },
                { title: "Grand-Mère Étoile", description: "La Permission - Désactiver la culpabilité de ressentir" },
                { title: "Père Étoile", description: "L'Écho Signifiant - Répéter les mots clés du patient" },
                { title: "Mère Étoile", description: "La Normalisation - Relier l'expérience à l'universel" },
                { title: "Fils Étoile", description: "Le Paradoxe Accueilli - Valider les contradictions avec 'ET'" },
                { title: "Fille Étoile", description: "Le Bouclier Anti-Jugement - 'Il n'y a pas de bonne ou mauvaise réponse ici'" }
            ],
            color: "bg-blue-500"
        },
        {
            name: "Collaboration",
            description: "L'alliance collaborative multiplie par 2,3 l'efficacité thérapeutique",
            cards: [
                { title: "Grand-Père Étoile", description: "Le Pouvoir Partagé - 'Vous êtes l'expert de vous-même'" },
                { title: "Grand-Mère Étoile", description: "La Question Miracle - 'Si demain le problème a disparu...'" },
                { title: "Père Étoile", description: "L'Ajustement Flexible - 'Ça vous convient comme ça ou on ajuste ?'" },
                { title: "Mère Étoile", description: "Le Petit Pas Co-Décidé - 'Quelle serait la plus petite chose...'" },
                { title: "Fils Étoile", description: "La Méta-Communication - Parler explicitement de la relation" },
                { title: "Fille Étoile", description: "L'Acceptation du Désaccord - 'On n'est pas obligés d'être d'accord'" }
            ],
            color: "bg-green-500"
        },
        {
            name: "Curiosité",
            description: "Les questions ouvertes augmentent de 38% l'engagement du patient",
            cards: [
                { title: "Grand-Père Étoile", description: "L'Exception Repérée - 'Y a-t-il eu des moments où...'" },
                { title: "Grand-Mère Étoile", description: "L'Échelle Vivante - 'Entre 0 et 10, vous êtes où ?'" },
                { title: "Père Étoile", description: "Le Concret du Flou - 'Ça ressemblerait à quoi dans votre vie ?'" },
                { title: "Mère Étoile", description: "La Question Circulaire - 'Qu'est-ce que votre femme dirait ?'" },
                { title: "Fils Étoile", description: "L'Hypothèse Libératrice - 'Et si vous pouviez...'" },
                { title: "Fille Étoile", description: "Le Minimalisme Puissant - 'Et ?' + silence" }
            ],
            color: "bg-yellow-500"
        },
        {
            name: "Réparation",
            description: "Les ruptures d'alliance réparées conduisent à de meilleurs résultats",
            cards: [
                { title: "Grand-Père Étoile", description: "Le Détecteur de Faille - Repérer micro-signaux de tension" },
                { title: "Grand-Mère Étoile", description: "L'Aveu Non-Défensif - 'Vous avez raison, j'ai peut-être été trop vite'" },
                { title: "Père Étoile", description: "L'Exploration de la Rupture - 'Qu'est-ce qui ne va pas exactement ?'" },
                { title: "Mère Étoile", description: "La Renégociation - 'Comment je pourrais être plus utile ?'" },
                { title: "Fils Étoile", description: "La Validation de la Critique - 'Je comprends votre frustration'" },
                { title: "Fille Étoile", description: "Le Lâcher-Prise Stratégique - 'Ok, on laisse tomber cette piste...'" }
            ],
            color: "bg-red-500"
        },
        {
            name: "Présence Émotionnelle",
            description: "La tolérance aux émotions fortes corrèle à 0,52 avec l'amélioration",
            cards: [
                { title: "Grand-Père Étoile", description: "Le Conteneur - Silence + présence corporelle stable" },
                { title: "Grand-Mère Étoile", description: "La Nommeuse d'Invisible - 'Ces larmes disent quelque chose...'" },
                { title: "Père Étoile", description: "Le Contre-Rythme - Ralentir face à la tempête émotionnelle" },
                { title: "Mère Étoile", description: "L'Ancrage Corporel - 'Où vous sentez cette colère ?'" },
                { title: "Fils Étoile", description: "Le Validateur de Colère - 'C'est légitime d'être en colère'" },
                { title: "Fille Étoile", description: "La Questionneuseuse Sous l'Émotion - 'Qu'est-ce qui est important ?'" }
            ],
            color: "bg-purple-500"
        },
        {
            name: "Ancrage",
            description: "La clarté des objectifs partagés prédit 41% de la rétention du patient",
            cards: [
                { title: "Grand-Père Étoile", description: "Le Tisserand de Fils - Relier les éléments de la séance" },
                { title: "Grand-Mère Étoile", description: "L'Appropriatrice - 'Qu'est-ce que VOUS retenez ?'" },
                { title: "Père Étoile", description: "Le Petit Pas Observable - 'Qu'est-ce que vous pourriez observer ?'" },
                { title: "Mère Étoile", description: "La Refléteuse de Ressources - 'Je remarque que vous avez réussi...'" },
                { title: "Fils Étoile", description: "L'Ouvreur de Porte - 'Si ça devient trop difficile...'" },
                { title: "Fille Étoile", description: "La Ponctueuse - 'On se revoit [date précise]...'" }
            ],
            color: "bg-pink-500"
        }
    ];
const container = document.querySelector('main section:nth-of-type(2)');

    // Render constellation cards
    constellations.forEach(constellation => {
        const card = document.createElement('div');
        card.className = `card relative h-64 w-48 mx-auto cursor-pointer ${constellation.color} rounded-xl shadow-xl overflow-hidden`;
        card.innerHTML = `
            <div class="card-front p-4 flex flex-col justify-between h-full">
                <div>
                    <h3 class="text-xl font-bold mb-2">${constellation.name}</h3>
                    <p class="text-sm">${constellation.description}</p>
                </div>
                <div class="text-right">
                    <span class="inline-block px-2 py-1 bg-black bg-opacity-20 rounded-full text-xs">
                        ${constellation.cards.length} cartes
                    </span>
                </div>
            </div>
            <div class="card-back p-4">
                <div class="text-center">
                    <i data-feather="star" class="w-8 h-8 mb-2 mx-auto"></i>
                    <p>Voir les cartes</p>
                </div>
            </div>
        `;
        card.addEventListener('click', () => {
            const cardDetail = document.querySelector('card-detail');
            const cardData = {
                title: constellation.name,
                family: `Famille ${constellation.name}`,
                technique: constellation.description,
                quote: getRandomQuote(constellation.name),
                research: getResearchMessage(constellation.name),
                reference: getReference(constellation.name),
                color: getComputedStyle(card).backgroundColor
            };
            cardDetail.showCard(cardData);
        });

        function getRandomQuote(family) {
            const quotes = {
                "Présence": [
                    "Le silence n'est pas un vide, c'est un espace où la parole peut naître",
                    "Quand nos respirations s'accordent, nos mondes se rejoignent",
                    "La posture parle avant les mots"
                ],
                "Validation": [
                    "Voir l'autre, c'est déjà le soigner",
                    "Toute émotion a sa place ici",
                    "Répéter, c'est dire : 'ton mot a du poids'"
                ],
                "Collaboration": [
                    "Ensemble, on sait plus qu'à deux séparés",
                    "Le thérapeute ne sait pas où aller, c'est le patient qui porte la boussole",
                    "Un petit pas accepté vaut mieux qu'un grand pas subi"
                ],
                "Curiosité": [
                    "Ce qui a marché une fois peut remarcher",
                    "Un chiffre peut raconter une histoire",
                    "Parfois, le meilleur mot est un point d'interrogation"
                ],
                "Réparation": [
                    "La rupture commence par un silence de trop",
                    "On guérit ce qu'on ose regarder ensemble",
                    "Réparer, c'est rebâtir sur des fondations honnêtes"
                ],
                "Présence Émotionnelle": [
                    "Je peux porter votre tristesse avec vous",
                    "Pleurer n'est pas être faible, c'est être vivant",
                    "Face à l'orage, je suis le roc"
                ],
                "Ancrage": [
                    "Trois fils tissés valent mieux que dix éparpillés",
                    "Ce que vous trouvez vous-même vous appartient vraiment",
                    "Observer change déjà ce qu'on observe"
                ]
            };
            const familyQuotes = quotes[family] || [];
            return familyQuotes[Math.floor(Math.random() * familyQuotes.length)] || "Citation inspirante";
        }

        function getResearchMessage(family) {
            const messages = {
                "Présence": "L'alliance se construit dans les 3 premières minutes par des signaux non-verbaux de sécurité avant même le contenu verbal.",
                "Validation": "La validation émotionnelle précoce prédit 30% de l'amélioration du patient, indépendamment de la technique utilisée.",
                "Collaboration": "L'alliance collaborative (vs directive) multiplie par 2,3 l'efficacité thérapeutique et réduit de 47% les abandons précoces.",
                "Curiosité": "Les questions ouvertes augmentent de 38% l'engagement du patient et favorisent l'insight thérapeutique vs questions fermées.",
                "Réparation": "Les ruptures d'alliance réparées conduisent à de meilleurs résultats que les alliances sans rupture. La réparation renforce le lien.",
                "Présence Émotionnelle": "La tolérance du thérapeute aux émotions fortes du patient corrèle à 0,52 avec l'amélioration symptomatique (effet fort).",
                "Ancrage": "La clarté des objectifs partagés en début et en fin de séance prédit 41% de la rétention du patient et l'observance entre les séances."
            };
            return messages[family] || "Recherche scientifique pertinente";
        }

        function getReference(family) {
            const references = {
                "Présence": "Safran & Muran (2000) Negotiating the Therapeutic Alliance",
                "Validation": "Linehan (2018) DBT Skills Training Manual + Elliott et al. (2011)",
                "Collaboration": "Tryon & Winograd (2011) Goal consensus and collaboration",
                "Curiosité": "Heritage & Maynard (2006) Communication in Medical Care",
                "Réparation": "Safran et al. (2011) Alliance ruptures and repairs",
                "Présence Émotionnelle": "Pos et al. (2009) Emotion-focused therapy",
                "Ancrage": "Bordin (1979) The generalizability of the psychoanalytic concept"
            };
            return references[family] || "Référence scientifique";
        }
container.appendChild(card);
    });
    // Download button functionality
    document.getElementById('downloadBtn').addEventListener('click', () => {
        // Create a PDF with all cards
        const pdfContent = {
            content: [
                { text: 'Jeu des 7 Constellations', style: 'header' },
                { text: '42 cartes de l\'Alliance Thérapeutique', style: 'subheader' },
                { text: '\n\n' },
                ...constellations.flatMap(constellation => [
                    { 
                        text: `Famille ${constellation.name}`,
                        style: 'familyTitle',
                        pageBreak: 'before'
                    },
                    { text: constellation.description, style: 'familyDesc' },
                    { text: '\n' },
                    {
                        ul: constellation.cards.map(card => `${card.title}: ${card.description}`)
                    },
                    { text: '\n\n' }
                ])
            ],
            styles: {
                header: {
                    fontSize: 24,
                    bold: true,
                    alignment: 'center',
                    margin: [0, 0, 0, 20]
                },
                subheader: {
                    fontSize: 18,
                    bold: true,
                    alignment: 'center',
                    margin: [0, 0, 0, 20]
                },
                familyTitle: {
                    fontSize: 20,
                    bold: true,
                    color: '#4f46e5',
                    margin: [0, 0, 0, 10]
                },
                familyDesc: {
                    fontSize: 14,
                    italics: true,
                    margin: [0, 0, 0, 10]
                }
            }
        };

        // In a real app, this would generate and download the PDF
        // For now we'll show a preview alert
        alert('PDF généré avec les 42 cartes!\n\nEn production, cela téléchargerait un PDF prêt à imprimer.');
        console.log('PDF content:', pdfContent);
    });
// Initialize feather icons
    feather.replace();
});