<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homéopathie Diathésique - La Parabole du Ballon et de la Ficelle</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, #eef2ff 0%, #ffffff 50%, #faf5ff 100%);
min-height: 100vh;
padding: 1.5rem;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
/* Header */
.header {
text-align: center;
margin-bottom: 3rem;
}
.header-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
border-radius: 9999px;
padding: 0.75rem 1.5rem;
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
margin-bottom: 1.5rem;
}
.header-badge .icon {
color: #4f46e5;
font-size: 1.5rem;
}
.main-title {
font-size: 3rem;
font-weight: bold;
background: linear-gradient(to right, #4f46e5, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.subtitle {
font-size: 1.25rem;
color: #6b7280;
max-width: 48rem;
margin: 0 auto;
}
/* Main grid */
.main-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
@media (min-width: 1024px) {
.main-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Visualization panel */
.viz-panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
border-radius: 1.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
padding: 2rem;
}
.viz-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5rem;
}
.viz-title {
font-size: 1.5rem;
font-weight: bold;
color: #1f2937;
}
.viz-subtitle {
font-weight: 500;
margin-top: 0.25rem;
}
.controls {
display: flex;
gap: 0.5rem;
}
.btn {
padding: 0.75rem;
border-radius: 9999px;
border: none;
cursor: pointer;
transition: all 0.3s;
font-size: 1.25rem;
}
.btn-play {
background: #ef4444;
color: white;
}
.btn-play.paused {
background: #6b7280;
}
.btn-reset {
background: #e5e7eb;
color: #6b7280;
}
.btn:hover {
transform: scale(1.05);
}
/* Visualization area */
.viz-area {
height: 20rem;
background: linear-gradient(to bottom, #e0f2fe, #e0f7fa, #e8f5e8);
border-radius: 1rem;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
}
.petite-fille-container {
width: 100%;
height: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.balloon {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
left: 50%;
transform: translateX(-50%);
transition: all 2s ease-out;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.balloon.yang-high {
background: #ef4444;
animation: bounce 1s infinite;
box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}
.balloon.yang-medium {
background: #f59e0b;
}
.balloon.yang-normal {
background: #10b981;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
40% { transform: translateX(-50%) translateY(-10px); }
60% { transform: translateX(-50%) translateY(-5px); }
}
.string-main {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 3px;
background: #8b4513;
transition: all 2s ease-out;
}
.string-broken {
position: absolute;
width: 2px;
background: #8b4513;
opacity: 0.5;
}
.petite-fille {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
transition: all 1s ease-out;
}
.garnement {
position: absolute;
bottom: 2rem;
right: 3rem;
font-size: 2rem;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.energy-indicator {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(4px);
border-radius: 0.5rem;
padding: 0.75rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
min-width: 120px;
}
.energy-bar {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.energy-bar:last-child {
margin-bottom: 0;
}
.bar-container {
width: 50px;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 3px;
transition: width 1s ease-out;
}
.bar-yang {
background: #dc2626;
}
.bar-yin {
background: #2563eb;
}
.energy-label {
position: absolute;
padding: 0.5rem 1rem;
border-radius: 1rem;
color: white;
font-weight: bold;
font-size: 0.75rem;
}
.label-yang {
background: rgba(220, 38, 38, 0.9);
}
.label-yin {
background: rgba(107, 114, 128, 0.9);
}
/* Description panel */
.description-panel {
margin-top: 1.5rem;
padding: 1.5rem;
border-radius: 0.75rem;
border-left: 4px solid;
}
.description-panel.green {
background: linear-gradient(to right, #f0fdf4, #ecfdf5);
border-color: #16a34a;
}
.description-panel.red {
background: linear-gradient(to right, #fef2f2, #fef7f7);
border-color: #dc2626;
}
.description-panel.orange {
background: linear-gradient(to right, #fffbeb, #fefce8);
border-color: #d97706;
}
.description-panel.yellow {
background: linear-gradient(to right, #fefce8, #fffbeb);
border-color: #eab308;
}
.concept-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: white;
padding: 0.5rem 1rem;
border-radius: 9999px;
margin-top: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Navigation panel */
.nav-panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
border-radius: 1.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.nav-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.step-button {
width: 100%;
text-align: left;
padding: 1rem;
border-radius: 0.75rem;
border: none;
cursor: pointer;
transition: all 0.3s;
margin-bottom: 0.75rem;
background: #f9fafb;
color: #374151;
}
.step-button:last-child {
margin-bottom: 0;
}
.step-button.active {
background: linear-gradient(to right, #4f46e5, #7c3aed);
color: white;
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
transform: scale(1.02);
}
.step-button:hover:not(.active) {
background: #f3f4f6;
transform: scale(1.01);
}
.step-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.step-info h4 {
font-weight: 500;
margin-bottom: 0.25rem;
}
.step-info p {
font-size: 0.875rem;
opacity: 0.8;
}
.step-counter {
background: rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.75rem;
margin-right: 0.5rem;
}
/* Dilutions panel */
.dilutions-panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
border-radius: 1.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
padding: 1.5rem;
}
.dilution-card {
border-radius: 0.75rem;
padding: 1.25rem;
color: white;
margin-bottom: 1rem;
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}
.dilution-card:last-child {
margin-bottom: 0;
}
.dilution-high {
background: linear-gradient(to right, #f87171, #fb923c);
}
.dilution-low {
background: linear-gradient(to right, #60a5fa, #34d399);
}
.dilution-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.dilution-header h4 {
font-weight: bold;
font-size: 1.125rem;
}
.dilution-header p {
font-size: 0.875rem;
opacity: 0.9;
}
.dilution-details {
display: grid;
gap: 0.75rem;
font-size: 0.875rem;
}
.detail-item {
background: rgba(255, 255, 255, 0.2);
border-radius: 0.5rem;
padding: 0.75rem;
}
/* Pathologies section */
.pathologies-section {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
border-radius: 1.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
padding: 2rem;
margin-bottom: 2rem;
}
.section-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.pathology-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.pathology-card {
padding: 1.5rem;
border-radius: 1rem;
border: none;
cursor: pointer;
transition: all 0.3s;
text-align: center;
background: #f9fafb;
color: #374151;
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}
.pathology-card:hover {
transform: scale(1.05);
}
.pathology-card.active {
color: white;
transform: scale(1.05);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.pathology-migraine.active {
background: linear-gradient(to bottom right, #f87171, #ec4899);
}
.pathology-burnout.active {
background: linear-gradient(to bottom right, #fb923c, #ef4444);
}
.pathology-eczema.active {
background: linear-gradient(to bottom right, #f472b6, #ef4444);
}
.pathology-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
}
.pathology-name {
font-weight: bold;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
/* Analysis panel */
.analysis-panel {
background: linear-gradient(to right, #f9fafb, #ffffff);
border-radius: 1rem;
padding: 2rem;
border: 1px solid #e5e7eb;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}
.analysis-header {
display: inline-flex;
align-items: center;
gap: 0.75rem;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 9999px;
margin-bottom: 2rem;
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1);
}
.analysis-grid {
display: grid;
gap: 2rem;
}
@media (min-width: 1024px) {
.analysis-grid {
grid-template-columns: 1fr 1fr;
}
}
.yang-yin-section {
display: grid;
gap: 1.5rem;
}
.yang-panel {
background: #fef2f2;
border-left: 4px solid #f87171;
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.yin-panel {
background: #eff6ff;
border-left: 4px solid #60a5fa;
border-radius: 0.5rem;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.panel-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.panel-title {
font-weight: bold;
font-size: 1.125rem;
flex: 1;
}
.yang-panel .panel-title {
color: #b91c1c;
}
.yin-panel .panel-title {
color: #1d4ed8;
}
.level-badge {
color: white;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: bold;
}
.yang-badge {
background: #ef4444;
}
.yin-badge {
background: #3b82f6;
}
.panel-description {
font-style: italic;
margin-bottom: 1rem;
font-size: 0.875rem;
}
.yang-panel .panel-description {
color: #dc2626;
}
.yin-panel .panel-description {
color: #2563eb;
}
.symptoms-list {
list-style: none;
}
.symptom-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
font-weight: 500;
}
.symptom-item:last-child {
margin-bottom: 0;
}
.symptom-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.yang-dot {
background: #f87171;
}
.yin-dot {
background: #60a5fa;
}
.yang-panel .symptom-item {
color: #b91c1c;
}
.yin-panel .symptom-item {
color: #1d4ed8;
}
/* Treatment section */
.treatment-section {
background: linear-gradient(to bottom right, #f0fdf4, #ecfdf5);
border-radius: 0.75rem;
padding: 1.5rem;
border: 2px solid #bbf7d0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.treatment-title {
font-weight: bold;
color: #15803d;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.25rem;
}
.treatment-steps {
display: grid;
gap: 1.5rem;
}
.treatment-step {
background: white;
border-radius: 0.5rem;
padding: 1.25rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.treatment-high {
border: 2px solid #fed7aa;
}
.treatment-low {
border: 2px solid #bfdbfe;
}
.treatment-result {
border: 2px solid #bbf7d0;
background: #f0fdf4;
}
.treatment-step-title {
font-weight: 600;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.treatment-high .treatment-step-title {
color: #c2410c;
}
.treatment-low .treatment-step-title {
color: #1d4ed8;
}
.treatment-result .treatment-step-title {
color: #15803d;
}
.treatment-prescription {
font-family: 'Courier New', monospace;
font-size: 1.125rem;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.prescription-high {
background: #fed7aa;
color: #c2410c;
border: 1px solid #fdba74;
}
.prescription-low {
background: #bfdbfe;
color: #1d4ed8;
border: 1px solid #93c5fd;
}
.treatment-metaphor {
color: #6b7280;
font-style: italic;
font-size: 0.875rem;
margin-top: 0.5rem;
}
.plus-sign {
text-align: center;
font-size: 1.5rem;
font-weight: bold;
color: #6b7280;
}
.association-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: white;
padding: 0.5rem 1rem;
border-radius: 9999px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
font-weight: 500;
color: #374151;
}
/* Final quote */
.final-quote {
background: linear-gradient(to right, #4f46e5, #7c3aed);
border-radius: 1.5rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
padding: 2rem;
color: white;
text-align: center;
}
.quote-icon {
font-size: 3rem;
margin: 0 auto 1.5rem;
}
.quote-text {
font-size: 1.5rem;
line-height: 1.6;
max-width: 64rem;
margin: 0 auto 1.5rem;
font-style: italic;
}
.quote-author {
color: #c7d2fe;
font-weight: 500;
font-size: 1.125rem;
}
.quote-subtitle {
color: #a5b4fc;
font-size: 0.875rem;
margin-top: 0.5rem;
}
/* Responsive */
@media (max-width: 768px) {
.main-title {
font-size: 2rem;
}
.pathology-grid {
grid-template-columns: 1fr;
}
.analysis-grid {
grid-template-columns: 1fr;
}
.quote-text {
font-size: 1.125rem;
}
}
/* Animations */
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hidden {
display: none;
}
</style>
<div class="container">
<!-- Header -->
<div class="header">
<div class="header-badge">
<span class="icon">🩺</span>
<span style="font-size: 0.875rem; font-weight: 600; color: #6b7280;">Dr Jean-Yves Henry</span>
</div>
<h1 class="main-title">Homéopathie Diathésique</h1>
<p class="subtitle">La Parabole du Ballon et de la Ficelle : Comprendre la dualité Yang-Yin</p>
</div>
<!-- Main grid -->
<div class="main-grid">
<!-- Visualization panel -->
<div class="viz-panel">
<div class="viz-header">
<div>
<h2 class="viz-title" id="stepTitle">L'Équilibre Originel</h2>
<p class="viz-subtitle" id="stepSubtitle" style="color: #16a34a;">La Petite Fille et son Ballon</p>
</div>
<div class="controls">
<button class="btn btn-play paused" id="playBtn" onclick="toggleAutoPlay()">▶️</button>
<button class="btn btn-reset" onclick="resetAnimation()">🔄</button>
</div>
</div>
<div class="viz-area">
<div class="petite-fille-container">
<!-- Ballon -->
<div class="balloon yang-normal" id="balloon" style="top: 35%;">🎈</div>
<!-- Ficelle principale -->
<div class="string-main" id="stringMain" style="top: 45%; height: 45px; opacity: 1;"></div>
<!-- Ficelle cassée -->
<div class="string-broken hidden" id="stringBroken" style="top: 70%; left: 55%; height: 60px; transform: rotate(15deg);"></div>
<!-- Petite fille SVG -->
<div class="petite-fille">
<svg width="60" height="120" viewBox="0 0 60 120">
<!-- Tête -->
<circle cx="30" cy="20" r="12" stroke="#2c3e50" stroke-width="2" fill="none"/>
<!-- Cheveux -->
<path d="M18 12 Q25 5 30 10 Q35 5 42 12" stroke="#2c3e50" stroke-width="2" fill="none"/>
<path d="M21 16 Q28 8 32 12 Q38 8 39 16" stroke="#2c3e50" stroke-width="1.5" fill="none"/>
<!-- Visage -->
<circle cx="25" cy="18" r="1" fill="#2c3e50"/>
<circle cx="35" cy="18" r="1" fill="#2c3e50"/>
<path d="M27 24 Q30 26 33 24" stroke="#2c3e50" stroke-width="1" fill="none"/>
<!-- Cou -->
<line x1="30" y1="32" x2="30" y2="40" stroke="#2c3e50" stroke-width="2"/>
<!-- Corps (robe) -->
<path d="M22 40 L38 40 L42 75 L18 75 Z" stroke="#2c3e50" stroke-width="2" fill="none"/>
<!-- Motifs -->
<circle cx="26" cy="50" r="1.5" stroke="#2c3e50" stroke-width="1" fill="none"/>
<circle cx="34" cy="58" r="1.5" stroke="#2c3e50" stroke-width="1" fill="none"/>
<circle cx="30" cy="65" r="1.5" stroke="#2c3e50" stroke-width="1" fill="none"/>
<!-- Bras -->
<path d="M22 45 Q12 50 10 65 Q8 72 12 76" stroke="#2c3e50" stroke-width="2" fill="none"/>
<path d="M38 45 Q48 50 50 65 Q52 72 48 76" stroke="#2c3e50" stroke-width="2" fill="none"/>
<!-- Mains -->
<circle cx="12" cy="76" r="3" stroke="#2c3e50" stroke-width="2" fill="none"/>
<ellipse cx="48" cy="76" rx="4" ry="3" stroke="#2c3e50" stroke-width="2" fill="none"/>
<!-- Jambes -->
<line x1="24" y1="75" x2="24" y2="105" stroke="#2c3e50" stroke-width="2"/>
<line x1="36" y1="75" x2="36" y2="105" stroke="#2c3e50" stroke-width="2"/>
<!-- Pieds -->
<ellipse cx="24" cy="110" rx="6" ry="3" stroke="#2c3e50" stroke-width="2" fill="none"/>
<ellipse cx="36" cy="110" rx="6" ry="3" stroke="#2c3e50" stroke-width="2" fill="none"/>
<!-- Ficelle de la main au ballon -->
<line x1="48" y1="76" x2="30" y2="-50" stroke="#8b4513" stroke-width="2" id="handString"/>
</svg>
</div>
<!-- Garnement -->
<div class="garnement hidden" id="garnement">
😈<br><span style="font-size: 0.8rem; color: #dc2626; font-weight: bold;">✂️ Coupure!</span>
</div>
<!-- Indicateur d'énergie -->
<div class="energy-indicator">
<div style="font-size: 0.75rem; font-weight: bold; margin-bottom: 0.5rem; text-align: center;">Énergies</div>
<div class="energy-bar">
<span style="font-size: 0.75rem; color: #dc2626;">☯</span>
<div class="bar-container">
<div class="bar-fill bar-yang" id="yangBar" style="width: 50%;"></div>
</div>
<span style="font-size: 0.75rem;" id="yangPercent">50%</span>
</div>
<div class="energy-bar">
<span style="font-size: 0.75rem; color: #2563eb;">☯</span>
<div class="bar-container">
<div class="bar-fill bar-yin" id="yinBar" style="width: 50%;"></div>
</div>
<span style="font-size: 0.75rem;" id="yinPercent">50%</span>
</div>
</div>
<!-- Étiquettes Yang/Yin -->
<div class="energy-label label-yang hidden" id="yangLabel" style="top: 20%; right: 10%;">Yang ↑</div>
<div class="energy-label label-yin hidden" id="yinLabel" style="bottom: 15%; right: 5%;">Yin ↓</div>
</div>
</div>
<div class="description-panel green" id="descriptionPanel">
<p id="stepDescription">Dans notre organisme, comme pour la petite fille tenant son ballon, tout fonctionne en harmonie. Les fonctions (Yang) et les structures (Yin) sont en parfait équilibre. La ficelle relie harmonieusement le ballon à la main.</p>
<div class="concept-badge">
<span>💡</span>
<span id="stepConcept">Harmonie fonctionnelle</span>
</div>
</div>
</div>
<!-- Navigation and concepts -->
<div>
<!-- Navigation -->
<div class="nav-panel">
<h3 class="nav-title">
<span>🎯</span>
Progression de la Parabole
</h3>
<div id="stepButtons">
<!-- Generated by JavaScript -->
</div>
</div>
<!-- Dilutions -->
<div class="dilutions-panel">
<h3 class="nav-title">
<span>⚡</span>
Les Deux Approches Thérapeutiques
</h3>
<div class="dilution-card dilution-high">
<div class="dilution-header">
<span style="font-size: 1.5rem;">⚡</span>
<div>
<h4>Hautes Dilutions</h4>
<p>30CH - 200CH - 1000CH</p>
</div>
</div>
<div class="dilution-details">
<div class="detail-item"><strong>🎯 Action :</strong> Disperser l'excès Yang</div>
<div class="detail-item"><strong>⚙️ Mécanisme :</strong> Action énergétique - Information pure</div>
<div class="detail-item"><strong>🔍 Cible :</strong> Fonction (Ballon qui s'envole)</div>
<div class="detail-item"><strong>🪄 Métaphore :</strong> 🎈 Ramener le ballon</div>
</div>
</div>
<div class="dilution-card dilution-low">
<div class="dilution-header">
<span style="font-size: 1.5rem;">🛡️</span>
<div>
<h4>Basses Dilutions</h4>
<p>4CH - 5CH - 6CH</p>
</div>
</div>
<div class="dilution-details">
<div class="detail-item"><strong>🎯 Action :</strong> Nourrir la structure Yin</div>
<div class="detail-item"><strong>⚙️ Mécanisme :</strong> Action matérielle - Nutrition cellulaire</div>
<div class="detail-item"><strong>🔍 Cible :</strong> Structure (Ficelle qui retombe)</div>
<div class="detail-item"><strong>🪄 Métaphore :</strong> 🪢 Réparer la ficelle</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pathologies section -->
<div class="pathologies-section">
<h3 class="section-title">
<span>❤️</span>
Exemples Pathologiques selon Dr Jean-Yves Henry
</h3>
<div class="pathology-grid">
<button class="pathology-card pathology-migraine" onclick="selectPathology('migraine')">
<div class="pathology-icon">🧠</div>
<div class="pathology-name">Migraine</div>
<p style="font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem;">Cliquez pour analyser</p>
</button>
<button class="pathology-card pathology-burnout" onclick="selectPathology('burn-out')">
<div class="pathology-icon">🔥</div>
<div class="pathology-name">Syndrome de Burn-out</div>
<p style="font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem;">Cliquez pour analyser</p>
</button>
<button class="pathology-card pathology-eczema" onclick="selectPathology('eczema')">
<div class="pathology-icon">🔴</div>
<div class="pathology-name">Eczéma Chronique</div>
<p style="font-size: 0.875rem; opacity: 0.8; margin-top: 0.5rem;">Cliquez pour analyser</p>
</button>
</div>
<!-- Analysis panel -->
<div class="analysis-panel hidden" id="analysisPanel">
<!-- Content generated by JavaScript -->
</div>
</div>
<!-- Final quote -->
<div class="final-quote">
<div class="quote-icon">🧠</div>
<blockquote class="quote-text">
"Si l'on se contente de ramener le ballon (rôle du remède homéopathique en haute dilution)
sans rattacher la ficelle - nourrir la structure défaillante (rôle des basses dilutions) -
l'équilibre ne sera pas rétabli durablement."
</blockquote>
<div class="quote-author">— Dr Jean-Yves Henry</div>
<div class="quote-subtitle">Homéopathie Diathésique - La thérapeutique tamponnée</div>
</div>
</div>
<script>
// Data
const steps = [
{
id: 'intro',
title: 'L\'Équilibre Originel',
subtitle: 'La Petite Fille et son Ballon',
description: 'Dans notre organisme, comme pour la petite fille tenant son ballon, tout fonctionne en harmonie. Les fonctions (Yang) et les structures (Yin) sont en parfait équilibre. La ficelle relie harmonieusement le ballon à la main.',
concept: 'Harmonie fonctionnelle',
energy: { yang: 50, yin: 50 },
textColor: '#16a34a',
panelClass: 'green'
},
{
id: 'rupture',
title: 'La Rupture Pathologique',
subtitle: 'Quand la Ficelle se Brise',
description: 'Un événement pathogène (stress, toxine, trauma) "coupe la ficelle" comme un garnement avec son couteau. Instantanément, le ballon s\'envole (hyperfonction Yang) tandis que la ficelle retombe (hypostructure Yin). C\'est le moment précis où l\'équilibre se rompt.',
concept: 'Déséquilibre brutal',
energy: { yang: 85, yin: 25 },
textColor: '#dc2626',
panelClass: 'red'
},
{
id: 'consequences',
title: 'Les Conséquences Duelles',
subtitle: 'Yang ↑ et Yin ↓ Simultanés',
description: 'Toute pathologie présente cette dualité selon Dr Jean-Yves Henry : des symptômes d\'excès (Yang élevé) coexistent avec des signes de faiblesse structurelle (Yin bas). Le ballon s\'élève pendant que la ficelle s\'affaisse.',
concept: 'Dualité pathologique',
energy: { yang: 80, yin: 20 },
textColor: '#d97706',
panelClass: 'orange'
},
{
id: 'traitement_partiel',
title: 'Le Piège du Traitement Partiel',
subtitle: 'Ramener le Ballon sans Réparer',
description: 'Traiter seulement les symptômes Yang avec des hautes dilutions (ramener le ballon) sans nourrir le Yin avec des basses dilutions (réparer la ficelle) crée un équilibre précaire. La rechute est inévitable car la structure reste défaillante.',
concept: 'Équilibre précaire',
energy: { yang: 60, yin: 25 },
textColor: '#eab308',
panelClass: 'yellow'
},
{
id: 'solution',
title: 'La Solution Intégrative',
subtitle: 'Ballon + Ficelle = Guérison',
description: 'L\'approche diathésique de Dr Henry traite simultanément les deux aspects : hautes dilutions (calmer le Yang et ramener le ballon) + basses dilutions (nourrir le Yin et réparer la ficelle). La thérapeutique est ainsi tamponnée et les aggravations rarissimes.',
concept: 'Thérapie complète',
energy: { yang: 50, yin: 50 },
textColor: '#16a34a',
panelClass: 'green'
}
];
const pathologies = {
'migraine': {
name: 'Migraine',
icon: '🧠',
color: 'linear-gradient(to bottom right, #f87171, #ec4899)',
yang: {
symptoms: ['Douleur lancinante', 'Vascularisation excessive', 'Inflammation méningée', 'Photophobie'],
level: 85,
description: 'Le "ballon s\'envole" : hypervascularisation cérébrale'
},
yin: {
symptoms: ['Épuisement nerveux', 'Déficience veineuse', 'Fragilité vasculaire', 'Fatigue post-crise'],
level: 25,
description: 'La "ficelle retombe" : structures nerveuses épuisées'
},
treatment: {
high: 'Belladonna 30CH - Lachesis 200CH',
low: 'Natrum mur 6CH - Magnesia phos 5CH',
action: 'Calmer l\'inflammation vasculaire + Nourrir le système nerveux',
explanation: 'Ramener le ballon (vascularisation) et réparer la ficelle (structures nerveuses)'
}
},
'burn-out': {
name: 'Syndrome de Burn-out',
icon: '🔥',
color: 'linear-gradient(to bottom right, #fb923c, #ef4444)',
yang: {
symptoms: ['Ruminations mentales', 'Agitation nocturne', 'Hypervigilance', 'Irritabilité'],
level: 78,
description: 'Le "ballon s\'envole" : hyperactivité mentale compensatoire'
},
yin: {
symptoms: ['Épuisement surrénalien', 'Déficit en neurotransmetteurs', 'Fatigue chronique', 'Dépression'],
level: 30,
description: 'La "ficelle retombe" : structures énergétiques épuisées'
},
treatment: {
high: 'Arsenicum 30CH - Phosphorus 200CH',
low: 'Phosphoric acid 6CH - Kali phos 5CH',
action: 'Calmer l\'agitation mentale + Nourrir les surrénales',
explanation: 'Ramener le ballon (mental) et réparer la ficelle (énergie vitale)'
}
},
'eczema': {
name: 'Eczéma Chronique',
icon: '🔴',
color: 'linear-gradient(to bottom right, #f472b6, #ef4444)',
yang: {
symptoms: ['Inflammation cutanée', 'Démangeaisons intenses', 'Chaleur locale', 'Rougeurs'],
level: 82,
description: 'Le "ballon s\'envole" : processus inflammatoire excessif'
},
yin: {
symptoms: ['Barrière cutanée altérée', 'Sécheresse', 'Fragilité tissulaire', 'Cicatrisation lente'],
level: 28,
description: 'La "ficelle retombe" : structure cutanée déficiente'
},
treatment: {
high: 'Sulfur 30CH - Graphites 200CH',
low: 'Petroleum 6CH - Silicia 5CH',
action: 'Calmer l\'inflammation + Réparer la barrière cutanée',
explanation: 'Ramener le ballon (inflammation) et réparer la ficelle (peau)'
}
}
};
// State
let currentStep = 0;
let isAutoPlay = false;
let autoPlayInterval = null;
let selectedPathology = null;
// Initialize
document.addEventListener('DOMContentLoaded', function() {
createStepButtons();
updateVisualization();
});
function createStepButtons() {
const container = document.getElementById('stepButtons');
container.innerHTML = '';
steps.forEach((step, index) => {
const button = document.createElement('button');
button.className = `step-button ${index === currentStep ? 'active' : ''}`;
button.onclick = () => setCurrentStep(index);
button.innerHTML = `
<div class="step-content">
<div class="step-info">
<h4>${step.title}</h4>
<p>${step.subtitle}</p>
</div>
<div style="display: flex; align-items: center;">
<span class="step-counter">${index + 1}/5</span>
<span>→</span>
</div>
</div>
`;
container.appendChild(button);
});
}
function setCurrentStep(index) {
currentStep = index;
updateVisualization();
updateStepButtons();
}
function updateStepButtons() {
const buttons = document.querySelectorAll('.step-button');
buttons.forEach((button, index) => {
button.className = `step-button ${index === currentStep ? 'active' : ''}`;
});
}
function updateVisualization() {
const step = steps[currentStep];
// Update text content
document.getElementById('stepTitle').textContent = step.title;
document.getElementById('stepSubtitle').textContent = step.subtitle;
document.getElementById('stepSubtitle').style.color = step.textColor;
document.getElementById('stepDescription').textContent = step.description;
document.getElementById('stepConcept').textContent = step.concept;
// Update panel styling
const panel = document.getElementById('descriptionPanel');
panel.className = `description-panel ${step.panelClass}`;
// Update balloon
const balloon = document.getElementById('balloon');
const balloonY = step.energy.yang > 70 ? 15 : step.energy.yang > 40 ? 35 : 25;
balloon.style.top = balloonY + '%';
balloon.className = 'balloon ';
if (step.energy.yang > 70) {
balloon.className += 'yang-high';
} else if (step.energy.yang > 40) {
balloon.className += 'yang-medium';
} else {
balloon.className += 'yang-normal';
}
// Update string
const stringMain = document.getElementById('stringMain');
const stringBroken = document.getElementById('stringBroken');
const handString = document.getElementById('handString');
const stringIntact = step.energy.yin > 40;
const stringLength = stringIntact ? 45 : 25;
const stringOpacity = step.energy.yin < 30 ? 0.4 : 1;
stringMain.style.height = stringLength + 'px';
stringMain.style.opacity = stringOpacity;
handString.style.opacity = stringIntact ? 1 : 0.3;
if (!stringIntact) {
stringBroken.classList.remove('hidden');
} else {
stringBroken.classList.add('hidden');
}
// Update garnement
const garnement = document.getElementById('garnement');
if (step.id === 'rupture') {
garnement.classList.remove('hidden');
} else {
garnement.classList.add('hidden');
}
// Update energy bars
const yangBar = document.getElementById('yangBar');
const yinBar = document.getElementById('yinBar');
const yangPercent = document.getElementById('yangPercent');
const yinPercent = document.getElementById('yinPercent');
yangBar.style.width = step.energy.yang + '%';
yinBar.style.width = step.energy.yin + '%';
yangPercent.textContent = step.energy.yang + '%';
yinPercent.textContent = step.energy.yin + '%';
// Update energy labels
const yangLabel = document.getElementById('yangLabel');
const yinLabel = document.getElementById('yinLabel');
if (step.energy.yang > 60) {
yangLabel.classList.remove('hidden');
} else {
yangLabel.classList.add('hidden');
}
if (step.energy.yin < 40) {
yinLabel.classList.remove('hidden');
} else {
yinLabel.classList.add('hidden');
}
}
function toggleAutoPlay() {
isAutoPlay = !isAutoPlay;
const playBtn = document.getElementById('playBtn');
if (isAutoPlay) {
playBtn.textContent = '⏸️';
playBtn.className = 'btn btn-play';
autoPlayInterval = setInterval(() => {
currentStep = (currentStep + 1) % steps.length;
updateVisualization();
updateStepButtons();
}, 5000);
} else {
playBtn.textContent = '▶️';
playBtn.className = 'btn btn-play paused';
if (autoPlayInterval) {
clearInterval(autoPlayInterval);
autoPlayInterval = null;
}
}
}
function resetAnimation() {
if (autoPlayInterval) {
clearInterval(autoPlayInterval);
autoPlayInterval = null;
}
isAutoPlay = false;
const playBtn = document.getElementById('playBtn');
playBtn.textContent = '▶️';
playBtn.className = 'btn btn-play paused';
currentStep = 0;
updateVisualization();
updateStepButtons();
}
function selectPathology(pathologyId) {
selectedPathology = pathologyId;
const pathology = pathologies[pathologyId];
// Update pathology cards
document.querySelectorAll('.pathology-card').forEach(card => {
card.classList.remove('active');
});
const selectedCard = document.querySelector(`.pathology-${pathologyId}`);
if (selectedCard) {
selectedCard.classList.add('active');
}
// Show analysis panel
const analysisPanel = document.getElementById('analysisPanel');
analysisPanel.classList.remove('hidden');
analysisPanel.classList.add('fade-in');
// Generate analysis content
analysisPanel.innerHTML = `
<div class="analysis-header" style="background: ${pathology.color};">
<span style="font-size: 1.5rem;">${pathology.icon}</span>
<span style="font-weight: bold; font-size: 1.25rem;">${pathology.name}</span>
</div>
<div class="analysis-grid">
<div class="yang-yin-section">
<div class="yang-panel">
<div class="panel-header">
<span style="font-size: 1.5rem;">🎈</span>
<div class="panel-title">Yang - Hyperfonction</div>
<div class="level-badge yang-badge">${pathology.yang.level}%</div>
</div>
<p class="panel-description">${pathology.yang.description}</p>
<ul class="symptoms-list">
${pathology.yang.symptoms.map(symptom => `
<li class="symptom-item">
<div class="symptom-dot yang-dot"></div>
<span>${symptom}</span>
</li>
`).join('')}
</ul>
</div>
<div class="yin-panel">
<div class="panel-header">
<span style="font-size: 1.5rem;">🪢</span>
<div class="panel-title">Yin - Hypostructure</div>
<div class="level-badge yin-badge">${pathology.yin.level}%</div>
</div>
<p class="panel-description">${pathology.yin.description}</p>
<ul class="symptoms-list">
${pathology.yin.symptoms.map(symptom => `
<li class="symptom-item">
<div class="symptom-dot yin-dot"></div>
<span>${symptom}</span>
</li>
`).join('')}
</ul>
</div>
</div>
<div class="treatment-section">
<h4 class="treatment-title">
<span>🎯</span>
Traitement Intégré Dr Henry
</h4>
<div class="treatment-steps">
<div class="treatment-step treatment-high">
<div class="treatment-step-title">
<span>⚡</span>
<span>Hautes Dilutions</span>
</div>
<div class="treatment-prescription prescription-high">
${pathology.treatment.high}
</div>
<p class="treatment-metaphor">🎈 Ramener le ballon</p>
</div>
<div class="plus-sign">
<div class="association-badge">
<span>+</span>
<span>Association thérapeutique</span>
</div>
</div>
<div class="treatment-step treatment-low">
<div class="treatment-step-title">
<span>🛡️</span>
<span>Basses Dilutions</span>
</div>
<div class="treatment-prescription prescription-low">
${pathology.treatment.low}
</div>
<p class="treatment-metaphor">🪢 Réparer la ficelle</p>
</div>
<div class="treatment-step treatment-result">
<div class="treatment-step-title">
<span>🎯</span>
<span>Résultat thérapeutique</span>
</div>
<p style="font-weight: 500; margin-bottom: 0.5rem;">${pathology.treatment.action}</p>
<p style="font-style: italic; color: #6b7280; font-size: 0.875rem;">${pathology.treatment.explanation}</p>
</div>
</div>
</div>
</div>
`;
}
</script>
