<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pentagramme MTC-Diathèses</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #3b82f6, #1e40af, #1e3a8a);
min-height: 100vh;
position: relative;
overflow-x: auto;
}
.container {
position: relative;
width: 100%;
min-height: 1200px;
overflow: hidden;
}
.header {
position: absolute;
top: 16px;
left: 16px;
z-index: 10;
max-width: 1000px;
}
.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;
}
.tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
}
.tab {
padding: 8px 24px;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.tab.active {
background: white;
color: #2563eb;
}
.tab.inactive {
background: #1e40af;
color: white;
}
.tab.inactive:hover {
background: #2563eb;
}
.legend {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 880px;
}
.svg-container {
position: absolute;
inset: 0;
}
.info-box {
position: absolute;
top: 16px;
right: 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: 320px;
transition: all 0.3s;
}
.info-box.shifted {
right: 536px;
}
.info-box h3 {
font-weight: bold;
font-size: 0.875rem;
margin-bottom: 8px;
}
.info-box .element-item {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.color-indicator {
width: 16px;
height: 16px;
border-radius: 4px;
margin-right: 8px;
}
.info-note {
margin-top: 8px;
padding: 8px;
border-radius: 4px;
font-size: 0.75rem;
}
.info-note.mtc {
background: rgba(59, 130, 246, 0.1);
}
.info-note.diatheses {
background: rgba(251, 191, 36, 0.1);
}
.cycles-container {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 980px;
display: flex;
gap: 80px;
padding-bottom: 32px;
}
.cycle-item {
text-align: center;
cursor: pointer;
}
.cycle-svg {
width: 100px;
height: 100px;
margin-bottom: 4px;
}
.cycle-name {
color: white;
font-weight: bold;
font-size: 0.875rem;
}
.cycle-subtitle {
color: white;
font-size: 0.75rem;
}
.signature {
position: absolute;
right: 16px;
top: 1120px;
color: white;
font-size: 0.875rem;
}
.tooltip {
position: fixed;
z-index: 50;
background: rgba(243, 244, 246, 0.95);
color: #374151;
padding: 12px;
border-radius: 8px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
pointer-events: none;
font-size: 0.875rem;
border: 1px solid #d1d5db;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
display: none;
}
.tooltip.mtc {
background: rgba(239, 246, 255, 0.95);
color: #1e3a8a;
border-color: #93c5fd;
max-width: 350px;
}
.overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 40;
backdrop-filter: blur(2px);
display: none;
}
.detail-panel {
position: fixed;
right: 0;
top: 0;
height: 100vh;
width: 500px;
background: white;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
z-index: 50;
display: none;
flex-direction: column;
}
.detail-header {
background: linear-gradient(to right, #3b82f6, #2563eb);
color: white;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.detail-title {
font-size: 1.25rem;
font-weight: bold;
}
.detail-subtitle {
font-size: 0.75rem;
opacity: 0.8;
margin-top: 4px;
}
.close-btn {
background: rgba(255, 255, 255, 0.2);
color: white;
border: none;
border-radius: 50%;
padding: 12px;
cursor: pointer;
transition: all 0.2s;
}
.close-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg) scale(1.1);
}
.detail-content {
flex: 1;
overflow-y: auto;
padding: 16px;
}
.detail-footer {
background: #f3f4f6;
padding: 16px;
border-top: 1px solid #d1d5db;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
.close-footer-btn {
width: 100%;
background: linear-gradient(to right, #3b82f6, #2563eb);
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
font-size: 1.125rem;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.close-footer-btn:hover {
background: linear-gradient(to right, #2563eb, #1d4ed8);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.footer-shortcuts {
display: flex;
justify-content: center;
gap: 16px;
font-size: 0.75rem;
color: #6b7280;
margin-top: 12px;
}
.keyboard-key {
padding: 2px 8px;
background: #e5e7eb;
border-radius: 4px;
}
/* Classes pour le contenu détaillé */
.diathese-header {
text-align: center;
padding-bottom: 12px;
border-bottom: 4px solid;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.diathese-title {
font-weight: bold;
font-size: 1.875rem;
margin-bottom: 8px;
}
.concept-box {
font-size: 0.875rem;
color: #374151;
font-style: italic;
background: white;
padding: 8px;
border-radius: 4px;
}
.description-box {
font-size: 0.75rem;
color: #4b5563;
margin-top: 8px;
background: white;
padding: 8px;
border-radius: 4px;
}
.mechanism-box {
padding: 16px;
border-radius: 8px;
border: 2px solid;
margin-bottom: 16px;
}
.mechanism-title {
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 12px;
}
.mechanism-main {
font-size: 1.125rem;
font-weight: 600;
text-align: center;
padding: 12px;
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-left: 5px solid;
margin-bottom: 12px;
}
.principle-box {
font-size: 0.875rem;
background: rgba(239, 246, 255, 1);
padding: 12px;
border-radius: 4px;
margin-top: 12px;
border-left: 4px solid #3b82f6;
}
.characteristics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 12px;
}
.characteristic-item {
background: white;
padding: 8px;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.characteristic-label {
font-weight: 600;
}
/* Classes pour les sections de polychrestes */
.polychrestes-section {
padding: 16px;
border-radius: 8px;
border: 1px solid #bfdbfe;
margin-bottom: 16px;
}
.polychrestes-title {
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 12px;
color: #1e40af;
}
.polychreste-item {
background: white;
padding: 12px;
border-radius: 8px;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 12px;
}
.polychreste-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.polychreste-name {
font-weight: bold;
font-size: 1.125rem;
}
.polychreste-position {
font-size: 0.875rem;
padding: 4px 8px;
border-radius: 4px;
}
.polychreste-details {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
font-size: 0.875rem;
}
.polychreste-mechanism {
background: #f9fafb;
padding: 8px;
border-radius: 4px;
}
.mechanism-label {
font-weight: 600;
color: #1d4ed8;
}
/* Responsive */
@media (max-width: 768px) {
.title {
font-size: 2rem;
}
.info-box {
max-width: 280px;
}
.detail-panel {
width: 100%;
}
.cycles-container {
gap: 40px;
flex-wrap: wrap;
}
}
/* Classes utilitaires pour les couleurs */
.text-green { color: #15803d; }
.text-red { color: #dc2626; }
.text-blue { color: #2563eb; }
.text-orange { color: #ea580c; }
.text-purple { color: #9333ea; }
.text-yellow { color: #ca8a04; }
.bg-green-light { background-color: rgba(34, 197, 94, 0.1); }
.bg-red-light { background-color: rgba(239, 68, 68, 0.1); }
.bg-blue-light { background-color: rgba(59, 130, 246, 0.1); }
.bg-orange-light { background-color: rgba(251, 146, 60, 0.1); }
.bg-purple-light { background-color: rgba(168, 85, 247, 0.1); }
.bg-yellow-light { background-color: rgba(251, 191, 36, 0.1); }
</style>
<div class="container">
<!-- En-tête -->
<div class="header">
<h1 class="title">Le Pentagramme</h1>
<h2 class="subtitle">Les relations physio-pathologiques entre MTC et Homéopathie</h2>
<!-- Onglets -->
<div class="tabs">
<button class="tab active" id="tab-mtc" onclick="switchTab('MTC')">MTC</button>
<button class="tab inactive" id="tab-diatheses" onclick="switchTab('Diatheses')">Diathèses</button>
</div>
</div>
<!-- Légende -->
<div class="legend">
<svg width="300" height="60">
<defs>
<marker id="arrowLeft" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto">
<polygon points="10 0, 10 6, 0 3" fill="#ff8a8a"/>
</marker>
<marker id="arrowRight" markerWidth="10" markerHeight="10" refX="10" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#ff8a8a"/>
</marker>
</defs>
<line x1="30" y1="15" x2="110" y2="15" stroke="#ff8a8a" stroke-width="2" marker-start="url(#arrowLeft)"/>
<text x="150" y="20" text-anchor="middle" fill="white" font-size="14" font-weight="600">physiologie</text>
<line x1="190" y1="15" x2="270" y2="15" stroke="#ff8a8a" stroke-width="2"/>
<line x1="30" y1="45" x2="110" y2="45" stroke="#ff8a8a" stroke-width="2"/>
<text x="150" y="50" text-anchor="middle" fill="white" font-size="14" font-weight="600">pathologie</text>
<line x1="190" y1="45" x2="270" y2="45" stroke="#ff8a8a" stroke-width="2" marker-end="url(#arrowRight)"/>
</svg>
</div>
<!-- SVG principal -->
<div class="svg-container">
<svg width="100%" height="1200" viewBox="0 0 1024 1200" id="main-svg">
<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>
</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="pentagram-lines"></g>
<!-- Zones des 5 pôles -->
<g id="poles-container"></g>
<!-- Textes MTC -->
<g id="mtc-texts" style="display: block;">
<text x="274" y="260" text-anchor="middle" fill="white" font-size="14" font-weight="600" class="meridien-text" data-meridien="shao-yang">Shao Yang (feu)</text>
<text x="274" y="280" text-anchor="middle" fill="white" font-size="14" font-weight="600" class="meridien-text" data-meridien="jue-yin">Jue Yin (vent)</text>
<text x="887" y="610" text-anchor="middle" fill="white" font-size="14" font-weight="600" class="meridien-text" data-meridien="tae-yin">Tae Yin (humidité)</text>
<text x="887" y="630" text-anchor="middle" fill="white" font-size="14" font-weight="600" class="meridien-text" data-meridien="yang-ming">Yang Ming (sécheresse)</text>
<text x="512" y="500" text-anchor="middle" fill="black" font-size="14" font-weight="600" class="foyer-text" data-foyer="tae-yang">Tae Yang (froid)</text>
<text x="512" y="550" text-anchor="middle" fill="black" font-size="14" font-weight="600" class="foyer-text" data-foyer="shao-yin">Shao Yin (chaleur)</text>
<text x="512" y="450" text-anchor="middle" fill="black" font-size="12" class="foyer-text" data-foyer="foyer-sup">Foyer supérieur</text>
<text x="512" y="610" text-anchor="middle" fill="black" font-size="12" class="foyer-text" data-foyer="foyer-inf">Foyer inférieur</text>
<text x="512" y="530" text-anchor="middle" fill="black" font-size="12" class="foyer-text" data-foyer="foyer-moy">Foyer moyen</text>
</g>
</svg>
</div>
<!-- Boîte d'informations -->
<div class="info-box" id="info-box">
<h3 id="info-title">Mode: MTC</h3>
<div id="info-content">
<p style="margin-bottom: 8px;">Les 5 éléments de la MTC avec leurs organes associés.</p>
<div id="elements-list"></div>
<div class="info-note mtc" id="info-note">
<div style="font-weight: 600; color: #1e40af; margin-bottom: 4px;">🖱️ Cliquez sur les cercles pour voir les correspondances détaillées</div>
<div style="color: #1d4ed8; margin-bottom: 4px;">Les symptômes cliniques et dérégulations sont en priorité</div>
<div style="color: #2563eb;">📋 Survolez les textes des méridiens et foyers pour leurs explications</div>
</div>
</div>
</div>
<!-- Cycles MTC -->
<div class="cycles-container">
<div class="cycle-item" data-cycle="SHENG">
<svg class="cycle-svg" viewBox="0 0 100 100">
<g transform="translate(50, 50)">
<circle cx="0" cy="0" r="30" fill="none" stroke="#8b0000" stroke-width="3" opacity="0.8"/>
<defs>
<marker id="arrowhead-sheng" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#8b0000"/>
</marker>
</defs>
<path d="M 21,-21 A 30,30 0 0,1 30,0" stroke="#8b0000" stroke-width="2" fill="none" marker-end="url(#arrowhead-sheng)" opacity="0.9"/>
</g>
</svg>
<div class="cycle-name">SHENG</div>
<div class="cycle-subtitle">engendrement structures</div>
</div>
<div class="cycle-item" data-cycle="KO">
<svg class="cycle-svg" viewBox="0 0 100 100">
<g transform="translate(50, 50)">
<!-- Étoile avec trait rouge à droite -->
<line x1="0" y1="-30" x2="28.5" y2="17.5" stroke="#ff0000" stroke-width="3" opacity="0.9"/>
<!-- Les autres traits de l'étoile en blanc -->
<line x1="28.5" y1="-11.5" x2="-28.5" y2="17.5" stroke="white" stroke-width="3" opacity="0.9"/>
<line x1="-28.5" y1="17.5" x2="0" y2="-30" stroke="white" stroke-width="3" opacity="0.9"/>
<line x1="0" y1="-30" x2="28.5" y2="17.5" stroke="white" stroke-width="3" opacity="0.9"/>
<line x1="28.5" y1="17.5" x2="-17.6" y2="-24.3" stroke="white" stroke-width="3" opacity="0.9"/>
<!-- Points blancs aux sommets -->
<circle cx="0" cy="-30" r="4" fill="white"/>
<circle cx="28.5" cy="-11.5" r="4" fill="white"/>
<circle cx="28.5" cy="17.5" r="4" fill="white"/>
<circle cx="-28.5" cy="17.5" r="4" fill="white"/>
<circle cx="-17.6" cy="-24.3" r="4" fill="white"/>
<!-- Triangle rouge à la pointe exacte du trait rouge -->
<polygon points="28.5,17.5 24,21 33,21" fill="#ff0000" opacity="0.9"/>
</g>
</svg>
<div class="cycle-name">KO</div>
<div class="cycle-subtitle">contrôle fonction</div>
</div>
<div class="cycle-item" data-cycle="CHENG">
<svg class="cycle-svg" viewBox="0 0 100 100">
<g transform="translate(50, 50)">
<!-- Étoile -->
<line x1="0" y1="-30" x2="28.5" y2="17.5" stroke="#ef4444" stroke-width="2" opacity="0.8"/>
<line x1="28.5" y1="-11.5" x2="-28.5" y2="17.5" stroke="#ef4444" stroke-width="2" opacity="0.8"/>
<line x1="-28.5" y1="17.5" x2="17.6" y2="-24.3" stroke="#ef4444" stroke-width="2" opacity="0.8"/>
<line x1="17.6" y1="-24.3" x2="-17.6" y2="-24.3" stroke="#ef4444" stroke-width="2" opacity="0.8"/>
<line x1="-17.6" y1="-24.3" x2="28.5" y2="17.5" stroke="#ef4444" stroke-width="2" opacity="0.8"/>
<!-- Points -->
<circle cx="0" cy="-30" r="4" fill="#ef4444"/>
<circle cx="28.5" cy="-11.5" r="4" fill="#ef4444"/>
<circle cx="28.5" cy="17.5" r="4" fill="#ef4444"/>
<circle cx="-28.5" cy="17.5" r="4" fill="#ef4444"/>
<circle cx="-17.6" cy="-24.3" r="4" fill="#ef4444"/>
<!-- Cercle -->
<circle cx="0" cy="0" r="25" fill="none" stroke="#ef4444" stroke-width="2" opacity="0.5"/>
</g>
</svg>
<div class="cycle-name">CHENG</div>
<div class="cycle-subtitle">domination adaptation perverse</div>
</div>
<div class="cycle-item" data-cycle="WU">
<svg class="cycle-svg" viewBox="0 0 100 100">
<g transform="translate(50, 50)">
<!-- Étoile -->
<line x1="0" y1="-30" x2="28.5" y2="17.5" stroke="#8b5cf6" stroke-width="2" opacity="0.8"/>
<line x1="28.5" y1="-11.5" x2="-28.5" y2="17.5" stroke="#8b5cf6" stroke-width="2" opacity="0.8"/>
<line x1="-28.5" y1="17.5" x2="17.6" y2="-24.3" stroke="#8b5cf6" stroke-width="2" opacity="0.8"/>
<line x1="17.6" y1="-24.3" x2="-17.6" y2="-24.3" stroke="#8b5cf6" stroke-width="2" opacity="0.8"/>
<line x1="-17.6" y1="-24.3" x2="28.5" y2="17.5" stroke="#8b5cf6" stroke-width="2" opacity="0.8"/>
<!-- Points -->
<circle cx="0" cy="-30" r="4" fill="#8b5cf6"/>
<circle cx="28.5" cy="-11.5" r="4" fill="#8b5cf6"/>
<circle cx="28.5" cy="17.5" r="4" fill="#8b5cf6"/>
<circle cx="-28.5" cy="17.5" r="4" fill="#8b5cf6"/>
<circle cx="-17.6" cy="-24.3" r="4" fill="#8b5cf6"/>
<!-- Cercle pointillé -->
<circle cx="0" cy="0" r="25" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="5,5" opacity="0.5"/>
</g>
</svg>
<div class="cycle-name">WU</div>
<div class="cycle-subtitle">mépris grave (SAMUI !)</div>
</div>
</div>
<!-- Signature -->
<div class="signature">
Docteur Jean-Yves HENRY
</div>
<!-- Tooltip -->
<div class="tooltip" id="tooltip"></div>
<!-- Overlay et panneau détaillé -->
<div class="overlay" id="overlay" onclick="closeDetailPanel()"></div>
<div class="detail-panel" id="detail-panel">
<div class="detail-header">
<div>
<div class="detail-title" id="detail-title">Détails de l'élément MTC</div>
<div class="detail-subtitle">Cliquez sur la croix, l'overlay ou appuyez sur Esc pour fermer</div>
</div>
<button class="close-btn" onclick="closeDetailPanel()">
<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="detail-content" id="detail-content"></div>
<div class="detail-footer">
<button class="close-footer-btn" onclick="closeDetailPanel()">
<svg style="display: inline-block; width: 20px; height: 20px; margin-right: 8px;" 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-shortcuts">
<span style="display: flex; align-items: center; gap: 4px;">
<span class="keyboard-key">Esc</span> pour fermer
</span>
<span>•</span>
<span>Cliquez sur l'arrière-plan pour fermer</span>
</div>
</div>
</div>
</div>
<script>
// Variables globales
let activeView = 'MTC';
let hoveredElement = null;
let showDetailedInfo = false;
// Données
const correspondancesMTC = {
BOIS: { element: 'BOIS', organe: 'Foie', viscere: 'Vésicule Biliaire', color: '#228b22' },
FEU: { element: 'FEU', organe: 'Cœur', viscere: 'Intestin Grêle', color: '#ff4500' },
TERRE: { element: 'TERRE', organe: 'Rate', viscere: 'Estomac', color: '#ffd700' },
METAL: { element: 'MÉTAL', organe: 'Poumon', viscere: 'Gros Intestin', color: '#c0c0c0' },
EAU: { element: 'EAU', organe: 'Rein', viscere: 'Vessie', color: '#4169e1' }
};
const diatheses = {
BOIS: { name: 'PSORE', description: 'Hypo-fonction', symptoms: 'Dermatoses, troubles fonctionnels chroniques, asthénie', remedies: 'Sulfur, Psorinum, Calcarea carbonica' },
FEU: { name: 'SYCOSE', description: 'Hyper-structure pathologique', symptoms: 'Excroissances, verrues, polypes, tumeurs bénignes', remedies: 'Thuja, Medorrhinum, Natrum sulfuricum' },
TERRE: { name: 'ADAPTATION', description: 'Régulations', symptoms: 'Déséquilibres hormonaux, troubles du rythme', remedies: 'Sepia, Lachesis, Pulsatilla' },
METAL: { name: 'TUBERCULINISME', description: 'Hypo-structure', symptoms: 'Infections récidivantes, dématérialisation, amaigrissement', remedies: 'Tuberculinum, Phosphorus, Calcarea phosphorica' },
EAU: { name: 'LUESE', description: 'Hyper-fonction', symptoms: 'Ulcérations, destructions tissulaires, perversions', remedies: 'Mercurius, Syphilinum, Aurum' }
};
// Positions des pôles
const centerX = 512, centerY = 530, radius = 240;
const polePositions = {
BOIS: { x: centerX - radius _Math.cos(18_ Math.PI / 180), y: centerY - radius _Math.sin(18_ Math.PI / 180) },
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) }
};
// Initialisation
document.addEventListener('DOMContentLoaded', function() {
initializePentagram();
updateInfoBox();
// Gestion des touches
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && showDetailedInfo) {
closeDetailPanel();
}
});
});
function initializePentagram() {
createPentagramLines();
createPoles();
setupEventListeners();
}
function createPentagramLines() {
const svg = document.getElementById('pentagram-lines');
const connections = generatePentagramConnections();
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');
svg.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)');
svg.appendChild(line2);
});
// Marqueur de flèche
const defs = document.querySelector('defs');
const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
marker.setAttribute('id', 'arrowhead-pentagram');
marker.setAttribute('markerWidth', '10');
marker.setAttribute('markerHeight', '10');
marker.setAttribute('refX', '5');
marker.setAttribute('refY', '3');
marker.setAttribute('orient', 'auto');
const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
polygon.setAttribute('points', '0 0, 10 3, 0 6');
polygon.setAttribute('fill', '#8b0000');
marker.appendChild(polygon);
defs.appendChild(marker);
}
function generatePentagramConnections() {
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 createPoles() {
const container = document.getElementById('poles-container');
container.innerHTML = '';
Object.entries(polePositions).forEach(([poleKey, position]) => {
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('cx', position.x);
circle.setAttribute('cy', position.y);
circle.setAttribute('r', '100');
circle.setAttribute('fill', correspondancesMTC[poleKey].color);
circle.setAttribute('opacity', '0.8');
circle.setAttribute('stroke', '#fff');
circle.setAttribute('stroke-width', '3');
circle.style.cursor = 'pointer';
circle.classList.add('pole-circle');
circle.setAttribute('data-pole', poleKey);
group.appendChild(circle);
// Textes
createPoleTexts(group, poleKey, position);
container.appendChild(group);
});
}
function createPoleTexts(group, poleKey, position) {
const data = activeView === 'MTC' ? correspondancesMTC[poleKey] : diatheses[poleKey];
// Titre principal
const title = document.createElementNS('http://www.w3.org/2000/svg', 'text');
title.setAttribute('x', position.x);
title.setAttribute('y', position.y - 25);
title.setAttribute('text-anchor', 'middle');
title.setAttribute('fill', 'white');
title.setAttribute('font-weight', 'bold');
title.setAttribute('font-size', '16');
title.textContent = activeView === 'MTC' ? data.element : data.name;
group.appendChild(title);
// Sous-titre
const subtitle = document.createElementNS('http://www.w3.org/2000/svg', 'text');
subtitle.setAttribute('x', position.x);
subtitle.setAttribute('y', position.y - 5);
subtitle.setAttribute('text-anchor', 'middle');
subtitle.setAttribute('fill', 'white');
subtitle.setAttribute('font-size', '12');
subtitle.textContent = activeView === 'MTC' ? `${data.organe}-${data.viscere}` : data.description;
group.appendChild(subtitle);
// Détails supplémentaires
if (activeView === 'MTC') {
const detail1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
detail1.setAttribute('x', position.x);
detail1.setAttribute('y', position.y + 15);
detail1.setAttribute('text-anchor', 'middle');
detail1.setAttribute('fill', 'white');
detail1.setAttribute('font-size', '12');
detail1.textContent = getElementDetails(poleKey)[0];
group.appendChild(detail1);
const detail2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
detail2.setAttribute('x', position.x);
detail2.setAttribute('y', position.y + 30);
detail2.setAttribute('text-anchor', 'middle');
detail2.setAttribute('fill', 'white');
detail2.setAttribute('font-size', '12');
detail2.textContent = getElementDetails(poleKey)[1];
group.appendChild(detail2);
} else {
// Textes pour les diathèses
const symptoms = getDiatheseSymptoms(poleKey);
symptoms.forEach((symptom, index) => {
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', position.x);
text.setAttribute('y', position.y + 18 + (index * 14));
text.setAttribute('text-anchor', 'middle');
text.setAttribute('fill', 'white');
text.setAttribute('font-size', '10');
text.textContent = symptom;
group.appendChild(text);
});
}
}
function getElementDetails(poleKey) {
const details = {
BOIS: ['Androgènes • Tendons', 'Muscles'],
FEU: ['Int. grêle • Thyroïde', 'Vaisseaux'],
TERRE: ['Hypophyse • Cortex', 'Sein'],
METAL: ['Œstrogènes • Sous-Cortex', 'Thymus • Peau'],
EAU: ['Surrénales • Os et art.', 'Moelles']
};
return details[poleKey] || ['', ''];
}
function getDiatheseSymptoms(poleKey) {
const symptoms = {
BOIS: ['Dermatoses', 'chroniques'],
FEU: ['Excroissances', 'Verrues, polypes', 'Thuja, Medorr.'],
TERRE: ['Déséquilibres', 'hormonaux'],
METAL: ['les muqueuses, les défenses (SRE)', 'Infections récidiv.', 'Amaigrissement'],
EAU: ['le tissu conjonctif, le système HLA', 'Ulcérations', 'Destructions']
};
return symptoms[poleKey] || [''];
}
function setupEventListeners() {
// Événements sur les cercles
document.querySelectorAll('.pole-circle').forEach(circle => {
circle.addEventListener('click', function() {
const poleKey = this.getAttribute('data-pole');
showDetailedInfo = true;
hoveredElement = `${activeView.toLowerCase()}-${poleKey}`;
openDetailPanel(poleKey);
});
circle.addEventListener('mouseenter', function() {
const poleKey = this.getAttribute('data-pole');
hoveredElement = `${activeView.toLowerCase()}-${poleKey}`;
this.setAttribute('opacity', '0.95');
this.setAttribute('stroke', '#FFD700');
this.setAttribute('stroke-width', '4');
this.style.filter = 'drop-shadow(0 0 20px rgba(255,255,255,0.8))';
if (!showDetailedInfo) {
showClickIndicator(poleKey);
}
});
circle.addEventListener('mouseleave', function() {
if (!showDetailedInfo) {
hoveredElement = null;
this.setAttribute('opacity', '0.8');
this.setAttribute('stroke', '#fff');
this.setAttribute('stroke-width', '3');
this.style.filter = 'none';
hideClickIndicator();
}
});
});
// Événements sur les cycles
document.querySelectorAll('.cycle-item').forEach(item => {
item.addEventListener('mouseenter', function() {
const cycle = this.getAttribute('data-cycle');
showTooltip(event, getCycleTooltip(cycle));
});
item.addEventListener('mouseleave', hideTooltip);
});
// Événements sur les textes MTC
document.querySelectorAll('.meridien-text, .foyer-text').forEach(text => {
text.addEventListener('mouseenter', function() {
const type = this.getAttribute('data-meridien') ? 'meridien' : 'foyer';
const key = this.getAttribute('data-meridien') || this.getAttribute('data-foyer');
showTooltip(event, type === 'meridien' ? getMeridienTooltip(key) : getFoyerTooltip(key));
});
text.addEventListener('mouseleave', hideTooltip);
});
}
function switchTab(view) {
activeView = view;
// Mise à jour des onglets
document.getElementById('tab-mtc').className = view === 'MTC' ? 'tab active' : 'tab inactive';
document.getElementById('tab-diatheses').className = view === 'Diatheses' ? 'tab active' : 'tab inactive';
// Mise à jour de l'affichage
document.getElementById('mtc-texts').style.display = view === 'MTC' ? 'block' : 'none';
// Fermeture du panneau détaillé
closeDetailPanel();
// Recréation des pôles
createPoles();
updateInfoBox();
setupEventListeners();
}
function updateInfoBox() {
const infoTitle = document.getElementById('info-title');
const infoContent = document.getElementById('info-content');
const infoNote = document.getElementById('info-note');
const elementsList = document.getElementById('elements-list');
infoTitle.textContent = `Mode: ${activeView === 'MTC' ? 'MTC' : 'Diathèses'}`;
// Mise à jour de la liste des éléments
elementsList.innerHTML = '';
if (activeView === 'MTC') {
infoContent.querySelector('p').textContent = 'Les 5 éléments de la MTC avec leurs organes associés.';
Object.entries(correspondancesMTC).forEach(([poleKey, data]) => {
const item = document.createElement('div');
item.className = 'element-item';
item.innerHTML = `
<div class="color-indicator" style="background-color: ${data.color};"></div>
<span>${data.element} - ${data.organe}-${data.viscere}</span>
`;
elementsList.appendChild(item);
});
infoNote.className = 'info-note mtc';
infoNote.innerHTML = `
<div style="font-weight: 600; color: #1e40af; margin-bottom: 4px;">🖱️ Cliquez sur les cercles pour voir les correspondances détaillées</div>
<div style="color: #1d4ed8; margin-bottom: 4px;">Les symptômes cliniques et dérégulations sont en priorité</div>
<div style="color: #2563eb;">📋 Survolez les textes des méridiens et foyers pour leurs explications</div>
`;
} else {
infoContent.querySelector('p').textContent = 'Les 5 diathèses homéopathiques.';
Object.entries(diatheses).forEach(([poleKey, data]) => {
const item = document.createElement('div');
item.className = 'element-item';
item.innerHTML = `
<div class="color-indicator" style="background-color: ${correspondancesMTC[poleKey].color};"></div>
<span style="font-size: 0.75rem;">${data.name}</span>
`;
elementsList.appendChild(item);
});
infoNote.className = 'info-note diatheses';
infoNote.innerHTML = `
<div style="font-weight: 600; color: #d97706; margin-bottom: 4px;">🖱️ Cliquez sur les cercles pour voir les détails exhaustifs</div>
<div style="color: #b45309;">Mécanismes, polychrestes, correspondances MTC</div>
`;
}
}
function showClickIndicator(poleKey) {
const position = polePositions[poleKey];
const container = document.getElementById('poles-container');
// Cercle indicateur
const indicator = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
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.setAttribute('opacity', '0.6');
indicator.setAttribute('stroke-dasharray', '5,5');
indicator.id = 'click-indicator-circle';
container.appendChild(indicator);
// Texte indicateur
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', position.x);
text.setAttribute('y', position.y + 130);
text.setAttribute('text-anchor', 'middle');
text.setAttribute('fill', 'white');
text.setAttribute('font-size', '12');
text.setAttribute('font-weight', '600');
text.style.filter = 'drop-shadow(0 0 3px rgba(0,0,0,0.8))';
text.textContent = 'Cliquez pour détails';
text.id = 'click-indicator-text';
container.appendChild(text);
}
function hideClickIndicator() {
const circle = document.getElementById('click-indicator-circle');
const text = document.getElementById('click-indicator-text');
if (circle) circle.remove();
if (text) text.remove();
}
function openDetailPanel(poleKey) {
const overlay = document.getElementById('overlay');
const panel = document.getElementById('detail-panel');
const title = document.getElementById('detail-title');
const content = document.getElementById('detail-content');
const infoBox = document.getElementById('info-box');
title.textContent = activeView === 'MTC' ? 'Détails de l\'élément MTC' : 'Détails de la diathèse';
if (activeView === 'MTC') {
content.innerHTML = generateMTCContent(poleKey);
} else {
content.innerHTML = generateDiatheseContent(poleKey);
}
overlay.style.display = 'block';
panel.style.display = 'flex';
infoBox.classList.add('shifted');
}
function closeDetailPanel() {
const overlay = document.getElementById('overlay');
const panel = document.getElementById('detail-panel');
const infoBox = document.getElementById('info-box');
overlay.style.display = 'none';
panel.style.display = 'none';
infoBox.classList.remove('shifted');
showDetailedInfo = false;
hoveredElement = null;
// Réinitialiser l'apparence des cercles
document.querySelectorAll('.pole-circle').forEach(circle => {
circle.setAttribute('opacity', '0.8');
circle.setAttribute('stroke', '#fff');
circle.setAttribute('stroke-width', '3');
circle.style.filter = 'none';
});
hideClickIndicator();
}
function generateMTCContent(poleKey) {
const data = correspondancesMTC[poleKey];
return `
<div style="padding: 16px;">
<div style="text-align: center; padding-bottom: 8px; border-bottom: 1px solid #d1d5db; margin-bottom: 16px;">
<div style="font-weight: bold; font-size: 1.5rem; color: #374151;">Élément ${data.element}</div>
<div style="font-size: 0.875rem; color: #6b7280; margin-top: 4px;">${data.organe} - ${data.viscere}</div>
</div>
<div style="background: rgba(239, 68, 68, 0.1); padding: 12px; border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.2); margin-bottom: 16px;">
<div style="font-weight: bold; font-size: 1.125rem; margin-bottom: 12px; color: #dc2626;">🔴 Symptômes Cliniques</div>
<div style="background: white; padding: 8px; border-radius: 4px; margin-bottom: 8px;">
<span style="font-weight: 600; color: #dc2626;">Vide:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Fatigue, essoufflement, pâleur, frilosité</div>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; margin-bottom: 8px;">
<span style="font-weight: 600; color: #dc2626;">Plénitude:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Agitation, oppression, inflammation, congestion</div>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; margin-bottom: 8px;">
<span style="font-weight: 600; color: #dc2626;">Yang excessif:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Hyperactivité, fièvre, irritabilité, insomnie</div>
</div>
<div style="background: white; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #dc2626;">Yin insuffisant:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Sécheresse, chaleur des 5 cœurs, sueurs nocturnes</div>
</div>
</div>
<div style="background: #f3f4f6; padding: 12px; border-radius: 8px; margin-bottom: 16px;">
<div style="font-weight: 600; font-size: 1rem; margin-bottom: 8px;">📋 Correspondances principales</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 0.875rem;">
<div><strong>Saison:</strong> ${getSeasonForElement(poleKey)}</div>
<div><strong>Direction:</strong> ${getDirectionForElement(poleKey)}</div>
<div><strong>Couleur:</strong> ${getColorForElement(poleKey)}</div>
<div><strong>Saveur:</strong> ${getFlavorForElement(poleKey)}</div>
<div><strong>Émotion:</strong> ${getEmotionForElement(poleKey)}</div>
<div><strong>Organe sens:</strong> ${getSenseOrganForElement(poleKey)}</div>
</div>
</div>
<div style="font-size: 0.75rem; color: #6b7280; text-align: center; padding-top: 8px; border-top: 1px solid #e5e7eb;">
Approche intégrative - Dr Jean-Yves Henry
</div>
</div>
`;
}
function generateDiatheseContent(poleKey) {
if (poleKey === 'TERRE') {
return generateAdaptationContent();
} else if (poleKey === 'FEU') {
return generateSycoseContent();
} else if (poleKey === 'BOIS') {
return generatePsoreContent();
} else if (poleKey === 'METAL') {
return generateTuberculinismeContent();
} else if (poleKey === 'EAU') {
return generateLueseContent();
}
const data = diatheses[poleKey];
const color = correspondancesMTC[poleKey].color;
return `
<div style="padding: 16px;">
<div class="diathese-header" style="border-color: ${color}; background-color: ${color}15;">
<div class="diathese-title" style="color: ${color};">🔥 ${data.name}</div>
<div class="concept-box">📚 Concept hahnemannien : ${getConceptForDiathese(poleKey)}</div>
<div class="description-box">${getDescriptionForDiathese(poleKey)}</div>
</div>
<div class="mechanism-box" style="background-color: ${color}20; border-color: ${color};">
<div class="mechanism-title" style="color: ${color};">🔑 Mécanisme Principal</div>
<div class="mechanism-main" style="border-left-color: ${color};">${getMechanismForDiathese(poleKey)}</div>
<div class="principle-box"><strong>Principe fondamental:</strong> ${getPrincipleForDiathese(poleKey)}</div>
</div>
<div style="background: rgba(59, 130, 246, 0.1); padding: 16px; border-radius: 8px; border: 1px solid #bfdbfe; margin-bottom: 16px;">
<div style="font-weight: bold; font-size: 1.125rem; margin-bottom: 12px; color: #1e40af;">💊 Remèdes Principaux</div>
<div style="background: white; padding: 12px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="margin-bottom: 8px;">
<span style="font-weight: 600; color: #7c3aed;">Remèdes clés:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">${data.remedies}</div>
</div>
</div>
</div>
<div style="background: rgba(239, 68, 68, 0.1); padding: 16px; border-radius: 8px; border: 1px solid rgba(239, 68, 68, 0.2); margin-bottom: 16px;">
<div style="font-weight: bold; font-size: 1.125rem; margin-bottom: 12px; color: #dc2626;">🎯 Symptômes Clés</div>
<div style="background: white; padding: 12px; border-radius: 8px;">
<div style="font-size: 0.875rem;">${data.symptoms}</div>
</div>
</div>
<div style="font-size: 0.75rem; color: #6b7280; text-align: center; padding-top: 8px; border-top: 1px solid #e5e7eb;">
Approche diathésique intégrative - Dr Jean-Yves Henry
</div>
</div>
`;
}
function generateLueseContent() {
const couleurDiathese = '#9370DB';
return `
<div style="padding: 16px; color: #374151;">
<!-- En-tête avec couleur de la diathèse -->
<div style="text-align: center; padding-bottom: 12px; border-bottom: 4px solid ${couleurDiathese}; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: rgba(147, 112, 219, 0.08);">
<div style="font-weight: bold; font-size: 1.875rem; margin-bottom: 8px; color: ${couleurDiathese};">
🔥 LUÈSE
</div>
<div style="font-size: 0.875rem; color: #374151; font-style: italic; background: white; padding: 8px; border-radius: 4px;">
📚 Concept hahnemannien : Le miasme de la syphilis - La destruction
</div>
<div style="font-size: 0.75rem; color: #4b5563; margin-top: 8px; background: white; padding: 8px; border-radius: 4px;">
Quatrième miasme chronique. Caractérisé par la destruction tissulaire et les perversions.
</div>
</div>
<!-- Mécanisme principal - PRIORITÉ -->
<div style="padding: 16px; border-radius: 8px; border: 2px solid ${couleurDiathese}; margin-bottom: 16px; background: rgba(147, 112, 219, 0.13);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: ${couleurDiathese};">
🔑 Mécanisme Principal selon Dr Jean-Yves Henry
</div>
<div style="font-size: 1.125rem; font-weight: 600; text-align: center; padding: 12px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-left: 5px solid ${couleurDiathese}; margin-bottom: 12px;">
HYPER-FONCTION destructrice
</div>
<div style="font-size: 0.875rem; background: rgba(239, 246, 255, 1); padding: 12px; border-radius: 4px; margin-top: 12px; border-left: 4px solid #3b82f6;">
<strong>Principe fondamental:</strong> Destruction et perversion. Le tissu conjonctif, le système HLA. Pulsion de mort avec énergie destructrice.
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;">
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Niveau:</span> Fonction destructrice - Altération profonde des structures
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Mouvement:</span> Destruction créatrice ou perversion ("Tout ou rien")
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Évolution:</span> Phase 1: Destruction compensatrice → Phase 2: Perversion ou régénération
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Terrain:</span> Destruction tissulaire avec possibilité de régénération créative
</div>
</div>
</div>
<!-- Polychrestes majeurs avec correspondances MTC -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #bfdbfe; margin-bottom: 16px; background: rgba(147, 112, 219, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #1e40af;">
💊 Polychrestes Majeurs & Correspondances MTC
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
AURUM METALLICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(147, 112, 219, 0.13); color: ${couleurDiathese};">
PATRON DE L'EAU - Bleu dans Bleu (auto-renforcement)
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Chute vertigineuse de l'idéal vers l'abîme
</div>
<div><strong>Énergie MTC:</strong> Dépression par vide de Yang des Reins et du Cœur</div>
<div><strong>Modalités:</strong> Aggravation nuit et contradiction, amélioration air frais et musique</div>
<div><strong>Symptômes:</strong> Dépression profonde, troubles cardiaques, idées suicidaires</div>
<div><strong>Mental:</strong> Le roi déchu - de la gloire à la destruction</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
LYCOPODIUM CLAVATUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(147, 112, 219, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU FEU DANS L'EAU - Rouge dans Bleu
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Tyran domestique qui terrorise les faibles
</div>
<div><strong>Énergie MTC:</strong> Insuffisance hépatique et rénale avec sécheresse</div>
<div><strong>Modalités:</strong> Aggravation 16-20h et vêtements serrés, amélioration mouvement et chaleur</div>
<div><strong>Symptômes:</strong> Troubles digestifs 16-20h, ballonnements, timidité/autoritarisme</div>
<div><strong>Mental:</strong> Le lâche autoritaire - masque de confiance sur peur profonde</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
CARBO VEGETABILIS
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(147, 112, 219, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU MÉTAL DANS L'EAU - Gris dans Bleu
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Décomposition organique nécessitant oxygénation
</div>
<div><strong>Énergie MTC:</strong> Effondrement du Yang avec stagnation</div>
<div><strong>Modalités:</strong> Aggravation air confiné et chaleur, amélioration éventail</div>
<div><strong>Symptômes:</strong> Collapsus avec cyanose, flatulences, besoin d'air</div>
<div><strong>Mental:</strong> Effondrement et décomposition - renaissance par l'air</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
GRAPHITES
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(147, 112, 219, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU MÉTAL DANS L'EAU - Gris dans Bleu
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Cristallisation des émotions en symptômes somatiques
</div>
<div><strong>Énergie MTC:</strong> Équilibre Yin-Yang perturbé du Rein</div>
<div><strong>Modalités:</strong> Aggravation froid et pendant règles, amélioration chaleur et obscurité</div>
<div><strong>Symptômes:</strong> Indécision, larmes faciles, obésité, fissures cutanées</div>
<div><strong>Mental:</strong> Indécision et pleurs - fragilité émotionnelle</div>
</div>
</div>
</div>
<!-- Axes énergétiques fondamentaux -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #a855f7; margin-bottom: 16px; background: rgba(147, 112, 219, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #a855f7;">
⚡ Axes Énergétiques Fondamentaux MTC
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #a855f7;">Rein-Cœur : Aurum</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Axe vital-spirituel - transformation alchimique</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #a855f7;">Cœur-Rein : Lycopodium</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Circulation-volonté - autorité compensatrice</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #a855f7;">Poumon-Rein : Carbo vegetabilis</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Effondrement énergétique total</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #a855f7;">Poumon-Rein : Graphites</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Indécision avec stagnation émotionnelle</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #a855f7;">Du Mai</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Sublimation de l'énergie destructrice</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #a855f7;">Chong Mai-Ren Mai</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Transformation des énergies sexuelles</div>
</div>
</div>
<!-- Nosodes -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #c084fc; margin-bottom: 16px; background: rgba(147, 112, 219, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #7c3aed;">
🧬 Nosodes - Mémoire Miasmatique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="margin-bottom: 8px;">
<span style="font-weight: 600; color: #7c3aed;">Nosode principal:</span>
<span style="margin-left: 8px; font-size: 1.125rem; font-weight: bold; padding: 6px 12px; border-radius: 4px; background: rgba(147, 112, 219, 0.13); color: ${couleurDiathese};">
LUESINUM (Syphilis)
</span>
</div>
<div>
<span style="font-weight: 600; color: #7c3aed;">Nosodes secondaires:</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;">
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(147, 112, 219, 0.1); color: ${couleurDiathese};">Syphilinum</span>
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(147, 112, 219, 0.1); color: ${couleurDiathese};">Mercurius nosode</span>
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(147, 112, 219, 0.1); color: ${couleurDiathese};">Aurum nosode</span>
</div>
</div>
</div>
</div>
<!-- Symptômes clés -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #fca5a5; margin-bottom: 16px; background: rgba(147, 112, 219, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #dc2626;">
🎯 Symptômes Clés & Pathogénésie
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Ulcérations profondes et destructrices</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Suppurations fétides et corrosives</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Troubles mentaux avec perversions</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Aggravation nocturne constante</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Amélioration par le mouvement</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Tendances auto-destructrices</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Alternance construction/destruction</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Troubles du sommeil avec agitation nocturne</span>
</div>
</div>
</div>
<!-- Évolution diathésique spéciale -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #f59e0b; margin-bottom: 16px; background: rgba(147, 112, 219, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #f59e0b;">
🔮 Évolution Diathésique - Transformation Alchimique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #f59e0b;">Stade ultime:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Stade ultime pouvant soit détruire complètement, soit se sublimer en créativité supérieure. Transformation alchimique possible selon Aurum.</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #f59e0b;">Polychrestes Métal→Eau:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Les 2 polychrestes Métal→Eau (Carbo vegetabilis, Graphites) représentent l'effondrement structural avec possibilité de régénération.</div>
</div>
</div>
<!-- Influences mutuelles entre diathèses -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #fed7aa; margin-bottom: 16px; background: rgba(147, 112, 219, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #ea580c;">
🔄 Influences Mutuelles Entre Diathèses
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Sublimation créative:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Transformation de la destruction en créativité supérieure (Aurum)</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Retour Tuberculinisme:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par épuisement structural → Phosphorus</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Retour Sycose:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par accumulation compensatrice → Calcarea, Natrum mur</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Retour Psore:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par élimination restaurée → Sulfur via Lycopodium</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #ea580c;">Vers Adaptation:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par canalisation créative → Mercurius (régulation)</div>
</div>
</div>
<!-- Évolution et stratégie -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #bbf7d0; margin-bottom: 16px; background: rgba(147, 112, 219, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #16a34a;">
🔄 Stratégie Thérapeutique - Approche Alchimique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #16a34a;">Canalisation créative:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Canaliser l'énergie destructrice vers la créativité selon Aurum. Soutenir le Yang des Reins (Aurum, Lycopodium).</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #16a34a;">Accompagnement de l'effondrement:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Accompagner l'effondrement par oxygénation (Carbo vegetabilis). Stabiliser les oscillations émotionnelles (Graphites).</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #16a34a;">Principe fondamental:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Éviter toute suppression brutale - accompagner les transformations profondes.</div>
</div>
</div>
<!-- Note finale -->
<div style="font-size: 0.75rem; text-align: center; padding-top: 12px; border-top: 2px solid ${couleurDiathese}; border-radius: 8px; padding: 8px; background: rgba(147, 112, 219, 0.06);">
<div style="font-weight: 600; color: ${couleurDiathese};">
Approche diathésique intégrative - Dr Jean-Yves Henry
</div>
<div style="color: #6b7280; margin-top: 4px;">
Synthèse des données cliniques et correspondances MTC - Transformation alchimique
</div>
</div>
</div>
`;
}
function generateTuberculinismeContent() {
const couleurDiathese = '#87CEEB';
return `
<div style="padding: 16px; color: #374151;">
<!-- En-tête avec couleur de la diathèse -->
<div style="text-align: center; padding-bottom: 12px; border-bottom: 4px solid ${couleurDiathese}; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: rgba(135, 206, 235, 0.08);">
<div style="font-weight: bold; font-size: 1.875rem; margin-bottom: 8px; color: ${couleurDiathese};">
🔥 TUBERCULINISME
</div>
<div style="font-size: 0.875rem; color: #374151; font-style: italic; background: white; padding: 8px; border-radius: 4px;">
📚 Concept hahnemannien : Le miasme de la tuberculose - La déminéralisation
</div>
<div style="font-size: 0.75rem; color: #4b5563; margin-top: 8px; background: white; padding: 8px; border-radius: 4px;">
Troisième miasme chronique. Caractérisé par la déminéralisation, l'hypersensibilité et l'instabilité.
</div>
</div>
<!-- Mécanisme principal - PRIORITÉ -->
<div style="padding: 16px; border-radius: 8px; border: 2px solid ${couleurDiathese}; margin-bottom: 16px; background: rgba(135, 206, 235, 0.13);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: ${couleurDiathese};">
🔑 Mécanisme Principal selon Dr Jean-Yves Henry
</div>
<div style="font-size: 1.125rem; font-weight: 600; text-align: center; padding: 12px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-left: 5px solid ${couleurDiathese}; margin-bottom: 12px;">
HYPO-STRUCTURE avec déminéralisation
</div>
<div style="font-size: 0.875rem; background: rgba(239, 246, 255, 1); padding: 12px; border-radius: 4px; margin-top: 12px; border-left: 4px solid #3b82f6;">
<strong>Principe fondamental:</strong> Déminéralisation progressive. Les muqueuses, les défenses (SRE). Hypersensibilité compensatrice avec instabilité.
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;">
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Niveau:</span> Structure déficiente - Déminéralisation et fragilité tissulaire
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Mouvement:</span> Instabilité et recherche constante ("Mouvement perpétuel")
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Évolution:</span> Phase 1: Hypersensibilité compensatrice → Phase 2: Épuisement et déminéralisation
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Terrain:</span> Déminéralisation avec hypersensibilité du système nerveux
</div>
</div>
</div>
<!-- Polychrestes majeurs avec correspondances MTC -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #bfdbfe; margin-bottom: 16px; background: rgba(135, 206, 235, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #1e40af;">
💊 Polychrestes Majeurs & Correspondances MTC
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
PHOSPHORUS
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(135, 206, 235, 0.13); color: ${couleurDiathese};">
PATRON DU MÉTAL - Gris dans Gris (auto-renforcement)
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Lumière qui attire mais consume celui qui la porte
</div>
<div><strong>Énergie MTC:</strong> S'épuise par vide de Wei Qi - déficience du Qi défensif</div>
<div><strong>Modalités:</strong> Aggravation coucher côté gauche et effort mental, amélioration sommeil et froid</div>
<div><strong>Symptômes:</strong> Hémorragies rouge vif, pneumonies, hypersensibilité extrême</div>
<div><strong>Mental:</strong> La bougie qui brûle par les deux bouts - hypersensibilité et épuisement</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
ARSENICUM ALBUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(135, 206, 235, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU BOIS DANS LE MÉTAL - Vert dans Gris
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Agitation anxieuse qui masque la terreur du néant
</div>
<div><strong>Énergie MTC:</strong> S'agite par vide de Qi (énergie) avec feu vide</div>
<div><strong>Modalités:</strong> Aggravation 1-3h matin et froid, amélioration chaleur et compagnie</div>
<div><strong>Symptômes:</strong> Anxiété avec agitation, brûlures améliorées par chaleur, épuisement</div>
<div><strong>Mental:</strong> L'anxieux méticuleux - contrôle obsessionnel de la mort</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
LACHESIS
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(135, 206, 235, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU FEU DANS LE MÉTAL - Rouge dans Gris
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Venin de la jalousie qui empoisonne tout
</div>
<div><strong>Énergie MTC:</strong> Montée du Yang du Foie avec stase de Sang</div>
<div><strong>Modalités:</strong> Aggravation chaleur et vêtements serrés, amélioration écoulements</div>
<div><strong>Symptômes:</strong> Bouffées de chaleur, palpitations, loquacité, jalousie</div>
<div><strong>Mental:</strong> Le serpent venimeux - jalousie et loquacité</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
ZINCUM METALLICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(135, 206, 235, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DE LA TERRE DANS LE MÉTAL - Jaune dans Gris
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Agitation compensatrice masquant l'épuisement profond
</div>
<div><strong>Énergie MTC:</strong> Déficience du Yin du Foie et des Reins</div>
<div><strong>Modalités:</strong> Aggravation vin et suppression éruptions, amélioration mouvement</div>
<div><strong>Symptômes:</strong> Agitation des jambes, épilepsie, épuisement mental</div>
<div><strong>Mental:</strong> Agitation et épuisement nerveux - mouvement perpétuel</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
PULSATILLA
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(135, 206, 235, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DE L'EAU DANS LE MÉTAL - Bleu dans Gris
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Douceur manipulatrice nécessitant soutien constant
</div>
<div><strong>Énergie MTC:</strong> Variabilité par stagnation du Qi avec vide de Sang</div>
<div><strong>Modalités:</strong> Aggravation chaleur et graisses, amélioration air frais et mouvement doux</div>
<div><strong>Symptômes:</strong> Symptômes changeants, leucorrhées, amélioration air frais et consolation</div>
<div><strong>Mental:</strong> L'enfant éternelle - dépendance et changement</div>
</div>
</div>
</div>
<!-- Nosodes -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #c084fc; margin-bottom: 16px; background: rgba(135, 206, 235, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #7c3aed;">
🧬 Nosodes - Mémoire Miasmatique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="margin-bottom: 8px;">
<span style="font-weight: 600; color: #7c3aed;">Nosode principal:</span>
<span style="margin-left: 8px; font-size: 1.125rem; font-weight: bold; padding: 6px 12px; border-radius: 4px; background: rgba(135, 206, 235, 0.13); color: ${couleurDiathese};">
TUBERCULINUM (Tuberculose)
</span>
</div>
<div>
<span style="font-weight: 600; color: #7c3aed;">Nosodes secondaires:</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;">
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(135, 206, 235, 0.1); color: ${couleurDiathese};">Tuberculinum bovinum</span>
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(135, 206, 235, 0.1); color: ${couleurDiathese};">Bacillinum</span>
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(135, 206, 235, 0.1); color: ${couleurDiathese};">Aviaire</span>
</div>
</div>
</div>
</div>
<!-- Symptômes clés -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #fca5a5; margin-bottom: 16px; background: rgba(135, 206, 235, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #dc2626;">
🎯 Symptômes Clés & Pathogénésie
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Déminéralisation osseuse progressive</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Hypersensibilité aux stimuli (bruit, lumière, toucher)</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Instabilité émotionnelle et physique</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Infections respiratoires récidivantes</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Amaigrissement malgré bon appétit</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Fatigue avec agitation compensatrice</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Amélioration par le changement et le voyage</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Aggravation par le froid humide et l'immobilité</span>
</div>
</div>
</div>
<!-- Influences mutuelles entre diathèses -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #fed7aa; margin-bottom: 16px; background: rgba(135, 206, 235, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #ea580c;">
🔄 Influences Mutuelles Entre Diathèses
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Vers Luèse:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par épuisement complet des réserves → destruction → Aurum</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Vers Sycose:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par surcompensation → accumulation → Thuja</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Vers Psore:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par reminéralisation efficace → restauration → Calcarea carbonica</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #ea580c;">Vers Adaptation:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par stabilisation des rythmes → équilibre → Sepia</div>
</div>
</div>
<!-- Évolution et stratégie -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #bbf7d0; margin-bottom: 16px; background: rgba(135, 206, 235, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #16a34a;">
🔄 Évolution & Stratégie Thérapeutique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #16a34a;">Évolution diathésique:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Tuberculinisme → Luèse (par épuisement complet) ou Sycose (par surcompensation). Possible retour vers Psore par reminéralisation</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #16a34a;">Stratégie thérapeutique:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Reminéralisation progressive prioritaire, soutien du système nerveux, éviter les stimulations excessives, nutrition ciblée, rythme de vie régulier, protection du froid humide</div>
</div>
</div>
<!-- Note finale -->
<div style="font-size: 0.75rem; text-align: center; padding-top: 12px; border-top: 2px solid ${couleurDiathese}; border-radius: 8px; padding: 8px; background: rgba(135, 206, 235, 0.06);">
<div style="font-weight: 600; color: ${couleurDiathese};">
Approche diathésique intégrative - Dr Jean-Yves Henry
</div>
<div style="color: #6b7280; margin-top: 4px;">
Synthèse des données cliniques et correspondances MTC
</div>
</div>
</div>
`;
}
function generatePsoreContent() {
const couleurDiathese = '#90EE90';
return `
<div style="padding: 16px; color: #374151;">
<!-- En-tête avec couleur de la diathèse -->
<div style="text-align: center; padding-bottom: 12px; border-bottom: 4px solid ${couleurDiathese}; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: rgba(144, 238, 144, 0.08);">
<div style="font-weight: bold; font-size: 1.875rem; margin-bottom: 8px; color: ${couleurDiathese};">
🔥 PSORE
</div>
<div style="font-size: 0.875rem; color: #374151; font-style: italic; background: white; padding: 8px; border-radius: 4px;">
📚 Concept hahnemannien : Le miasme originel - La gale
</div>
<div style="font-size: 0.75rem; color: #4b5563; margin-top: 8px; background: white; padding: 8px; border-radius: 4px;">
Premier miasme chronique décrit par Hahnemann. Représente la suppression des éliminations cutanées.
</div>
</div>
<!-- Mécanisme principal - PRIORITÉ -->
<div style="padding: 16px; border-radius: 8px; border: 2px solid ${couleurDiathese}; margin-bottom: 16px; background: rgba(144, 238, 144, 0.13);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: ${couleurDiathese};">
🔑 Mécanisme Principal selon Dr Jean-Yves Henry
</div>
<div style="font-size: 1.125rem; font-weight: 600; text-align: center; padding: 12px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-left: 5px solid ${couleurDiathese}; margin-bottom: 12px;">
HYPO-FONCTION avec stagnation → chaleur
</div>
<div style="font-size: 0.875rem; background: rgba(239, 246, 255, 1); padding: 12px; border-radius: 4px; margin-top: 12px; border-left: 4px solid #3b82f6;">
<strong>Principe fondamental:</strong> Bouclier des émotions en lien avec Vésicule Biliaire. Expression du stress selon mécanisme diathésique via triangle Yin-Yang.
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;">
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Niveau:</span> Fonction déficiente - Le Foie ne peut plus assurer son rôle de libre circulation du Qi
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Mouvement:</span> Stagnation énergétique puis inflammation ("Un bois sec s'enflamme")
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Évolution:</span> Phase 1: Manifestations "feu" (érythème) → Phase 2: Symptômes digestifs chroniques
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Terrain:</span> Auto-intoxication progressive par déficit élimination
</div>
</div>
</div>
<!-- Polychrestes majeurs avec correspondances MTC -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #bfdbfe; margin-bottom: 16px; background: rgba(144, 238, 144, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #1e40af;">
💊 Polychrestes Majeurs & Correspondances MTC
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
SULFUR
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(144, 238, 144, 0.13); color: ${couleurDiathese};">
PATRON DU BOIS - Vert dans Vert (auto-renforcement)
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Ouverture des émonctoires avec éliminations périodiques
</div>
<div><strong>Énergie MTC:</strong> Yang du Foie avec stagnation Qi - Chaleur constitutionnelle</div>
<div><strong>Modalités:</strong> Aggravation 11h et chaleur du lit, amélioration air frais</div>
<div><strong>Symptômes:</strong> Éruptions pruriantes, chaleur des pieds la nuit, faim à 11h, congestion portale</div>
<div><strong>Mental:</strong> Le philosophe en haillons - confusion entre imagination et réalité</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
SEPIA
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(144, 238, 144, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU MÉTAL DANS LE BOIS - Gris dans Vert
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Épuisement maternel qui mène au rejet affectif
</div>
<div><strong>Énergie MTC:</strong> S'agite par vide de Sang - stagnation du Qi du Foie</div>
<div><strong>Modalités:</strong> Aggravation règles et position assise, amélioration mouvement violent et danse</div>
<div><strong>Symptômes:</strong> Ptoses génitales, indifférence affective aux proches, amélioration effort violent</div>
<div><strong>Mental:</strong> La femme épuisée - indifférence et irritabilité</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
CUPRUM METALLICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(144, 238, 144, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DE LA TERRE DANS LE BOIS - Jaune dans Vert
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Vent du Foie perturbant la circulation du Qi
</div>
<div><strong>Énergie MTC:</strong> Vent du Foie avec spasmes</div>
<div><strong>Modalités:</strong> Aggravation toucher, amélioration boissons froides</div>
<div><strong>Symptômes:</strong> Crampes et spasmes violents, convulsions, contractures</div>
<div><strong>Mental:</strong> Spasmes et crampes - contracture généralisée</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
FERRUM METALLICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(144, 238, 144, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU FEU DANS LE BOIS - Rouge dans Vert
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Déficience du Sang perturbant la circulation
</div>
<div><strong>Énergie MTC:</strong> Vide de Sang avec faux Yang</div>
<div><strong>Modalités:</strong> Aggravation mouvement, amélioration pression ferme</div>
<div><strong>Symptômes:</strong> Anémie avec pâleur alternant avec rougeur, hémorragies</div>
<div><strong>Mental:</strong> Anémie et faiblesse - alternance rougeur/pâleur</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
MANGANUM METALLICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(144, 238, 144, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DE L'EAU DANS LE BOIS - Bleu dans Vert
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Épuisement des essences vitales (Jing et Sang)
</div>
<div><strong>Énergie MTC:</strong> Vide de Sang du Foie avec anémie profonde</div>
<div><strong>Modalités:</strong> Aggravation humidité, amélioration coucher sur le ventre</div>
<div><strong>Symptômes:</strong> Anémie extrême, faiblesse vocale, paralysie progressive</div>
<div><strong>Mental:</strong> Paralysie et anémie - faiblesse extrême</div>
</div>
</div>
</div>
<!-- Nosodes -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #c084fc; margin-bottom: 16px; background: rgba(144, 238, 144, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #7c3aed;">
🧬 Nosodes - Mémoire Miasmatique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="margin-bottom: 8px;">
<span style="font-weight: 600; color: #7c3aed;">Nosode principal:</span>
<span style="margin-left: 8px; font-size: 1.125rem; font-weight: bold; padding: 6px 12px; border-radius: 4px; background: rgba(144, 238, 144, 0.13); color: ${couleurDiathese};">
PSORINUM (Gale supprimée)
</span>
</div>
<div>
<span style="font-weight: 600; color: #7c3aed;">Nosodes secondaires:</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;">
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(144, 238, 144, 0.1); color: ${couleurDiathese};">Eczeminum</span>
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(144, 238, 144, 0.1); color: ${couleurDiathese};">Pyorrhéin</span>
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(144, 238, 144, 0.1); color: ${couleurDiathese};">Sulfur nosode</span>
</div>
</div>
</div>
</div>
<!-- Symptômes clés -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #fca5a5; margin-bottom: 16px; background: rgba(144, 238, 144, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #dc2626;">
🎯 Symptômes Clés & Pathogénésie
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Alternances morbides (asthme/eczéma)</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Périodicité des symptômes selon méridiens</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Aggravation par suppression des éruptions</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Frilosité avec amélioration par la chaleur</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Prurit sans lésion ou avec lésions sèches</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Fatigue matinale avec réveil difficile</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Constipation sans besoin - selles sèches</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Mauvaise haleine matinale - stagnation hépatique</span>
</div>
</div>
</div>
<!-- Influences mutuelles entre diathèses -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #fed7aa; margin-bottom: 16px; background: rgba(144, 238, 144, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #ea580c;">
🔄 Influences Mutuelles Entre Diathèses
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Vers Sycose:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par suppression des éliminations → surcharge → construction pathologique (Kalium)</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Vers Tuberculinisme:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par épuisement des réserves → déminéralisation → Phosphorus</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Vers Adaptation:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par blocage des fonctions hépatiques → Mercurius → désadaptation</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #ea580c;">Vers Luèse:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par intoxication majeure et échec des compensations → Aurum</div>
</div>
</div>
<!-- Évolution et stratégie -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #bbf7d0; margin-bottom: 16px; background: rgba(144, 238, 144, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #16a34a;">
🔄 Évolution & Stratégie Thérapeutique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #16a34a;">Évolution diathésique:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Psore → Sycose (par surcharge et suppression) ou Tuberculinisme (par épuisement et déminéralisation). Peut évoluer vers Luèse en cas d'intoxication majeure selon Aurum et Mercurius</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #16a34a;">Stratégie thérapeutique:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Drainage hépatique prioritaire selon Sulfur, ouverture des éliminations physiologiques, éviter toutes suppressions, régulation intestinale, préserver les émonctoires naturels</div>
</div>
</div>
<!-- Note finale -->
<div style="font-size: 0.75rem; text-align: center; padding-top: 12px; border-top: 2px solid ${couleurDiathese}; border-radius: 8px; padding: 8px; background: rgba(144, 238, 144, 0.06);">
<div style="font-weight: 600; color: ${couleurDiathese};">
Approche diathésique intégrative - Dr Jean-Yves Henry
</div>
<div style="color: #6b7280; margin-top: 4px;">
Synthèse des données cliniques et correspondances MTC
</div>
</div>
</div>
`;
}
function generateSycoseContent() {
const couleurDiathese = '#FF6B6B';
return `
<div style="padding: 16px; color: #374151;">
<!-- En-tête avec couleur de la diathèse -->
<div style="text-align: center; padding-bottom: 12px; border-bottom: 4px solid ${couleurDiathese}; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: rgba(255, 107, 107, 0.08);">
<div style="font-weight: bold; font-size: 1.875rem; margin-bottom: 8px; color: ${couleurDiathese};">
🔥 SYCOSE
</div>
<div style="font-size: 0.875rem; color: #374151; font-style: italic; background: white; padding: 8px; border-radius: 4px;">
📚 Concept hahnemannien : Le miasme de la blennorragie - Les excroissances
</div>
<div style="font-size: 0.75rem; color: #4b5563; margin-top: 8px; background: white; padding: 8px; border-radius: 4px;">
Deuxième miasme chronique. Caractérisé par l'hypertrophie tissulaire et les productions pathologiques.
</div>
</div>
<!-- Mécanisme principal - PRIORITÉ -->
<div style="padding: 16px; border-radius: 8px; border: 2px solid ${couleurDiathese}; margin-bottom: 16px; background: rgba(255, 107, 107, 0.13);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: ${couleurDiathese};">
🔑 Mécanisme Principal selon Dr Jean-Yves Henry
</div>
<div style="font-size: 1.125rem; font-weight: 600; text-align: center; padding: 12px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-left: 5px solid ${couleurDiathese}; margin-bottom: 12px;">
HYPER-STRUCTURE pathologique
</div>
<div style="font-size: 0.875rem; background: rgba(239, 246, 255, 1); padding: 12px; border-radius: 4px; margin-top: 12px; border-left: 4px solid #3b82f6;">
<strong>Principe fondamental:</strong> Surcharge et hypertrophie compensatrice. Les membranes vasculaires, les AC, les sueurs. Construction pathologique par accumulation.
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;">
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Niveau:</span> Structure hypertrophiée - Prolifération tissulaire anarchique
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Mouvement:</span> Accumulation et construction pathologique ("Trop de matière")
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Évolution:</span> Phase 1: Hypertrophie fonctionnelle → Phase 2: Tumeurs et excroissances
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Terrain:</span> Surcharge métabolique avec ralentissement des éliminations
</div>
</div>
</div>
<!-- Polychrestes majeurs avec correspondances MTC -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #bfdbfe; margin-bottom: 16px; background: rgba(255, 107, 107, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #1e40af;">
💊 Polychrestes Majeurs & Correspondances MTC
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
KALIUM CARBONICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(255, 107, 107, 0.13); color: ${couleurDiathese};">
PATRON DU FEU - Rouge dans Rouge (auto-renforcement)
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Prison du devoir qui étouffe la joie de vivre
</div>
<div><strong>Énergie MTC:</strong> Rigidité par vide de Yang du Cœur et de la Rate</div>
<div><strong>Modalités:</strong> Aggravation 2-4h matin et froid, amélioration chaleur</div>
<div><strong>Symptômes:</strong> Asthénie profonde, palpitations 2-4h matin, faiblesse généralisée</div>
<div><strong>Mental:</strong> Le fonctionnaire rigide - devoir et culpabilité</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
NATRUM MURIATICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(255, 107, 107, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU MÉTAL DANS LE FEU - Gris dans Rouge
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Sel des larmes non versées qui cristallise l'âme
</div>
<div><strong>Énergie MTC:</strong> Sécheresse par vide de joie → deuil non fait</div>
<div><strong>Modalités:</strong> Aggravation 9-11h et consolation, amélioration solitude et air frais</div>
<div><strong>Symptômes:</strong> Dépression silencieuse, sécheresse muqueuses, céphalées</div>
<div><strong>Mental:</strong> Le romantique blessé - chagrin silencieux et rancune</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
CALCAREA CARBONICA
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(255, 107, 107, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU BOIS DANS LE FEU - Vert dans Rouge
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Forteresse de graisse qui cache la terreur existentielle
</div>
<div><strong>Énergie MTC:</strong> Froid et fatigue par vide de Yang constitutionnel</div>
<div><strong>Modalités:</strong> Aggravation froid humide et effort, amélioration temps sec</div>
<div><strong>Symptômes:</strong> Obésité constitutionnelle, sueurs froides profuses, frilosité</div>
<div><strong>Mental:</strong> Le mollusque sans coquille - peur et lenteur</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
AMMONIUM CARBONICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(255, 107, 107, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DE L'EAU DANS LE FEU - Bleu dans Rouge
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Obstruction des voies respiratoires par accumulation
</div>
<div><strong>Énergie MTC:</strong> Obstruction par glaires avec faiblesse cardiaque</div>
<div><strong>Modalités:</strong> Aggravation temps humide, amélioration temps sec</div>
<div><strong>Symptômes:</strong> Asthénie cardiaque, cyanose, oppression respiratoire</div>
<div><strong>Mental:</strong> Suffocation et oppression - poids de la vie</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
CAUSTICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(255, 107, 107, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DE L'EAU DANS LE FEU - Bleu dans Rouge
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Dessèchement progressif des structures de soutien
</div>
<div><strong>Énergie MTC:</strong> Paralysie progressive par sécheresse des tendons</div>
<div><strong>Modalités:</strong> Aggravation temps sec et froid, amélioration temps humide</div>
<div><strong>Symptômes:</strong> Paralysies progressives, contractures, troubles urinaires</div>
<div><strong>Mental:</strong> Révolte contre l'injustice - paralysie morale et physique</div>
</div>
</div>
</div>
<!-- Nosodes -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #c084fc; margin-bottom: 16px; background: rgba(255, 107, 107, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #7c3aed;">
🧬 Nosodes - Mémoire Miasmatique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="margin-bottom: 8px;">
<span style="font-weight: 600; color: #7c3aed;">Nosode principal:</span>
<span style="margin-left: 8px; font-size: 1.125rem; font-weight: bold; padding: 6px 12px; border-radius: 4px; background: rgba(255, 107, 107, 0.13); color: ${couleurDiathese};">
MEDORRHINUM (Blennorragie)
</span>
</div>
<div>
<span style="font-weight: 600; color: #7c3aed;">Nosodes secondaires:</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;">
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(255, 107, 107, 0.1); color: ${couleurDiathese};">Gonokokkinum</span>
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(255, 107, 107, 0.1); color: ${couleurDiathese};">Thuja nosode</span>
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(255, 107, 107, 0.1); color: ${couleurDiathese};">Natrum sulfuricum</span>
</div>
</div>
</div>
</div>
<!-- Symptômes clés -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #fca5a5; margin-bottom: 16px; background: rgba(255, 107, 107, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #dc2626;">
🎯 Symptômes Clés & Pathogénésie
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Excroissances (verrues, polypes, fibromes)</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Hypertrophie tissulaire (adénopathies)</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Rétention hydro-sodée chronique</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Transpiration profuse et malodorante</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Amélioration par le mouvement et les éliminations</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Aggravation par l'humidité et le froid</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Tendance aux infections génitales récidivantes</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Constipation par atonie avec selles volumineuses</span>
</div>
</div>
</div>
<!-- Influences mutuelles entre diathèses -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #fed7aa; margin-bottom: 16px; background: rgba(255, 107, 107, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #ea580c;">
🔄 Influences Mutuelles Entre Diathèses
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Vers Luèse:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par surcharge massive → destruction tissulaire → Mercurius</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Vers Tuberculinisme:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par épuisement vital → déminéralisation → Calcarea phosphorica</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Vers Psore:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par drainage efficace → restauration des éliminations → Sulfur</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #ea580c;">Vers Adaptation:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Par décompensation hormonale → Sepia, Lachesis</div>
</div>
</div>
<!-- Évolution et stratégie -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #bbf7d0; margin-bottom: 16px; background: rgba(255, 107, 107, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #16a34a;">
🔄 Évolution & Stratégie Thérapeutique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #16a34a;">Évolution diathésique:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Sycose → Luèse (par surcharge massive et destruction) ou Tuberculinisme (par épuisement de la vitalité). Retour possible vers Psore par drainage efficace</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #16a34a;">Stratégie thérapeutique:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Drainage en profondeur prioritaire, éviter toute suppression brutale, soutenir les éliminations naturelles, réguler les surcharges métaboliques, drainer par étapes progressives</div>
</div>
</div>
<!-- Note finale -->
<div style="font-size: 0.75rem; text-align: center; padding-top: 12px; border-top: 2px solid ${couleurDiathese}; border-radius: 8px; padding: 8px; background: rgba(255, 107, 107, 0.06);">
<div style="font-weight: 600; color: ${couleurDiathese};">
Approche diathésique intégrative - Dr Jean-Yves Henry
</div>
<div style="color: #6b7280; margin-top: 4px;">
Synthèse des données cliniques et correspondances MTC
</div>
</div>
</div>
`;
}
function generateAdaptationContent() {
const couleurDiathese = '#FFD700';
return `
<div style="padding: 16px; color: #374151;">
<!-- En-tête avec couleur de la diathèse -->
<div style="text-align: center; padding-bottom: 12px; border-bottom: 4px solid ${couleurDiathese}; border-radius: 8px; padding: 16px; margin-bottom: 16px; background: rgba(255, 215, 0, 0.08);">
<div style="font-weight: bold; font-size: 1.875rem; margin-bottom: 8px; color: ${couleurDiathese};">
🔥 ADAPTATION
</div>
<div style="font-size: 0.875rem; color: #374151; font-style: italic; background: white; padding: 8px; border-radius: 4px;">
📚 Concept hahnemannien : L'équilibre dynamique - Les régulations
</div>
<div style="font-size: 0.75rem; color: #4b5563; margin-top: 8px; background: white; padding: 8px; border-radius: 4px;">
Concept moderne intégrant les mécanismes d'adaptation permanente entre les différents miasmes.
</div>
</div>
<!-- Mécanisme principal - PRIORITÉ -->
<div style="padding: 16px; border-radius: 8px; border: 2px solid ${couleurDiathese}; margin-bottom: 16px; background: rgba(255, 215, 0, 0.13);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: ${couleurDiathese};">
🔑 Mécanisme Principal selon Dr Jean-Yves Henry
</div>
<div style="font-size: 1.125rem; font-weight: 600; text-align: center; padding: 12px; background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-left: 5px solid ${couleurDiathese}; margin-bottom: 12px;">
RÉGULATIONS dynamiques
</div>
<div style="font-size: 0.875rem; background: rgba(239, 246, 255, 1); padding: 12px; border-radius: 4px; margin-top: 12px; border-left: 4px solid #3b82f6;">
<strong>Principe fondamental:</strong> Équilibre permanent entre toutes les diathèses. Adaptation créative aux stress internes et externes selon les cycles naturels.
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;">
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Niveau:</span> Régulation - Maintien de l'homéostasie dynamique
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Mouvement:</span> Adaptation permanente selon les besoins ("Flexibilité créative")
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Évolution:</span> Oscillations harmonieuses entre tous les pôles selon les circonstances
</div>
<div style="background: white; padding: 8px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: ${couleurDiathese};">Terrain:</span> Capacité d'adaptation optimale avec réserves fonctionnelles
</div>
</div>
</div>
<!-- Polychrestes majeurs avec correspondances MTC -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #bfdbfe; margin-bottom: 16px; background: rgba(255, 215, 0, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #1e40af;">
💊 Polychrestes Majeurs & Correspondances MTC
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
MERCURIUS SOLUBILIS
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(255, 215, 0, 0.13); color: ${couleurDiathese};">
PATRON DE LA TERRE - Jaune dans Jaune (auto-renforcement)
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Adaptation impossible qui mène à la putréfaction
</div>
<div><strong>Énergie MTC:</strong> Décomposition par Chaleur-Toxique avec Glaires</div>
<div><strong>Modalités:</strong> Aggravation nuit et changements température, amélioration repos</div>
<div><strong>Symptômes:</strong> Ulcérations avec suppuration, salivation profuse, tremblements</div>
<div><strong>Mental:</strong> Le thermomètre vivant - instabilité et désintégration</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
NITRICUM ACIDUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(255, 215, 0, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DE L'EAU DANS LA TERRE - Bleu dans Jaune
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Corrosion acide des tissus par épuisement adaptatif
</div>
<div><strong>Énergie MTC:</strong> Ulcération par sécheresse et chaleur toxique</div>
<div><strong>Modalités:</strong> Aggravation toucher et bruit, amélioration voyage en voiture</div>
<div><strong>Symptômes:</strong> Ulcérations profondes, fissures, douleurs en écharde</div>
<div><strong>Mental:</strong> Épuisement et destruction - corrosion acide</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
BARYTA CARBONICA
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(255, 215, 0, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU FEU DANS LA TERRE - Rouge dans Jaune
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Blocage du développement par obstruction énergétique
</div>
<div><strong>Énergie MTC:</strong> Vide de Yang de la Rate avec Phlegmes troublant le Shen</div>
<div><strong>Modalités:</strong> Aggravation froid et réunions, amélioration chaleur et solitude</div>
<div><strong>Symptômes:</strong> Retard mental et physique, hypertrophie amygdales, timidité</div>
<div><strong>Mental:</strong> Retard et sclérose - infantilisme persistant</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
PLUMBUM METALLICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(255, 215, 0, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU BOIS DANS LA TERRE - Vert dans Jaune
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Paralysie progressive des fonctions adaptatives
</div>
<div><strong>Énergie MTC:</strong> Blocage de la circulation avec sécheresse progressive</div>
<div><strong>Modalités:</strong> Aggravation mouvement, amélioration pression forte</div>
<div><strong>Symptômes:</strong> Paralysies progressives, coliques violentes, constipation</div>
<div><strong>Mental:</strong> Paralysie et constipation - blocage progressif</div>
</div>
</div>
<div style="background: white; padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;">
<span style="font-weight: bold; font-size: 1.125rem; color: ${couleurDiathese};">
STANNUM METALLICUM
</span>
<span style="font-size: 0.875rem; padding: 4px 8px; border-radius: 4px; background: rgba(255, 215, 0, 0.13); color: ${couleurDiathese};">
AMBASSADEUR DU MÉTAL DANS LA TERRE - Gris dans Jaune
</span>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 0.875rem;">
<div style="background: #f9fafb; padding: 8px; border-radius: 4px;">
<span style="font-weight: 600; color: #1d4ed8;">🔥 Mécanisme clé:</span> Épuisement des capacités de transformation et adaptation
</div>
<div><strong>Énergie MTC:</strong> Vide de Qi du Poumon et de la Rate</div>
<div><strong>Modalités:</strong> Aggravation effort vocal et 10h, amélioration pression forte</div>
<div><strong>Symptômes:</strong> Faiblesse thoracique, toux épuisante, prolapsus</div>
<div><strong>Mental:</strong> Faiblesse et épuisement - effondrement énergétique</div>
</div>
</div>
</div>
<!-- Nosodes -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #c084fc; margin-bottom: 16px; background: rgba(255, 215, 0, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #7c3aed;">
🧬 Nosodes - Mémoire Miasmatique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<div style="margin-bottom: 8px;">
<span style="font-weight: 600; color: #7c3aed;">Nosode principal:</span>
<span style="margin-left: 8px; font-size: 1.125rem; font-weight: bold; padding: 6px 12px; border-radius: 4px; background: rgba(255, 215, 0, 0.13); color: ${couleurDiathese};">
CARCINOSINUM (Adaptation cellulaire)
</span>
</div>
<div>
<span style="font-weight: 600; color: #7c3aed;">Nosodes secondaires:</span>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;">
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(255, 215, 0, 0.1); color: ${couleurDiathese};">Influenzinum</span>
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(255, 215, 0, 0.1); color: ${couleurDiathese};">Pyrogenium</span>
<span style="padding: 4px 8px; border-radius: 4px; font-size: 0.875rem; background: rgba(255, 215, 0, 0.1); color: ${couleurDiathese};">Variolinum</span>
</div>
</div>
</div>
</div>
<!-- Symptômes clés -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #fca5a5; margin-bottom: 16px; background: rgba(255, 215, 0, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #dc2626;">
🎯 Symptômes Clés & Pathogénésie
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;">
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Troubles du rythme (chronobiologie perturbée)</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Déséquilibres hormonaux cycliques</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Alternances symptomatiques prévisibles</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Sensibilité aux changements saisonniers</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Amélioration par la régularité des rythmes</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Troubles de l'adaptation au stress</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Fatigue par surmenage adaptatif</span>
</div>
<div style="background: white; padding: 8px; border-radius: 4px; font-size: 0.875rem; display: flex; align-items: flex-start; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="color: ${couleurDiathese}; margin-right: 8px; font-weight: bold;">•</span>
<span>Symptômes liés aux cycles lunaires/hormonaux</span>
</div>
</div>
</div>
<!-- Influences mutuelles entre diathèses -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #fed7aa; margin-bottom: 16px; background: rgba(255, 215, 0, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #ea580c;">
🔄 Influences Mutuelles Entre Diathèses
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Régulation Psore:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Optimisation des éliminations selon les besoins</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Régulation Sycose:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Contrôle des surcharges par éliminations cycliques</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #ea580c;">Régulation Tuberculinisme:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Compensation des carences par optimisation</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #ea580c;">Régulation Luèse:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Canalisation de l'énergie destructrice vers la créativité</div>
</div>
</div>
<!-- Évolution et stratégie -->
<div style="padding: 16px; border-radius: 8px; border: 1px solid #bbf7d0; margin-bottom: 16px; background: rgba(255, 215, 0, 0.06);">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #16a34a;">
🔄 Évolution & Stratégie Thérapeutique
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 8px;">
<span style="font-weight: 600; color: #16a34a;">Évolution diathésique:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Diathèse de synthèse permettant les transitions harmonieuses entre tous les autres miasmes selon les besoins adaptatifs</div>
</div>
<div style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);">
<span style="font-weight: 600; color: #16a34a;">Stratégie thérapeutique:</span>
<div style="font-size: 0.875rem; margin-top: 4px;">Soutenir les rythmes naturels, réguler sans bloquer, accompagner les transitions, respecter les cycles, optimiser les capacités d'adaptation plutôt que supprimer</div>
</div>
</div>
<!-- Note finale -->
<div style="font-size: 0.75rem; text-align: center; padding-top: 12px; border-top: 2px solid ${couleurDiathese}; border-radius: 8px; padding: 8px; background: rgba(255, 215, 0, 0.06);">
<div style="font-weight: 600; color: ${couleurDiathese};">
Approche diathésique intégrative - Dr Jean-Yves Henry
</div>
<div style="color: #6b7280; margin-top: 4px;">
Synthèse des données cliniques et correspondances MTC
</div>
</div>
</div>
`;
}
// Fonctions utilitaires pour les données MTC
function getSeasonForElement(poleKey) {
const seasons = { BOIS: 'Printemps', FEU: 'Été', TERRE: 'Fin d\'été', METAL: 'Automne', EAU: 'Hiver' };
return seasons[poleKey] || '';
}
function getDirectionForElement(poleKey) {
const directions = { BOIS: 'Est', FEU: 'Sud', TERRE: 'Centre', METAL: 'Ouest', EAU: 'Nord' };
return directions[poleKey] || '';
}
function getColorForElement(poleKey) {
const colors = { BOIS: 'Vert', FEU: 'Rouge', TERRE: 'Jaune', METAL: 'Blanc', EAU: 'Noir' };
return colors[poleKey] || '';
}
function getFlavorForElement(poleKey) {
const flavors = { BOIS: 'Acide', FEU: 'Amère', TERRE: 'Douce', METAL: 'Piquante', EAU: 'Salée' };
return flavors[poleKey] || '';
}
function getEmotionForElement(poleKey) {
const emotions = { BOIS: 'Colère', FEU: 'Joie', TERRE: 'Soucis', METAL: 'Tristesse', EAU: 'Peur' };
return emotions[poleKey] || '';
}
function getSenseOrganForElement(poleKey) {
const organs = { BOIS: 'Yeux', FEU: 'Langue', TERRE: 'Bouche', METAL: 'Nez', EAU: 'Oreilles' };
return organs[poleKey] || '';
}
// Fonctions utilitaires pour les diathèses
function getConceptForDiathese(poleKey) {
const concepts = {
BOIS: 'Le miasme originel - La gale',
FEU: 'Le miasme de la blennorragie - Les excroissances',
TERRE: 'L\'équilibre dynamique - Les régulations',
METAL: 'Le miasme de la tuberculose - La déminéralisation',
EAU: 'Le miasme de la syphilis - La destruction'
};
return concepts[poleKey] || '';
}
function getDescriptionForDiathese(poleKey) {
const descriptions = {
BOIS: 'Premier miasme chronique décrit par Hahnemann. Représente la suppression des éliminations cutanées.',
FEU: 'Deuxième miasme chronique. Caractérisé par l\'hypertrophie tissulaire et les productions pathologiques.',
TERRE: 'Concept moderne intégrant les mécanismes d\'adaptation permanente entre les différents miasmes.',
METAL: 'Troisième miasme chronique. Caractérisé par la déminéralisation, l\'hypersensibilité et l\'instabilité.',
EAU: 'Quatrième miasme chronique. Caractérisé par la destruction tissulaire et les perversions.'
};
return descriptions[poleKey] || '';
}
function getMechanismForDiathese(poleKey) {
const mechanisms = {
BOIS: 'HYPO-FONCTION avec stagnation → chaleur',
FEU: 'HYPER-STRUCTURE pathologique',
TERRE: 'RÉGULATIONS dynamiques',
METAL: 'HYPO-STRUCTURE avec déminéralisation',
EAU: 'HYPER-FONCTION destructrice'
};
return mechanisms[poleKey] || '';
}
function getPrincipleForDiathese(poleKey) {
const principles = {
BOIS: 'Bouclier des émotions en lien avec Vésicule Biliaire. Expression du stress selon mécanisme diathésique.',
FEU: 'Surcharge et hypertrophie compensatrice. Les membranes vasculaires, les AC, les sueurs.',
TERRE: 'Équilibre permanent entre toutes les diathèses. Adaptation créative aux stress internes et externes.',
METAL: 'Déminéralisation progressive. Les muqueuses, les défenses (SRE). Hypersensibilité compensatrice.',
EAU: 'Destruction et perversion. Le tissu conjonctif, le système HLA. Pulsion de mort avec énergie destructrice.'
};
return principles[poleKey] || '';
}
// Fonctions pour les tooltips
function showTooltip(event, content) {
const tooltip = document.getElementById('tooltip');
tooltip.innerHTML = content;
tooltip.style.display = 'block';
tooltip.style.left = Math.min(event.clientX + 10, window.innerWidth - 350) + 'px';
tooltip.style.top = Math.max(event.clientY - 150, 10) + 'px';
if (activeView === 'MTC') {
tooltip.classList.add('mtc');
} else {
tooltip.classList.remove('mtc');
}
}
function hideTooltip() {
const tooltip = document.getElementById('tooltip');
tooltip.style.display = 'none';
}
function getCycleTooltip(cycle) {
const cycleData = {
SHENG: {
title: 'Cycle SHENG - Cycle de Production (Mère-Fils)',
mechanism: 'Le cycle physiologique d\'engendrement : chaque élément nourrit le suivant dans l\'ordre naturel.',
sequence: 'BOIS → FEU → TERRE → MÉTAL → EAU → BOIS',
details: [
'🌱 BOIS nourrit FEU : Le Foie stocke le sang pour le Cœur',
'🔥 FEU nourrit TERRE : Le Cœur réchauffe la Rate-Estomac',
'🌍 TERRE nourrit MÉTAL : La Rate produit le Qi pour le Poumon',
'⚪ MÉTAL nourrit EAU : Le Poumon descend le Qi vers les Reins',
'💧 EAU nourrit BOIS : Les Reins stockent le Jing pour le Foie'
],
pathology: 'Défaillance d\'un élément → épuisement de son "fils" → hyperactivité de la "mère"',
therapeutic: 'Tonifier la mère pour renforcer le fils déficient'
},
KO: {
title: 'Cycle KO - Cycle de Contrôle (Inhibition)',
mechanism: 'Le cycle physiologique de régulation : chaque élément contrôle et modère un autre pour maintenir l\'équilibre.',
sequence: 'BOIS → TERRE → EAU → FEU → MÉTAL → BOIS',
details: [
'🌱 BOIS contrôle TERRE : Le Foie régule la digestion de la Rate',
'🌍 TERRE contrôle EAU : La Rate régule les liquides des Reins',
'💧 EAU contrôle FEU : Les Reins tempèrent la chaleur du Cœur',
'🔥 FEU contrôle MÉTAL : Le Cœur active la circulation du Poumon',
'⚪ MÉTAL contrôle BOIS : Le Poumon tempère l\'impulsivité du Foie'
],
pathology: 'Déséquilibre du contrôle → hyperactivité de l\'élément contrôlé',
therapeutic: 'Rééquilibrer en renforçant l\'élément contrôleur défaillant'
},
CHENG: {
title: 'Cycle CHENG - Cycle de Domination Perverse',
mechanism: 'Cycle pathologique : un élément en excès domine excessivement l\'élément qu\'il devrait normalement contrôler.',
sequence: 'Même ordre que KO mais en pathologie : domination excessive',
details: [
'🌱 BOIS hyperactif → oppresse TERRE : Foie en colère → troubles digestifs',
'🌍 TERRE hyperactive → bloque EAU : Rate humide → œdèmes',
'💧 EAU excessive → éteint FEU : Reins froids → faiblesse cardiaque',
'🔥 FEU excessif → dessèche MÉTAL : Cœur agité → troubles respiratoires',
'⚪ MÉTAL hyperactif → coupe BOIS : Poumon sec → rigidité hépatique'
],
pathology: 'Un élément en plénitude pathologique écrase l\'élément qu\'il contrôle',
therapeutic: 'Disperser l\'élément dominateur et tonifier l\'élément opprimé'
},
WU: {
title: 'Cycle WU - Cycle de Mépris/Contre-Rébellion',
mechanism: 'Cycle pathologique grave : l\'élément normalement contrôlé se rebelle et contre-attaque son contrôleur.',
sequence: 'Inversion du cycle KO : l\'élément contrôlé attaque son contrôleur',
details: [
'🌍 TERRE faible → BOIS la méprise : Rate déficiente → Foie hyperactif',
'💧 EAU insuffisante → TERRE la méprise : Reins vides → Rate humide',
'🔥 FEU défaillant → EAU le méprise : Cœur faible → Reins froids',
'⚪ MÉTAL insuffisant → FEU le méprise : Poumon faible → Cœur agité',
'🌱 BOIS déficient → MÉTAL le méprise : Foie épuisé → Poumon sec'
],
pathology: 'Inversion des rapports de force → décompensation majeure',
therapeutic: 'Urgence : tonifier massivement l\'élément attaqué',
warning: '⚠️ SAMUI : Situation d\'urgence nécessitant intervention immédiate'
}
};
const data = cycleData[cycle];
if (!data) return '';
let html = `
<div style="max-width: 500px;">
<div style="font-weight: bold; font-size: 1.25rem; margin-bottom: 12px; color: #1e40af;">${data.title}</div>
<div style="margin-bottom: 12px; padding: 12px; background: #f3f4f6; border-radius: 8px;">
<div style="font-weight: 600; color: #374151; margin-bottom: 8px;">🔄 Mécanisme :</div>
<div style="font-size: 0.875rem;">${data.mechanism}</div>
</div>
<div style="margin-bottom: 12px; padding: 12px; background: rgba(59, 130, 246, 0.1); border-radius: 8px;">
<div style="font-weight: 600; color: #1e40af; margin-bottom: 8px;">📋 Séquence :</div>
<div style="font-size: 0.875rem; font-family: monospace; text-align: center; padding: 8px; background: white; border-radius: 4px; border: 1px solid #e5e7eb;">
${data.sequence}
</div>
</div>
<div style="margin-bottom: 12px;">
<div style="font-weight: 600; color: #374151; margin-bottom: 8px;">🎯 Détails des relations :</div>
<div style="font-size: 0.75rem;">
${data.details.map(detail => `<div style="background: white; padding: 8px; margin: 4px 0; border-radius: 4px; border-left: 4px solid #3b82f6;">${detail}</div>`).join('')}
</div>
</div>
<div style="margin-bottom: 12px; padding: 12px; background: rgba(239, 68, 68, 0.1); border-radius: 8px;">
<div style="font-weight: 600; color: #dc2626; margin-bottom: 8px;">⚕️ Pathologie :</div>
<div style="font-size: 0.875rem;">${data.pathology}</div>
</div>
<div style="margin-bottom: 12px; padding: 12px; background: rgba(34, 197, 94, 0.1); border-radius: 8px;">
<div style="font-weight: 600; color: #16a34a; margin-bottom: 8px;">💊 Principe thérapeutique :</div>
<div style="font-size: 0.875rem;">${data.therapeutic}</div>
</div>
${data.warning ? `<div style="margin-top: 12px; padding: 12px; background: #fed7aa; border: 2px solid #fb923c; border-radius: 8px;"><div style="font-weight: bold; color: #ea580c; text-align: center;">${data.warning}</div></div>` : ''}
<div style="margin-top: 12px; font-size: 0.75rem; color: #6b7280; text-align: center;">
Dr Jean-Yves Henry - Approche intégrative MTC & Homéopathie
</div>
</div>
`;
return html;
}
function getMeridienTooltip(meridien) {
const meridienData = {
'shao-yang': {
nom: 'Shao Yang',
meridiens: 'Vésicule Biliaire et Triple Réchauffeur',
nature: 'Yang croissant - Feu naissant',
description: 'Méridien charnière entre Yin et Yang. Gère les décisions, le courage et l\'adaptation aux changements.',
horaires: '23h-3h (VB: 23h-1h, TR: 21h-23h)',
pathologies: 'Migraines, vertiges, surdité, troubles de l\'adaptation, indécision'
},
'jue-yin': {
nom: 'Jue Yin',
meridiens: 'Foie et Maître-Cœur',
nature: 'Yin terminal - Vent',
description: 'Méridien du Yin à son maximum. Gère la circulation du sang et les émotions profondes.',
horaires: '1h-3h (F), 19h-21h (MC)',
pathologies: 'Stagnation du Qi, troubles gynécologiques, palpitations, anxiété, colère'
},
'tae-yin': {
nom: 'Tae Yin',
meridiens: 'Rate et Poumon',
nature: 'Yin croissant - Humidité',
description: 'Méridien du Yin naissant. Gère la transformation et le transport des substances nutritives.',
horaires: '3h-7h (P: 3h-5h, RP: 9h-11h)',
pathologies: 'Fatigue, troubles digestifs, allergies, œdèmes, mucosités'
},
'yang-ming': {
nom: 'Yang Ming',
meridiens: 'Estomac et Gros Intestin',
nature: 'Yang brillant - Sécheresse',
description: 'Méridien du Yang à son apogée. Très riche en Qi et sang. Gère la digestion et l\'élimination.',
horaires: '5h-9h (GI: 5h-7h, E: 7h-9h)',
pathologies: 'Troubles digestifs, constipation, fièvre élevée, agitation, boulimie'
},
'tae-yang': {
nom: 'Tae Yang',
meridiens: 'Vessie et Intestin Grêle',
nature: 'Yang maximal - Froid',
description: 'Méridien gouverneur de tous les Yang. Protège l\'organisme des agressions externes.',
horaires: '13h-17h (IG: 13h-15h, V: 15h-17h)',
pathologies: 'Céphalées occipitales, raideur nuque, fièvre, frissons, douleurs dorsales'
},
'shao-yin': {
nom: 'Shao Yin',
meridiens: 'Rein et Cœur',
nature: 'Yin minimal - Chaleur',
description: 'Méridien empereur, siège du Shen (esprit). Gère la vitalité profonde et la volonté.',
horaires: '11h-13h (C), 17h-19h (R)',
pathologies: 'Insomnie, palpitations, anxiété, épuisement, troubles urinaires'
}
};
const data = meridienData[meridien];
if (!data) return '';
return `
<div style="max-width: 350px;">
<div style="font-weight: bold; font-size: 1.125rem; margin-bottom: 8px; color: #1e40af;">${data.nom}</div>
<div style="margin-bottom: 8px;"><strong>Méridiens :</strong> ${data.meridiens}</div>
<div style="margin-bottom: 8px;"><strong>Nature :</strong> ${data.nature}</div>
<div style="margin-bottom: 8px;"><strong>Description :</strong> ${data.description}</div>
<div style="margin-bottom: 8px;"><strong>Horaires :</strong> ${data.horaires}</div>
<div style="margin-bottom: 8px;"><strong>Pathologies types :</strong> ${data.pathologies}</div>
</div>
`;
}
function getFoyerTooltip(foyer) {
const foyerData = {
'foyer-sup': {
nom: 'Foyer Supérieur',
localisation: 'Thorax - Cœur et Poumon',
fonction: 'Gouverne la circulation du Qi et du sang dans tout l\'organisme. Comparable à une "brume" qui diffuse.',
domaine: 'Cardio-respiratoire, circulation énergétique',
pathologies: 'Asthme, palpitations, oppression thoracique, troubles du rythme'
},
'foyer-moy': {
nom: 'Foyer Moyen',
localisation: 'Épigastre - Rate et Estomac',
fonction: 'Gouverne la digestion et la transformation des aliments. Comparable à une "marmite bouillonnante".',
domaine: 'Digestif, transformation, transport',
pathologies: 'Troubles digestifs, ballonnements, nausées, fatigue post-prandiale'
},
'foyer-inf': {
nom: 'Foyer Inférieur',
localisation: 'Abdomen inférieur - Rein et Vessie',
fonction: 'Gouverne l\'excrétion et la reproduction. Comparable à un "marécage" qui draine.',
domaine: 'Génito-urinaire, reproduction, élimination',
pathologies: 'Troubles urinaires, impuissance, stérilité, œdèmes des membres inférieurs'
}
};
const data = foyerData[foyer];
if (!data) return '';
return `
<div style="max-width: 350px;">
<div style="font-weight: bold; font-size: 1.125rem; margin-bottom: 8px; color: #ea580c;">${data.nom}</div>
<div style="margin-bottom: 8px;"><strong>Localisation :</strong> ${data.localisation}</div>
<div style="margin-bottom: 8px;"><strong>Fonction :</strong> ${data.fonction}</div>
<div style="margin-bottom: 8px;"><strong>Domaine :</strong> ${data.domaine}</div>
<div style="margin-bottom: 8px;"><strong>Pathologies :</strong> ${data.pathologies}</div>
</div>
`;
}
// Gestion des événements de la souris pour les tooltips
document.addEventListener('mousemove', function(event) {
const tooltip = document.getElementById('tooltip');
if (tooltip.style.display === 'block') {
tooltip.style.left = Math.min(event.clientX + 10, window.innerWidth - 350) + 'px';
tooltip.style.top = Math.max(event.clientY - 150, 10) + 'px';
}
});
</script>
