<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pentagramme - Genèse de la Subjectivité</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow-x: auto;
}
.container {
position: relative;
width: 100%;
min-height: 1200px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8, #1e40af);
overflow: auto;
}
.title-section {
position: absolute;
top: 16px;
left: 16px;
z-index: 10;
max-width: 1024px;
}
.main-title {
color: white;
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 8px;
}
.subtitle {
color: white;
font-size: 1.125rem;
font-weight: 500;
margin-bottom: 16px;
opacity: 0.9;
}
.svg-container {
position: absolute;
inset: 0;
}
.info-box {
position: absolute;
top: 16px;
background: rgba(255, 255, 255, 0.9);
padding: 12px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
max-width: 300px;
transition: all 0.3s ease;
}
.info-box.with-panel {
right: 520px;
}
.info-box.without-panel {
right: 16px;
}
.info-box h3 {
font-weight: bold;
font-size: 0.875rem;
margin-bottom: 8px;
}
.info-content {
font-size: 0.75rem;
}
.info-content p {
margin-bottom: 8px;
}
.stage-item {
display: flex;
align-items: center;
margin: 4px 0;
}
.stage-color {
width: 16px;
height: 16px;
border-radius: 2px;
margin-right: 8px;
}
.info-highlight {
margin-top: 8px;
padding: 8px;
background: rgba(147, 51, 234, 0.1);
border-radius: 4px;
font-size: 0.75rem;
}
.highlight-title {
font-weight: 600;
color: #7c3aed;
}
.highlight-text {
color: #7c2d12;
margin-top: 4px;
}
.highlight-small {
color: #7c3aed;
margin-top: 4px;
font-size: 0.6875rem;
}
.tooltip {
position: fixed;
z-index: 50;
background: rgba(243, 244, 246, 0.95);
color: #374151;
padding: 12px;
border-radius: 8px;
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
pointer-events: none;
font-size: 0.875rem;
border: 1px solid #d1d5db;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
display: none;
}
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 40;
transition: opacity 0.3s ease;
backdrop-filter: blur(2px);
}
.side-panel {
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 500px;
background: white;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
z-index: 50;
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
.panel-header {
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
color: white;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.panel-title {
font-size: 1.25rem;
font-weight: bold;
}
.panel-subtitle {
font-size: 0.75rem;
opacity: 0.8;
margin-top: 4px;
}
.close-button {
background: rgba(255, 255, 255, 0.2);
color: white;
border: none;
border-radius: 50%;
padding: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.close-button:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg) scale(1.1);
}
.panel-content {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.panel-footer {
background: #f3f4f6;
padding: 16px;
border-top: 1px solid #d1d5db;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
.footer-button {
width: 100%;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 1.125rem;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.footer-button:hover {
background: linear-gradient(90deg, #1d4ed8, #1e40af);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.footer-info {
display: flex;
justify-content: center;
gap: 16px;
font-size: 0.75rem;
color: #6b7280;
margin-top: 12px;
}
.kbd {
padding: 2px 8px;
background: #e5e7eb;
border-radius: 4px;
}
.signature {
position: absolute;
right: 16px;
top: 1120px;
color: white;
font-size: 0.875rem;
}
.cursor-pointer {
cursor: pointer;
}
.transition-all {
transition: all 0.2s ease;
}
/* Styles pour le contenu détaillé */
.detail-container {
width: 100%;
height: 100%;
background: white;
color: #111827;
}
.detail-content {
padding: 16px;
display: flex;
flex-direction: column;
gap: 16px;
}
.detail-header {
text-align: center;
padding-bottom: 12px;
border-bottom: 4px solid;
border-radius: 8px;
padding: 16px;
}
.detail-title {
font-weight: bold;
font-size: 1.875rem;
margin-bottom: 8px;
}
.detail-period {
font-size: 0.875rem;
color: #374151;
font-style: italic;
background: white;
padding: 8px;
border-radius: 4px;
}
.detail-mechanism {
font-size: 1.125rem;
font-weight: 600;
margin-top: 8px;
padding: 8px;
background: white;
border-radius: 4px;
}
.dynamic-section {
padding: 16px;
border-radius: 8px;
border: 2px solid;
}
.dynamic-title {
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 12px;
}
.dynamic-content {
font-size: 0.875rem;
background: white;
padding: 12px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-left: 5px solid;
}
.maturation-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 12px;
}
@media (min-width: 768px) {
.maturation-grid {
grid-template-columns: 1fr 1fr;
}
}
.maturation-success {
background: #f0fdf4;
padding: 12px;
border-radius: 4px;
border-left: 4px solid #22c55e;
}
.maturation-failure {
background: #fef2f2;
padding: 12px;
border-radius: 4px;
border-left: 4px solid #ef4444;
}
.maturation-label {
font-weight: 600;
margin-bottom: 4px;
}
.maturation-text {
font-size: 0.75rem;
}
.evolution-section {
padding: 16px;
border-radius: 8px;
border: 1px solid #fbbf24;
}
.evolution-title {
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 12px;
color: #d97706;
}
.evolution-content {
display: flex;
flex-direction: column;
gap: 12px;
}
.evolution-item {
background: white;
padding: 12px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.evolution-label {
font-weight: 600;
margin-bottom: 4px;
}
.evolution-text {
font-size: 0.875rem;
}
.whitmont-quote {
background: #eff6ff;
padding: 12px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.henry-quote {
background: #faf5ff;
padding: 12px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.quote-label {
font-weight: 600;
margin-bottom: 4px;
}
.quote-text {
font-size: 0.875rem;
font-style: italic;
}
.final-note {
text-align: center;
padding-top: 12px;
border-top: 2px solid;
border-radius: 8px;
padding: 8px;
font-size: 0.75rem;
}
.note-title {
font-weight: 600;
}
.note-subtitle {
color: #6b7280;
margin-top: 4px;
}
.circle-element {
cursor: pointer;
transition: all 0.2s ease;
}
.click-indicator {
stroke-dasharray: 5,5;
opacity: 0.6;
}
.click-text {
filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
}
</style>
<div class="container" id="container">
<!-- Titre -->
<div class="title-section">
<h1 class="main-title">Pentagramme - Genèse de la Subjectivité</h1>
<h2 class="subtitle">Les 5 stades psychanalytiques selon Françoise Henry et Edward Whitmont</h2>
</div>
<!-- SVG principal -->
<svg width="100%" height="1200" class="svg-container" viewBox="0 0 1024 1200" id="mainSvg">
<defs>
<radialGradient id="centralGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffd700" stop-opacity="0.8" />
<stop offset="50%" stop-color="#ffa500" stop-opacity="0.6" />
<stop offset="100%" stop-color="#ff6347" stop-opacity="0.4" />
</radialGradient>
<marker id="arrowhead-pentagram" markerWidth="10" markerHeight="10" refX="5" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#8b0000" />
</marker>
</defs>
<!-- Grand cercle central -->
<circle cx="512" cy="530" r="300" fill="url(#centralGradient)" stroke="#8b0000" stroke-width="5" opacity="0.9" />
<!-- Lignes du pentagramme -->
<g id="pentagramLines"></g>
<!-- Zones des 5 pôles -->
<g id="poleCircles"></g>
</svg>
<!-- Info box -->
<div class="info-box without-panel" id="infoBox">
<h3>Genèse de la Subjectivité</h3>
<div class="info-content">
<p>Les 5 stades psychanalytiques selon Françoise Henry et Whitmont.</p>
<div id="stagesList"></div>
<div class="info-highlight">
<div class="highlight-title">🧠 Analyse psychanalytique exhaustive</div>
<div class="highlight-text">Cliquez sur les cercles pour les détails complets</div>
<div class="highlight-small">🔗 Correspondances homéopathiques intégrées</div>
</div>
</div>
</div>
<!-- Tooltip -->
<div id="tooltip" class="tooltip"></div>
<!-- Signature -->
<div class="signature">
Docteur Jean-Yves HENRY - Françoise Henry & Edward Whitmont
</div>
</div>
<!-- Overlay et panneau latéral -->
<div id="overlay" class="overlay" style="display: none;"></div>
<div id="sidePanel" class="side-panel" style="display: none;">
<div class="panel-header">
<div>
<h2 class="panel-title">Genèse de la Subjectivité</h2>
<p class="panel-subtitle">Cliquez sur la croix, l'overlay ou appuyez sur Esc pour fermer</p>
</div>
<button class="close-button" id="closeButton">
<svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="panel-content" id="panelContent"></div>
<div class="panel-footer">
<button class="footer-button" id="footerCloseButton">
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Fermer cette fenêtre
</button>
<div class="footer-info">
<span><span class="kbd">Esc</span> pour fermer</span>
<span>•</span>
<span>Cliquez sur l'arrière-plan pour fermer</span>
</div>
</div>
</div>
<script>
// État global
let hoveredElement = null;
let showDetailedInfo = false;
let tooltip = { visible: false, x: 0, y: 0, content: '' };
// Position centrale du pentagramme
const centerX = 512;
const centerY = 530;
const radius = 240;
// Calcul des positions des 5 pôles
const polePositions = {
FEU: { x: centerX, y: centerY - radius },
TERRE: { x: centerX + radius _Math.cos(18_ Math.PI / 180), y: centerY - radius _Math.sin(18_ Math.PI / 180) },
METAL: { x: centerX + radius _Math.cos(-54_ Math.PI / 180), y: centerY - radius _Math.sin(-54_ Math.PI / 180) },
EAU: { x: centerX - radius _Math.cos(-54_ Math.PI / 180), y: centerY - radius _Math.sin(-54_ Math.PI / 180) },
BOIS: { x: centerX - radius _Math.cos(18_ Math.PI / 180), y: centerY - radius _Math.sin(18_ Math.PI / 180) }
};
// Données de la genèse de la subjectivité
const geneseSubjectivite = {
METAL: {
stade: 'NARCISSISME PRIMAIRE',
sous_titre: 'Indifférenciation • Fusion',
mots_cles: 'Créateur du monde, Tout-puissance',
periode: '0-18 mois',
couleur: '#87CEEB',
description_exhaustive: {
titre: 'NARCISSISME PRIMAIRE - Diathèse Tuberculinique',
periode_developpement: '0-18 mois (fusion symbiotique)',
mecanisme_central: 'INDIFFÉRENCIATION vs DIFFÉRENCIATION',
dynamique_fondamentale: 'L\'enfant vit dans l\'illusion de toute-puissance : "Je suis le créateur du monde". Phase fusionnelle où l\'enfant se rapporte tout à lui-même, tout-puissant, créateur du monde, seul pourvoyeur de sa satisfaction : "tout, tout de suite, tout seul, tout ensemble !" selon Phosphorus. Rapporter à soi tout ce qui arrive, se voir comme on a été vu. Découvrir le monde ! Importance du rapport "illusions positives/illusions négatives" dont dépendra sa confiance en lui et dans le monde.',
enjeux_maturatifs: {
reussite: 'Confiance de base, rapport "illusions positives/illusions négatives" favorable, capacité de créer et d\'innover, optimisme fondamental',
echec: 'Narcissisme pathologique, dépendance affective, recherche constante d\'admiration, ou à l\'inverse : méfiance, pessimisme, isolement'
},
evolution_favorable: 'Créativité authentique, générosité vraie, capacité d\'innover, charisme naturel, intuition développée, leadership inspirant',
selon_whitmont: 'Stade fondateur où se joue la confiance de base en la vie. Le narcissisme primaire bien intégré devient la source de la créativité et de l\'innovation.',
selon_f_henry: 'Correspondance parfaite avec le Tuberculinisme : l\'hypersensibilité et l\'idéalisation compensent la blessure narcissique primaire.'
}
},
BOIS: {
stade: 'ORALITÉ + ANALITÉ',
sous_titre: 'Psore • Incorporation/Maîtrise',
mots_cles: 'Objet, Don/Perte, Bâton fécal',
periode: '3 mois - 2 ans',
couleur: '#90EE90',
description_exhaustive: {
titre: 'STADES ORAL + ANAL - Diathèse Psorique',
periode_developpement: '3 mois - 2 ans (de l\'objet au contrôle)',
mecanisme_central: 'INCORPORATION/MAÎTRISE vs REJET/PERTE',
dynamique_fondamentale: 'Fusion de deux problématiques psoriques : \n\n**ORALITÉ (3-18 mois)** : L\'enfant découvre l\'altérité et l\'ambivalence (amour-haine, dépendance-indépendance). Il tente de combler un déficit d\'être par plus d\'avoir. Idéal = "le sein maternel". La capacité à s\'illusionner est reportée sur des "objets transitionnels" (jeux, romans, cinémas, animal de compagnie...), mais si je prends, c\'est que j\'enlève à quelqu\'un... d\'où une certaine culpabilité !\n\n**ANALITÉ (9 mois - 2 ans)** : Le "bâton fécal" symbolise la problématique de toute-puissance liée à la maîtrise du corps et la difficulté à gérer le don et la perte.',
enjeux_maturatifs: {
reussite: 'Capacité de discriminer, gestion des frustrations, apprentissage de l\'autonomie, relation équilibrée à l\'objet',
echec: 'Dépendance pathologique aux objets, alternance fusion/rejet, culpabilité permanente, troubles de l\'attachement'
},
evolution_favorable: 'Générosité authentique, capacité de recevoir sans honte, optimisme réaliste, indépendance dans l\'interdépendance, créativité nourricière',
selon_whitmont: 'Stade fondateur de la capacité d\'amour. Une oralité bien intégrée devient la source de l\'empathie, de la générosité créatrice et de la foi en la vie.',
selon_f_henry: 'Correspondance avec la sycose : l\'hypertrophie des tissus (verrues, polypes) exprime la compensation de la carence affective primordiale.'
}
},
TERRE: {
stade: 'ŒDIPE/ADAPTATION',
sous_titre: 'Triangulation • Maturité',
mots_cles: 'Tiers social, Refoulement, S\'adapter',
periode: '4e année - Adulte',
couleur: '#FFD700',
description_exhaustive: {
titre: 'STADE ŒDIPIEN/ADAPTATION - Structuration sociale',
periode_developpement: '4e année à l\'âge adulte (intégration sociale)',
mecanisme_central: 'TRIANGULATION vs PASSAGE À L\'ACTE',
dynamique_fondamentale: 'L\'Œdipe signe la fin du développement des stades pulsionnels. Il structure la triangulation : Moi, l\'Autre et le Tiers social. La mise en place du "Sur-moi post-Œdipien" fait que l\'enfant comprend que tout n\'est pas possible (donc "rendre interdit" ce qui est impossible, car l\'interdit "ouvre"). Le refoulement autorisera l\'autonomie : capacité de discriminer, de gérer ses frustrations, permet d\'être socialisé.',
enjeux_maturatifs: {
reussite: 'Autonomie véritable, capacité de donner sans perdre, maîtrise souple du corps, respect des limites',
echec: 'Échec du refoulement, passages à l\'acte, troubles de la discrimination, évolution vers délire et psychoses'
},
evolution_favorable: 'Autonomie créative, adaptation permanente, socialisation harmonieuse, capacité de transformation sans destruction, maturité relationnelle',
selon_whitmont: 'Stade d\'accomplissement de l\'individuation où la triangulation œdipienne permet l\'adaptation créative au monde social sans perte d\'authenticité personnelle.',
selon_f_henry: 'L\'Œdipe réussi structure la capacité d\'adaptation permanente. Une diathèse qui s\'exprime est une diathèse désadaptée où le refoulement est insuffisant.'
}
},
FEU: {
stade: 'ADOLESCENCE/3E ÂGE',
sous_titre: 'Remaniements • Crises',
mots_cles: 'Hormones, Identité, Désinvestissement',
periode: 'Adolescence + 3e âge',
couleur: '#FF6B6B',
description_exhaustive: {
titre: 'ADOLESCENCE/3E ÂGE - Crises de remaniement identitaire',
periode_developpement: 'Adolescence et 3e âge (nouvelles épreuves de réalité)',
mecanisme_central: 'PÉRENNISATION vs ADAPTATION',
dynamique_fondamentale: '**ADOLESCENCE** : Sous l\'influence de l\'imprégnation hormonale, la poussée sexuelle va "redistribuer les cartes" : identité remise en cause car l\'image de soi est négative. **ARCHÉTYPES DE LA PÉRENNISATION** : comportements infantiles qui persistent à l\'âge adulte selon les stades non intégrés.\n\n**3E ÂGE** : Nouvelle épreuve de réalité, souffrance existentielle avec désinvestissement narcissique et pulsionnel progressif.',
enjeux_maturatifs: {
reussite: 'Intégration harmonieuse des stades antérieurs, adaptation créative permanente, maturité sans rigidité, wisdom intégrée',
echec: 'Pérennisation des fixations infantiles, passages à l\'acte, réactivation des traumatismes anciens, désadaptation chronique'
},
evolution_favorable: 'Intégration harmonieuse de tous les stades, wisdom créative, adaptation permanente sans rigidité, transmission intergénérationnelle',
selon_whitmont: 'Stade de synthèse où tous les acquis antérieurs peuvent soit se cristalliser pathologiquement, soit s\'intégrer en une sagesse créative adaptée aux défis existentiels.',
selon_f_henry: 'Concept fondamental des archétypes de pérennisation : les comportements infantiles non intégrés persistent et se réactivent lors des crises.'
}
},
EAU: {
stade: 'PHALLIQUE',
sous_titre: 'Pouvoir • Reconnaissance',
mots_cles: 'Zizi/Zézette, Phallus, Tout ou rien',
periode: '3e année',
couleur: '#9370DB',
description_exhaustive: {
titre: 'STADE PHALLIQUE - Diathèse Luétique',
periode_developpement: '3e année (fantasme de puissance)',
mecanisme_central: 'TOUT OU RIEN - PERFORMANCE vs CASTRATION',
dynamique_fondamentale: 'Le phallus (zizi/zézette) est l\'étape ultime de satisfaction : "j\'existe si je l\'ai (tout le temps) !". Idéal du moi = fantasme de puissance. Besoin et demande de reconnaissance permanente. "C\'est lui ou moi" = rapport à l\'autre mis en acte. Éprouver son pouvoir sur les autres pour exister... dominer le monde ou être détruit par lui.',
enjeux_maturatifs: {
reussite: 'Autonomie véritable, capacité de discrimination, gestion des frustrations, socialisation réussie, adaptation créative permanente',
echec: 'Échec du refoulement, passages à l\'acte, troubles de la discrimination, évolution vers délire et psychoses, désadaptation chronique'
},
evolution_favorable: 'Autonomie créative, adaptation permanente, socialisation harmonieuse, capacité de transformation sans destruction, maturité relationnelle',
selon_whitmont: 'Stade d\'accomplissement de l\'individuation où la triangulation œdipienne permet l\'adaptation créative au monde social sans perte d\'authenticité personnelle.',
selon_f_henry: 'L\'Œdipe réussi structure la capacité d\'adaptation permanente. Une diathèse qui s\'exprime est une diathèse désadaptée où le refoulement est insuffisant.'
}
}
};
// Fonctions utilitaires
function generatePentagramPoints() {
const points = [];
for (let i = 0; i < 5; i++) {
const angle = (i _72 - 90)_ Math.PI / 180;
points.push([
centerX + radius * Math.cos(angle),
centerY + radius * Math.sin(angle)
]);
}
return [
[points[0], points[2]],
[points[2], points[4]],
[points[4], points[1]],
[points[1], points[3]],
[points[3], points[0]]
];
}
function formatSubjectiviteTooltip(subjectivite) {
return `
<div>
<div style="font-weight: bold; font-size: 1.125rem; margin-bottom: 8px;">${subjectivite.stade}</div>
<div style="margin-bottom: 8px;"><strong>Période :</strong> ${subjectivite.periode}</div>
<div style="margin-bottom: 8px;"><strong>Mots-clés :</strong> ${subjectivite.mots_cles}</div>
<div style="margin-bottom: 8px;"><strong>Sous-titre :</strong> ${subjectivite.sous_titre}</div>
<div style="font-size: 0.75rem; color: #6b7280; margin-top: 8px;">Cliquez pour voir l'analyse exhaustive selon Françoise Henry et Whitmont</div>
</div>
`;
}
function formatSubjectiviteDetaillee(poleKey) {
const subjectivite = geneseSubjectivite[poleKey];
if (!subjectivite) return '';
const detail = subjectivite.description_exhaustive;
const couleurStade = subjectivite.couleur;
return `
<div class="detail-container">
<div class="detail-content">
<!-- En-tête -->
<div class="detail-header" style="border-color: ${couleurStade}; background-color: ${couleurStade}15;">
<div class="detail-title" style="color: ${couleurStade};">
🧠 ${detail.titre}
</div>
<div class="detail-period">
📅 Période : ${detail.periode_developpement}
</div>
<div class="detail-mechanism" style="color: ${couleurStade};">
${detail.mecanisme_central}
</div>
</div>
<!-- Dynamique fondamentale -->
<div class="dynamic-section" style="background-color: ${couleurStade}20; border-color: ${couleurStade};">
<div class="dynamic-title" style="color: ${couleurStade};">
🔑 Dynamique Fondamentale selon Françoise Henry
</div>
<div class="dynamic-content" style="border-left-color: ${couleurStade};">
${detail.dynamique_fondamentale.replace(/\n/g, '<br>')}
</div>
<div class="maturation-grid">
<div class="maturation-success">
<div class="maturation-label" style="color: #16a34a;">✅ Évolution réussie:</div>
<div class="maturation-text">${detail.enjeux_maturatifs.reussite}</div>
</div>
<div class="maturation-failure">
<div class="maturation-label" style="color: #dc2626;">❌ Échec développemental:</div>
<div class="maturation-text">${detail.enjeux_maturatifs.echec}</div>
</div>
</div>
</div>
<!-- Évolution et vision des maîtres -->
<div class="evolution-section" style="background-color: ${couleurStade}10;">
<div class="evolution-title">
🎯 Évolution et Vision des Maîtres
</div>
<div class="evolution-content">
<div class="evolution-item">
<div class="evolution-label" style="color: #d97706;">Évolution favorable :</div>
<div class="evolution-text">${detail.evolution_favorable}</div>
</div>
<div class="whitmont-quote">
<div class="quote-label" style="color: #1d4ed8;">Selon Edward Whitmont :</div>
<div class="quote-text">${detail.selon_whitmont}</div>
</div>
<div class="henry-quote">
<div class="quote-label" style="color: #7c3aed;">Selon Françoise Henry :</div>
<div class="quote-text">${detail.selon_f_henry}</div>
</div>
</div>
</div>
<!-- Note finale -->
<div class="final-note" style="border-color: ${couleurStade}; background-color: ${couleurStade}10;">
<div class="note-title" style="color: ${couleurStade};">
Synthèse Psychanalytique & Homéopathique
</div>
<div class="note-subtitle">
Françoise Henry & Edward Whitmont - Genèse de la Subjectivité
</div>
</div>
</div>
</div>
`;
}
function showTooltip(x, y, content) {
const tooltipEl = document.getElementById('tooltip');
tooltipEl.innerHTML = content;
tooltipEl.style.left = Math.min(x + 10, window.innerWidth - 600) + 'px';
tooltipEl.style.top = Math.max(y - 400, 10) + 'px';
tooltipEl.style.display = 'block';
tooltip.visible = true;
}
function hideTooltip() {
document.getElementById('tooltip').style.display = 'none';
tooltip.visible = false;
}
function openDetailPanel(poleKey) {
const content = formatSubjectiviteDetaillee(poleKey);
document.getElementById('panelContent').innerHTML = content;
document.getElementById('overlay').style.display = 'block';
document.getElementById('sidePanel').style.display = 'flex';
document.getElementById('infoBox').className = 'info-box with-panel';
showDetailedInfo = true;
hoveredElement = `subjectivite-${poleKey}`;
}
function closeDetailPanel() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('sidePanel').style.display = 'none';
document.getElementById('infoBox').className = 'info-box without-panel';
showDetailedInfo = false;
hoveredElement = null;
hideTooltip();
updateCircleStyles();
}
function updateCircleStyles() {
Object.keys(polePositions).forEach(poleKey => {
const circle = document.getElementById(`circle-${poleKey}`);
const indicator = document.getElementById(`indicator-${poleKey}`);
const clickText = document.getElementById(`clickText-${poleKey}`);
if (circle) {
const isHovered = hoveredElement === `subjectivite-${poleKey}`;
const isDetailOpen = showDetailedInfo && hoveredElement === `subjectivite-${poleKey}`;
circle.style.opacity = isHovered ? "0.95" : "0.8";
circle.style.stroke = isDetailOpen ? "#FFD700" : "#fff";
circle.style.strokeWidth = isHovered ? "4" : "3";
circle.style.filter = isHovered ? 'drop-shadow(0 0 20px rgba(255,255,255,0.8))' : 'none';
if (indicator && clickText) {
const showIndicator = !showDetailedInfo && isHovered;
indicator.style.display = showIndicator ? 'block' : 'none';
clickText.style.display = showIndicator ? 'block' : 'none';
}
}
});
}
function initializePentagram() {
const svg = document.getElementById('mainSvg');
const pentagramLines = document.getElementById('pentagramLines');
const poleCircles = document.getElementById('poleCircles');
// Générer les lignes du pentagramme
const connections = generatePentagramPoints();
connections.forEach((connection, index) => {
const midX = (connection[0][0] + connection[1][0]) / 2;
const midY = (connection[0][1] + connection[1][1]) / 2;
// Première partie de la ligne
const line1 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line1.setAttribute('x1', connection[0][0]);
line1.setAttribute('y1', connection[0][1]);
line1.setAttribute('x2', midX);
line1.setAttribute('y2', midY);
line1.setAttribute('stroke', '#8b0000');
line1.setAttribute('stroke-width', '3');
line1.setAttribute('opacity', '0.8');
pentagramLines.appendChild(line1);
// Deuxième partie avec flèche
const line2 = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line2.setAttribute('x1', midX);
line2.setAttribute('y1', midY);
line2.setAttribute('x2', connection[1][0]);
line2.setAttribute('y2', connection[1][1]);
line2.setAttribute('stroke', '#8b0000');
line2.setAttribute('stroke-width', '3');
line2.setAttribute('opacity', '0.8');
line2.setAttribute('marker-end', 'url(#arrowhead-pentagram)');
pentagramLines.appendChild(line2);
});
// Créer les cercles des pôles
Object.entries(polePositions).forEach(([poleKey, position]) => {
const subjectivite = geneseSubjectivite[poleKey];
// Groupe pour ce pôle
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
// Cercle principal
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('id', `circle-${poleKey}`);
circle.setAttribute('cx', position.x);
circle.setAttribute('cy', position.y);
circle.setAttribute('r', '100');
circle.setAttribute('fill', subjectivite.couleur);
circle.setAttribute('opacity', '0.8');
circle.setAttribute('stroke', '#fff');
circle.setAttribute('stroke-width', '3');
circle.classList.add('circle-element');
// Textes
const stadeText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
stadeText.setAttribute('x', position.x);
stadeText.setAttribute('y', position.y - 25);
stadeText.setAttribute('text-anchor', 'middle');
stadeText.setAttribute('fill', 'white');
stadeText.setAttribute('font-weight', 'bold');
stadeText.setAttribute('font-size', '14');
stadeText.textContent = subjectivite.stade;
const sousTitreText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
sousTitreText.setAttribute('x', position.x);
sousTitreText.setAttribute('y', position.y - 5);
sousTitreText.setAttribute('text-anchor', 'middle');
sousTitreText.setAttribute('fill', 'white');
sousTitreText.setAttribute('font-size', '11');
sousTitreText.textContent = subjectivite.sous_titre;
const motsClesText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
motsClesText.setAttribute('x', position.x);
motsClesText.setAttribute('y', position.y + 15);
motsClesText.setAttribute('text-anchor', 'middle');
motsClesText.setAttribute('fill', 'white');
motsClesText.setAttribute('font-size', '11');
motsClesText.textContent = subjectivite.mots_cles.length > 25 ?
subjectivite.mots_cles.substring(0, 25) + '...' : subjectivite.mots_cles;
const periodeText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
periodeText.setAttribute('x', position.x);
periodeText.setAttribute('y', position.y + 30);
periodeText.setAttribute('text-anchor', 'middle');
periodeText.setAttribute('fill', 'white');
periodeText.setAttribute('font-size', '11');
periodeText.textContent = `(${subjectivite.periode})`;
// Indicateur de clic
const indicator = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
indicator.setAttribute('id', `indicator-${poleKey}`);
indicator.setAttribute('cx', position.x);
indicator.setAttribute('cy', position.y);
indicator.setAttribute('r', '110');
indicator.setAttribute('fill', 'none');
indicator.setAttribute('stroke', '#FFD700');
indicator.setAttribute('stroke-width', '2');
indicator.classList.add('click-indicator');
indicator.style.display = 'none';
const clickText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
clickText.setAttribute('id', `clickText-${poleKey}`);
clickText.setAttribute('x', position.x);
clickText.setAttribute('y', position.y + 130);
clickText.setAttribute('text-anchor', 'middle');
clickText.setAttribute('fill', 'white');
clickText.setAttribute('font-size', '11');
clickText.setAttribute('font-weight', '600');
clickText.classList.add('click-text');
clickText.textContent = 'Cliquez pour détails';
clickText.style.display = 'none';
// Événements
circle.addEventListener('click', () => openDetailPanel(poleKey));
circle.addEventListener('mouseenter', (e) => {
hoveredElement = `subjectivite-${poleKey}`;
if (!showDetailedInfo) {
showTooltip(e.clientX, e.clientY, formatSubjectiviteTooltip(subjectivite));
}
updateCircleStyles();
});
circle.addEventListener('mouseleave', () => {
if (!showDetailedInfo) {
hoveredElement = null;
hideTooltip();
updateCircleStyles();
}
});
// Ajouter tous les éléments
group.appendChild(circle);
group.appendChild(stadeText);
group.appendChild(sousTitreText);
group.appendChild(motsClesText);
group.appendChild(periodeText);
group.appendChild(indicator);
group.appendChild(clickText);
poleCircles.appendChild(group);
});
}
function initializeInfoBox() {
const stagesList = document.getElementById('stagesList');
Object.entries(geneseSubjectivite).forEach(([poleKey, stade]) => {
const item = document.createElement('div');
item.className = 'stage-item';
const colorDiv = document.createElement('div');
colorDiv.className = 'stage-color';
colorDiv.style.backgroundColor = stade.couleur;
const text = document.createElement('span');
text.style.fontSize = '0.75rem';
text.textContent = stade.stade + ' - ' + stade.periode;
item.appendChild(colorDiv);
item.appendChild(text);
stagesList.appendChild(item);
});
}
function initializeEventListeners() {
// Gestion des clics pour fermer le panneau
document.getElementById('overlay').addEventListener('click', closeDetailPanel);
document.getElementById('closeButton').addEventListener('click', closeDetailPanel);
document.getElementById('footerCloseButton').addEventListener('click', closeDetailPanel);
// Gestion de la touche Escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && showDetailedInfo) {
closeDetailPanel();
}
});
// Gestion du mouvement de la souris pour le tooltip
document.addEventListener('mousemove', (e) => {
if (tooltip.visible) {
const tooltipEl = document.getElementById('tooltip');
tooltipEl.style.left = Math.min(e.clientX + 10, window.innerWidth - 600) + 'px';
tooltipEl.style.top = Math.max(e.clientY - 400, 10) + 'px';
}
});
}
// Initialisation
document.addEventListener('DOMContentLoaded', () => {
initializePentagram();
initializeInfoBox();
initializeEventListeners();
});
</script>
