code_pentagrammeMTC – Centre de Thérapies Sion

<!DOCTYPE html>

<head>

<title>Pentagramme MTC – Médecine Traditionnelle Chinoise</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;

}

.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 h3 {

font-weight: bold;

font-size: 0.875rem;

margin-bottom: 8px;

}

.info-box .element-item {

display: flex;

align-items: center;

margin-bottom: 4px;

font-size: 0.8rem;

}

.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;

background: rgba(59, 130, 246, 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;

}

/* Styles pour la fenêtre modale */

.modal-overlay {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0, 0, 0, 0.6);

display: none;

z-index: 100;

backdrop-filter: blur(2px);

}

.modal-window {

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: white;

border-radius: 16px;

box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

max-width: 800px;

width: 90%;

max-height: 90vh;

display: none;

z-index: 101;

overflow: hidden;

}

.modal-header {

padding: 20px;

background: linear-gradient(135deg, #3b82f6, #1e40af);

color: white;

position: relative;

}

.modal-title {

font-size: 1.5rem;

font-weight: bold;

margin: 0;

}

.modal-subtitle {

font-size: 0.875rem;

margin-top: 4px;

opacity: 0.9;

}

.modal-close {

position: absolute;

top: 20px;

right: 20px;

background: rgba(255, 255, 255, 0.2);

border: none;

border-radius: 50%;

width: 32px;

height: 32px;

cursor: pointer;

color: white;

font-size: 20px;

display: flex;

align-items: center;

justify-content: center;

transition: all 0.2s;

}

.modal-close:hover {

background: rgba(255, 255, 255, 0.3);

transform: rotate(90deg);

}

.modal-body {

padding: 20px;

overflow-y: auto;

max-height: calc(90vh – 100px);

}

.info-section {

margin-bottom: 20px;

padding: 16px;

background: #f9fafb;

border-radius: 8px;

border-left: 4px solid;

}

.info-section h3 {

font-size: 1.125rem;

font-weight: 600;

margin-bottom: 12px;

color: #374151;

}

.info-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 12px;

margin-top: 12px;

}

.info-item {

padding: 8px;

background: white;

border-radius: 4px;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

}

