_<meta charset="UTF-8">_
_<meta name="viewport" content="width=device-width, initial-scale=1.0">_
_<title>Pentagramme Wu Xing</title>_
_<style>_
_body {_
_margin: 0;_
_padding: 20px;_
_background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);_
_font-family: 'Georgia', serif;_
_display: flex;_
_justify-content: center;_
_align-items: center;_
_min-height: 100vh;_
_}_
_.container {_
_text-align: center;_
_background: rgba(255, 255, 255, 0.9);_
_padding: 30px;_
_border-radius: 20px;_
_box-shadow: 0 10px 30px rgba(0,0,0,0.1);_
_}_
_h1 {_
_color: #4a5568;_
_margin-bottom: 20px;_
_font-size: 2.2em;_
_text-shadow: 1px 1px 2px rgba(0,0,0,0.1);_
_}_
_svg {_
_background: radial-gradient(circle, #fefefe 0%, #f8f9fa 100%);_
_border-radius: 15px;_
_box-shadow: 0 5px 20px rgba(0,0,0,0.1);_
_}_
_.element-text {_
_font-family: 'Georgia', serif;_
_font-weight: bold;_
_font-size: 14px;_
_text-anchor: middle;_
_dominant-baseline: middle;_
_}_
_.element-chinese {_
_font-family: 'SimSun', serif;_
_font-size: 20px;_
_text-anchor: middle;_
_dominant-baseline: middle;_
_}_
_.cycle-label {_
_font-family: 'Georgia', serif;_
_font-size: 12px;_
_text-anchor: middle;_
_font-style: italic;_
_}_
_.legend {_
_margin-top: 20px;_
_display: flex;_
_justify-content: space-around;_
_flex-wrap: wrap;_
_gap: 15px;_
_}_
_.legend-item {_
_display: flex;_
_align-items: center;_
_gap: 8px;_
_padding: 8px 12px;_
_background: rgba(255, 255, 255, 0.7);_
_border-radius: 8px;_
_box-shadow: 0 2px 5px rgba(0,0,0,0.1);_
_}_
_.legend-color {_
_width: 20px;_
_height: 20px;_
_border-radius: 50%;_
_border: 2px solid #ddd;_
_}_
_</style>_
_<div class="container">_
_<h1>_五行 _- Pentagramme des Cinq Éléments</h1>_
_<svg width="600" height="600" viewBox="0 0 600 600">_
_<!-- Cercle de base -->_
_<circle cx="300" cy="300" r="280" fill="none" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="5,5" opacity="0.5"/>_
_<!-- Étoile interne (cycle de destruction) -->_
_<g stroke="#f56565" stroke-width="2" opacity="0.7">_
_<!-- FEU → MÉTAL -->_
_<line x1="300" y1="50" x2="445.3" y2="449.4" marker-end="url(#arrowRed)"/>_
_<!-- MÉTAL → BOIS -->_
_<line x1="445.3" y1="449.4" x2="81.6" y2="206.1" marker-end="url(#arrowRed)"/>_
_<!-- BOIS → TERRE -->_
_<line x1="81.6" y1="206.1" x2="518.4" y2="206.1" marker-end="url(#arrowRed)"/>_
_<!-- TERRE → EAU -->_
_<line x1="518.4" y1="206.1" x2="154.7" y2="449.4" marker-end="url(#arrowRed)"/>_
_<!-- EAU → FEU -->_
_<line x1="154.7" y1="449.4" x2="300" y2="50" marker-end="url(#arrowRed)"/>_
_</g>_
_<!-- Flèches du cycle de génération (externes) -->_
_<g stroke="#48bb78" stroke-width="2.5" fill="none" opacity="0.8">_
_<!-- FEU → TERRE -->_
_<path d="M 350 80 Q 480 120 480 180" marker-end="url(#arrowGreen)"/>_
_<!-- TERRE → MÉTAL -->_
_<path d="M 500 250 Q 520 350 470 420" marker-end="url(#arrowGreen)"/>_
_<!-- MÉTAL → EAU -->_
_<path d="M 400 480 Q 300 520 200 480" marker-end="url(#arrowGreen)"/>_
_<!-- EAU → BOIS -->_
_<path d="M 120 420 Q 80 350 100 250" marker-end="url(#arrowGreen)"/>_
_<!-- BOIS → FEU -->_
_<path d="M 120 180 Q 140 120 250 80" marker-end="url(#arrowGreen)"/>_
_</g>_
_<!-- Définition des marqueurs de flèches -->_
_<defs>_
_<marker id="arrowGreen" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">_
_<polygon points="0,0 0,6 9,3" fill="#48bb78"/>_
_</marker>_
_<marker id="arrowRed" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto" markerUnits="strokeWidth">_
_<polygon points="0,0 0,6 9,3" fill="#f56565"/>_
_</marker>_
_</defs>_
_<!-- Éléments aux sommets -->_
_<!-- FEU (sommet) -->_
_<circle cx="300" cy="50" r="45" fill="#ffb3b3" stroke="#ff6b6b" stroke-width="3" opacity="0.9"/>_
_<text x="300" y="40" class="element-chinese" fill="#d63031">_火_</text>_
_<text x="300" y="60" class="element-text" fill="#2d3748">FEU</text>_
_<!-- TERRE (droite-haute) -->_
_<circle cx="518.4" cy="206.1" r="45" fill="#fff3b3" stroke="#ffd93d" stroke-width="3" opacity="0.9"/>_
_<text x="518.4" y="196.1" class="element-chinese" fill="#b7791f">_土_</text>_
_<text x="518.4" y="216.1" class="element-text" fill="#2d3748">TERRE</text>_
_<!-- MÉTAL (droite-basse) -->_
_<circle cx="445.3" cy="449.4" r="45" fill="#f0f0f0" stroke="#a0a0a0" stroke-width="3" opacity="0.9"/>_
_<text x="445.3" y="439.4" class="element-chinese" fill="#636e72">_金_</text>_
_<text x="445.3" y="459.4" class="element-text" fill="#2d3748">MÉTAL</text>_
_<!-- EAU (gauche-basse) -->_
_<circle cx="154.7" cy="449.4" r="45" fill="#b3d9ff" stroke="#74b9ff" stroke-width="3" opacity="0.9"/>_
_<text x="154.7" y="439.4" class="element-chinese" fill="#0984e3">_水_</text>_
_<text x="154.7" y="459.4" class="element-text" fill="#2d3748">EAU</text>_
_<!-- BOIS (gauche-haute) -->_
_<circle cx="81.6" cy="206.1" r="45" fill="#b3ffb3" stroke="#55a3ff" stroke-width="3" opacity="0.9"/>_
_<text x="81.6" y="196.1" class="element-chinese" fill="#00b894">_木_</text>_
_<text x="81.6" y="216.1" class="element-text" fill="#2d3748">BOIS</text>_
_<!-- Labels des cycles -->_
_<text x="300" y="580" class="cycle-label" fill="#48bb78">Cycle de Génération (Sheng) - Flèches vertes</text>_
_<text x="300" y="-15" class="cycle-label" fill="#f56565">Cycle de Destruction (Ke) - Lignes rouges</text>_
_</svg>_
_<div class="legend">_
_<div class="legend-item">_
_<div class="legend-color" style="background: #ffb3b3;"></div>_
_<span>FEU_ 火 _- Été - Sud</span>_
_</div>_
_<div class="legend-item">_
_<div class="legend-color" style="background: #fff3b3;"></div>_
_<span>TERRE_ 土 _- Intersaisons - Centre</span>_
_</div>_
_<div class="legend-item">_
_<div class="legend-color" style="background: #f0f0f0;"></div>_
_<span>MÉTAL_ 金 _- Automne - Ouest</span>_
_</div>_
_<div class="legend-item">_
_<div class="legend-color" style="background: #b3d9ff;"></div>_
_<span>EAU_ 水 _- Hiver - Nord</span>_
_</div>_
_<div class="legend-item">_
_<div class="legend-color" style="background: #b3ffb3;"></div>_
_<span>BOIS_ 木 _- Printemps - Est</span>_
_</div>_
_</div>_
_</div>_