.info-label {

font-weight: 600;

color: #4b5563;

font-size: 0.75rem;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.info-value {

color: #1f2937;

margin-top: 4px;

}

@media (max-width: 768px) {

.title {

font-size: 2rem;

}

.info-box {

max-width: 280px;

}

.cycles-container {

gap: 40px;

flex-wrap: wrap;

}

.info-grid {

grid-template-columns: 1fr;

}

</style>

</head>

<body>

<!– En-tête –>

<h1 class= »title »>Le Pentagramme MTC</h1>

<h2 class= »subtitle »>Les 5 éléments de la Médecine Traditionnelle Chinoise</h2>

</div>

<!– Légende –>

<defs>

</marker>

</marker>

</defs>

<text x= »150″ y= »20″ text-anchor= »middle » fill= »white » font-size= »14″ font-weight= »600″>physiologie</text>

<text x= »150″ y= »50″ text-anchor= »middle » fill= »white » font-size= »14″ font-weight= »600″>pathologie</text>

</svg>

</div>

<!– SVG principal –>

<defs>

</radialGradient>

</marker>

</defs>

<!– Grand cercle central –>

<!– Lignes du pentagramme –>

<!– Zones des 5 pôles –>

<!– Textes MTC –>

<text x= »887″ y= »610″ text-anchor= »middle » fill= »white » font-size= »14″ font-weight= »600″>Tae Yin (humidité)</text>

<text x= »887″ y= »630″ text-anchor= »middle » fill= »white » font-size= »14″ font-weight= »600″>Yang Ming (sécheresse)</text>

<text x= »512″ y= »500″ text-anchor= »middle » fill= »black » font-size= »14″ font-weight= »600″>Tae Yang (froid)</text>

<text x= »512″ y= »550″ text-anchor= »middle » fill= »black » font-size= »14″ font-weight= »600″>Shao Yin (chaleur)</text>

<text x= »512″ y= »450″ text-anchor= »middle » fill= »black » font-size= »12″>Foyer supérieur</text>

<text x= »512″ y= »610″ text-anchor= »middle » fill= »black » font-size= »12″>Foyer inférieur</text>

<text x= »512″ y= »530″ text-anchor= »middle » fill= »black » font-size= »12″>Foyer moyen</text>

</g>

</svg>

</div>

<!– Boîte d’informations –>

<h3>Les 5 Éléments MTC</h3>

<p style= »margin-bottom: 8px; font-size: 0.8rem; »>Les 5 éléments avec leurs organes associés.</p>

<div style= »font-weight: 600; color: #1e40af; margin-bottom: 4px; »>Cliquez sur les cercles pour voir :</div>

<div style= »color: #1d4ed8; font-size: 0.7rem; »>• Pathologies Yin/Yang détaillées</div>

<div style= »color: #1d4ed8; font-size: 0.7rem; »>• Vide de Sang (5 symptômes)</div>

<div style= »color: #1d4ed8; font-size: 0.7rem; »>• Points d’acupuncture majeurs</div>

</div>

<!– Cycles MTC –>

</g>

</svg>

<div class= »cycle-name »>SHENG</div>

<div class= »cycle-subtitle »>engendrement structures</div>

</div>

</g>

</svg>

<div class= »cycle-subtitle »>contrôle fonction</div>

</div>

</g>

</svg>

<div class= »cycle-name »>CHENG</div>

<div class= »cycle-subtitle »>domination perverse</div>

</div>

</g>

</svg>

<div class= »cycle-subtitle »>mépris grave</div>

</div>

<!– Signature –>

<div class= »signature »>Docteur Jean-Yves HENRY</div>

<!– Fenêtre modale –>

<h2 class= »modal-title » id= »modalTitle »>Titre</h2>

<p class= »modal-subtitle » id= »modalSubtitle »>Sous-titre</p>

</div>

<!– Le contenu sera injecté ici –>

</div>

// Configuration complète des éléments MTC

const elementsMTC = {

BOIS: {

element: ‘BOIS’,

organe: ‘Foie’,

viscere: ‘Vésicule Biliaire’,

color: ‘#228b22’,

details: [‘Androgènes • Tendons’, ‘Muscles’],

saison: ‘Printemps’,

direction: ‘Est’,

saveur: ‘Acide’,

emotion: ‘Colère’,

tissu: ‘Tendons’,

sens: ‘Yeux’,

climat: ‘Vent’,

horaire: ‘1h-3h / 23h-1h’,

pathologiesYin: [

‘Vide de Sang du Foie : vision floue, vertiges, règles peu abondantes’,

‘Vide de Yin du Foie : sécheresse oculaire, irritabilité nocturne’,

‘Stagnation du Qi du Foie : distension hypochondriaque, soupirs’,

‘Froid dans le méridien du Foie : douleurs génitales, hernie’,

‘Vent interne par vide de Sang : tremblements, spasmes’

pathologiesYang: [

‘Montée du Yang du Foie : céphalées temporales, hypertension’,

‘Feu du Foie : yeux rouges, colère explosive, acouphènes’,

‘Vent du Foie : vertiges soudains, AVC, convulsions’,

‘Chaleur-Humidité Foie-VB : jaunisse, goût amer, leucorrhées’,

‘Stase de Sang du Foie : masses abdominales, règles douloureuses’

videSang: [

‘Insomnie avec difficultés d\’endormissement’,

‘Ongles pâles et cassants’,

‘Vision trouble et mouches volantes’,

‘Crampes musculaires nocturnes’,

‘Règles peu abondantes ou aménorrhée’

points: [

‘F3 (Taichong) : point source, calme le Yang’,

‘F8 (Ququan) : tonifie le Sang du Foie’,

‘F14 (Qimen) : point Mu, harmonise Foie-Estomac’,

‘VB34 (Yanglingquan) : détend les tendons’,

‘VB20 (Fengchi) : disperse le Vent’

]

FEU: {

element: ‘FEU’,

organe: ‘Cœur’,

viscere: ‘Intestin Grêle’,

color: ‘#ff4500’,

details: [‘Int. grêle • Thyroïde’, ‘Vaisseaux’],

saison: ‘Été’,

direction: ‘Sud’,

saveur: ‘Amère’,

emotion: ‘Joie’,

tissu: ‘Vaisseaux’,

sens: ‘Langue’,

climat: ‘Chaleur’,

horaire: ’11h-13h / 13h-15h’,

pathologiesYin: [

‘Vide de Qi du Cœur : palpitations d\’effort, fatigue’,

‘Vide de Yang du Cœur : frilosité, membres froids’,

‘Vide de Sang du Cœur : insomnie, mémoire faible’,

‘Vide de Yin du Cœur : sueurs nocturnes, bouche sèche’,

‘Effondrement du Yang : sueurs froides, pouls imperceptible’

pathologiesYang: [

‘Feu du Cœur : agitation mentale, aphtes buccaux’,

‘Glaires-Feu troublant le Cœur : confusion, comportement maniaque’,

‘Chaleur dans le Sang : éruptions cutanées, saignements’,

‘Stase de Sang du Cœur : douleur thoracique fixe, cyanose’,

‘Feu troublant le Shen : insomnie sévère, délire’

videSang: [

‘Palpitations au repos’,

‘Teint pâle et terne’,

‘Anxiété et inquiétude constante’,

‘Difficultés de concentration’,

‘Rêves perturbants’

points: [

‘C7 (Shenmen) : calme le Shen, point source’,

‘C5 (Tongli) : régule le rythme cardiaque’,

‘PC6 (Neiguan) : ouvre la poitrine’,

‘Ren17 (Danzhong) : point Mu du MC’,

‘DM11 (Shendao) : calme l\’esprit’

]

TERRE: {

element: ‘TERRE’,

organe: ‘Rate’,

viscere: ‘Estomac’,

color: ‘#ffd700’,

details: [‘Hypophyse • Cortex’, ‘Sein’],

saison: ‘Fin d\’été’,

direction: ‘Centre’,

saveur: ‘Douce’,

emotion: ‘Soucis’,

tissu: ‘Chair’,

sens: ‘Bouche’,

climat: ‘Humidité’,

horaire: ‘9h-11h / 7h-9h’,

pathologiesYin: [

‘Vide de Qi de la Rate : fatigue digestive, selles molles’,

‘Vide de Yang de Rate : diarrhée matinale, œdèmes’,

‘Effondrement du Qi : ptoses organiques, hémorroïdes’,

‘Rate ne contrôle pas le Sang : hémorragies, ecchymoses’,

‘Froid-Humidité envahit Rate : ballonnements, absence d\’appétit’

pathologiesYang: [

‘Chaleur de l\’Estomac : faim constante, gingivite’,

‘Feu de l\’Estomac : soif intense, constipation’,

‘Rébellion du Qi de l\’Estomac : nausées, vomissements’,

‘Stagnation alimentaire : distension, éructations’,

‘Glaires-Humidité : lourdeur, mucosités abondantes’

videSang: [

‘Fatigue après les repas’,

‘Membres lourds et faibles’,

‘Pensées obsessionnelles’,

‘Lèvres pâles et sèches’,

‘Muscles flasques’

points: [

‘RP6 (Sanyinjiao) : tonifie Rate et Sang’,

‘E36 (Zusanli) : tonifie Qi et Sang’,

‘RP3 (Taibai) : point source Rate’,

‘E40 (Fenglong) : transforme les Glaires’,

‘Ren12 (Zhongwan) : harmonise l\’Estomac’

]

METAL: {

element: ‘MÉTAL’,

organe: ‘Poumon’,

viscere: ‘Gros Intestin’,

color: ‘#c0c0c0’,

details: [‘Œstrogènes • Sous-Cortex’, ‘Thymus • Peau’],

saison: ‘Automne’,

direction: ‘Ouest’,

saveur: ‘Piquante’,

emotion: ‘Tristesse’,

tissu: ‘Peau’,

sens: ‘Nez’,

climat: ‘Sécheresse’,

horaire: ‘3h-5h / 5h-7h’,

pathologiesYin: [

‘Vide de Qi du Poumon : voix faible, essoufflement’,

‘Vide de Yin du Poumon : toux sèche, gorge sèche’,

‘Sécheresse du Poumon : peau sèche, constipation’,

‘Poumon ne diffuse pas : œdème facial, absence de transpiration’,

‘Poumon ne descend pas : toux, asthme’

pathologiesYang: [

‘Vent-Froid attaque Poumon : frissons, nez bouché’,

‘Vent-Chaleur attaque Poumon : fièvre, gorge douloureuse’,

‘Glaires-Chaleur dans Poumon : crachats jaunes épais’,

‘Chaleur dans le Gros Intestin : constipation, soif’,

‘Feu toxique du Poumon : abcès pulmonaire’

videSang: [

‘Teint pâle et terne’,

‘Peau sèche et rugueuse’,

‘Cheveux secs et cassants’,

‘Tristesse et mélancolie’,

‘Vulnérabilité aux infections’

points: [

‘P7 (Lieque) : ouvre les méridiens’,

‘P9 (Taiyuan) : point source, tonifie le Qi’,

‘GI4 (Hegu) : libère l\’extérieur’,

‘GI11 (Quchi) : clarifie la Chaleur’,

‘V13 (Feishu) : point Shu du Poumon’

]

EAU: {

element: ‘EAU’,

organe: ‘Rein’,

viscere: ‘Vessie’,

color: ‘#4169e1’,

details: [‘Surrénales • Os et art.’, ‘Moelles’],

saison: ‘Hiver’,

direction: ‘Nord’,

saveur: ‘Salée’,

emotion: ‘Peur’,

tissu: ‘Os’,

sens: ‘Oreilles’,

climat: ‘Froid’,

horaire: ’17h-19h / 15h-17h’,

pathologiesYin: [

‘Vide de Yang des Reins : lombalgie froide, impuissance’,

‘Vide de Yin des Reins : acouphènes, sueurs nocturnes’,

‘Vide de Jing : infertilité, vieillissement précoce’,

‘Reins ne reçoivent pas le Qi : asthme chronique’,

‘Eau déborde : œdèmes généralisés’

pathologiesYang: [

‘Feu vide des Reins : bouffées de chaleur, insomnie’,

‘Chaleur-Humidité Vessie : cystite, urines troubles’,

‘Feu de Ming Men insuffisant : diarrhée du petit matin’,

‘Montée du Yang par vide de Yin : hypertension, céphalées’,

‘Calculs rénaux : douleurs lombaires aiguës’

videSang: [

‘Lombalgie chronique’,

‘Genoux faibles’,

‘Cheveux qui blanchissent prématurément’,

‘Dents qui se déchaussent’,

‘Peurs irrationnelles’

points: [

‘R3 (Taixi) : point source, tonifie Yin et Yang’,

‘R7 (Fuliu) : tonifie Yang des Reins’,

‘V23 (Shenshu) : point Shu des Reins’,

‘DM4 (Mingmen) : réchauffe le Yang’,

‘R6 (Zhaohai) : nourrit le Yin’

]

}

};

// 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();

setupModalEvents();

});

function initializePentagram() {

createPentagramLines();

createPoles();

setupEventListeners();

}

function createPentagramLines() {

const svg = document.getElementById(‘pentagram-lines’);

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)

]);

}

const connections = [

[points[0], points[2]],

[points[2], points[4]],

[points[4], points[1]],

[points[1], points[3]],

[points[3], points[0]]

];

connections.forEach(connection => {

const line = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘line’);

line.setAttribute(‘x1’, connection[0][0]);

line.setAttribute(‘y1’, connection[0][1]);

line.setAttribute(‘x2’, connection[1][0]);

line.setAttribute(‘y2’, connection[1][1]);

line.setAttribute(‘stroke’, ‘#8b0000’);

line.setAttribute(‘stroke-width’, ‘3’);

line.setAttribute(‘opacity’, ‘0.8’);

svg.appendChild(line);

});

}

function createPoles() {

const container = document.getElementById(‘poles-container’);

Object.entries(polePositions).forEach(([poleKey, position]) => {

const group = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘g’);

const data = elementsMTC[poleKey];

// 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’, data.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);

// Titre

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 = data.element;

group.appendChild(title);

// Organes

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 = `${data.organe}-${data.viscere}`;

group.appendChild(subtitle);

// Détails (hormones, tissus)

if (data.details) {

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’, ’11’);

detail1.textContent = data.details[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’, ’11’);

detail2.textContent = data.details[1];

group.appendChild(detail2);

}

container.appendChild(group);

});

}

function updateInfoBox() {

const elementsList = document.getElementById(‘elements-list’);

elementsList.innerHTML = »;

Object.entries(elementsMTC).forEach(([poleKey, data]) => {

const item = document.createElement(‘div’);

item.className = ‘element-item’;

item.innerHTML = `

<span>${data.element} – ${data.organe}-${data.viscere}</span>

elementsList.appendChild(item);

});

}

function setupEventListeners() {

document.querySelectorAll(‘.pole-circle’).forEach(circle => {

circle.addEventListener(‘click’, function() {

const poleKey = this.getAttribute(‘data-pole’);

showModal(poleKey);

});

circle.addEventListener(‘mouseenter’, function() {

this.setAttribute(‘opacity’, ‘0.95’);

this.setAttribute(‘stroke’, ‘#FFD700’);

this.setAttribute(‘stroke-width’, ‘4’);

});

circle.addEventListener(‘mouseleave’, function() {

this.setAttribute(‘opacity’, ‘0.8’);

this.setAttribute(‘stroke’, ‘#fff’);

this.setAttribute(‘stroke-width’, ‘3’);

});

}

function setupModalEvents() {

const overlay = document.getElementById(‘modalOverlay’);

const closeBtn = document.getElementById(‘modalCloseBtn’);

overlay.addEventListener(‘click’, closeModal);

closeBtn.addEventListener(‘click’, closeModal);

document.addEventListener(‘keydown’, function(e) {

if (e.key === ‘Escape’) {

closeModal();

}

});

}

function showModal(poleKey) {

const modal = document.getElementById(‘modalWindow’);

const overlay = document.getElementById(‘modalOverlay’);

const title = document.getElementById(‘modalTitle’);

const subtitle = document.getElementById(‘modalSubtitle’);

const body = document.getElementById(‘modalBody’);

const data = elementsMTC[poleKey];

title.textContent = `Élément ${data.element}`;

subtitle.textContent = `${data.organe} – ${data.viscere}`;

// Générer le contenu HTML

let html = `

<h3>Correspondances Fondamentales</h3>

<div class= »info-label »>Saison</div>

<div class= »info-value »>${data.saison}</div>

</div>

<div class= »info-label »>Direction</div>

<div class= »info-value »>${data.direction}</div>

</div>

<div class= »info-label »>Saveur</div>

<div class= »info-value »>${data.saveur}</div>

</div>

<div class= »info-label »>Émotion</div>

<div class= »info-value »>${data.emotion}</div>

</div>

<div class= »info-label »>Tissu</div>

<div class= »info-value »>${data.tissu}</div>

</div>

<div class= »info-label »>Organe des sens</div>

</div>

<div class= »info-label »>Climat</div>

<div class= »info-value »>${data.climat}</div>

</div>

<div class= »info-label »>Horaires</div>

<div class= »info-value »>${data.horaire}</div>

</div>

// Pathologies YIN

html += `

<h3>Pathologies YIN (Vide/Froid)</h3>

data.pathologiesYin.forEach(p => {

html += `<li style= »padding: 8px; margin: 4px 0; background: white; border-radius: 4px; border-left: 3px solid #93c5fd; »>${p}</li>`;

});

html += ‘</ul></div>’;

// Pathologies YANG

html += `

<h3>Pathologies YANG (Plénitude/Chaleur)</h3>

data.pathologiesYang.forEach(p => {

html += `<li style= »padding: 8px; margin: 4px 0; background: white; border-radius: 4px; border-left: 3px solid #fca5a5; »>${p}</li>`;

});

html += ‘</ul></div>’;

// Vide de Sang

html += `

<h3>Vide de Sang – 5 Symptômes Majeurs</h3>

data.videSang.forEach((s, i) => {

html += `

${i + 1}

</span>

${s}

</li>

});

html += ‘</ul></div>’;

// Points d’acupuncture

html += `

<h3>Points d’Acupuncture Principaux</h3>

data.points.forEach(p => {

const [nom, desc] = p.split(‘:’);

html += `

</li>

});

html += ‘</ul></div>’;

body.innerHTML = html;

overlay.style.display = ‘block’;

modal.style.display = ‘block’;

}

function closeModal() {

document.getElementById(‘modalOverlay’).style.display = ‘none’;

document.getElementById(‘modalWindow’).style.display = ‘none’;

}

</script>

</body>

</html>