_<meta charset="UTF-8">_
_<meta name="viewport" content="width=device-width, initial-scale=1.0">_
_<title>MTC : Mécanismes Pathologiques - Interface Claire</title>_
_<style>_
_body {_
_margin: 0;_
_padding: 0;_
_background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);_
_font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;_
_color: #2d3748;_
_min-height: 100vh;_
_}_
_.main-container {_
_max-width: 1800px;_
_margin: 0 auto;_
_background: white;_
_min-height: 100vh;_
_display: flex;_
_flex-direction: column;_
_}_
_.header {_
_background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);_
_color: white;_
_padding: 20px;_
_text-align: center;_
_box-shadow: 0 4px 20px rgba(0,0,0,0.1);_
_}_
_.header h1 {_
_margin: 0;_
_font-size: 2.2em;_
_font-weight: 300;_
_}_
_.content-wrapper {_
_flex: 1;_
_display: grid;_
_grid-template-columns: 300px 1fr 350px;_
_gap: 0;_
_height: calc(100vh - 100px);_
_}_
_/* PANNEAU SÉLECTION PATHOLOGIES */_
_.pathology-panel {_
_background: #f8fafc;_
_border-right: 3px solid #e2e8f0;_
_padding: 20px;_
_overflow-y: auto;_
_}_
_.pathology-panel h3 {_
_margin: 0 0 20px 0;_
_color: #2d3748;_
_font-size: 1.1em;_
_border-bottom: 2px solid #e2e8f0;_
_padding-bottom: 10px;_
_}_
_.pathology-item {_
_background: white;_
_border: 2px solid #e2e8f0;_
_border-radius: 10px;_
_padding: 15px;_
_margin-bottom: 12px;_
_cursor: pointer;_
_transition: all 0.3s ease;_
_box-shadow: 0 2px 5px rgba(0,0,0,0.05);_
_}_
_.pathology-item:hover {_
_border-color: #4299e1;_
_transform: translateY(-2px);_
_box-shadow: 0 4px 15px rgba(0,0,0,0.1);_
_}_
_.pathology-item.selected {_
_border-color: #e53e3e;_
_background: #fed7d7;_
_box-shadow: 0 0 20px rgba(229, 62, 62, 0.2);_
_}_
_.pathology-item h4 {_
_margin: 0 0 8px 0;_
_color: #2d3748;_
_font-size: 1em;_
_}_
_.pathology-item p {_
_margin: 0;_
_font-size: 0.85em;_
_color: #4a5568;_
_line-height: 1.3;_
_}_
_/* ZONE ANIMATION CENTRALE */_
_.animation-area {_
_background: #ffffff;_
_position: relative;_
_display: flex;_
_flex-direction: column;_
_border-right: 3px solid #e2e8f0;_
_}_
_.pentagram-zone {_
_flex: 1;_
_position: relative;_
_padding: 50px;_
_min-height: 500px;_
_}_
_/* ÉLÉMENTS DU PENTAGRAMME */_
_.element-circle {_
_position: absolute;_
_width: 120px;_
_height: 120px;_
_border-radius: 50%;_
_display: flex;_
_flex-direction: column;_
_align-items: center;_
_justify-content: center;_
_font-weight: bold;_
_text-align: center;_
_border: 4px solid;_
_transition: all 0.8s ease;_
_cursor: pointer;_
_z-index: 10;_
_box-shadow: 0 6px 20px rgba(0,0,0,0.1);_
_}_
_/* Positions optimisées et espacées */_
_.element-feu {_
_background: linear-gradient(135deg, #fed7d7, #feb2b2);_
_border-color: #e53e3e;_
_top: 30px;_
_left: 50%;_
_transform: translateX(-50%);_
_}_
_.element-terre {_
_background: linear-gradient(135deg, #fef5e7, #fbd38d);_
_border-color: #dd6b20;_
_top: 200px;_
_right: 50px;_
_}_
_.element-metal {_
_background: linear-gradient(135deg, #f7fafc, #edf2f7);_
_border-color: #4a5568;_
_bottom: 100px;_
_right: 100px;_
_}_
_.element-eau {_
_background: linear-gradient(135deg, #e6fffa, #b2f5ea);_
_border-color: #319795;_
_bottom: 100px;_
_left: 100px;_
_}_
_.element-bois {_
_background: linear-gradient(135deg, #f0fff4, #c6f6d5);_
_border-color: #38a169;_
_top: 200px;_
_left: 50px;_
_}_
_.chinese-symbol {_
_font-size: 32px;_
_font-family: 'KaiTi', 'STKaiti', serif;_
_line-height: 1;_
_margin-bottom: 8px;_
_color: #2d3748;_
_}_
_.element-label {_
_font-size: 14px;_
_font-weight: bold;_
_margin: 3px 0;_
_color: #2d3748;_
_}_
_.organ-label {_
_font-size: 11px;_
_font-style: italic;_
_color: #4a5568;_
_}_
_/* ÉTATS VISUELS DES ÉLÉMENTS */_
_.element-circle.etape-1 {_
_animation: etape1-highlight 2s ease-in-out;_
_border-color: #e53e3e !important;_
_box-shadow: 0 0 30px rgba(229, 62, 62, 0.6);_
_transform: translateX(-50%) scale(1.1);_
_}_
_.element-circle.etape-2 {_
_animation: etape2-highlight 2s ease-in-out;_
_border-color: #ed8936 !important;_
_box-shadow: 0 0 30px rgba(237, 137, 54, 0.6);_
_transform: scale(1.1);_
_}_
_.element-circle.etape-3 {_
_animation: etape3-highlight 2s ease-in-out;_
_border-color: #d69e2e !important;_
_box-shadow: 0 0 30px rgba(214, 158, 46, 0.6);_
_transform: scale(1.1);_
_}_
_.element-circle.manifestation {_
_animation: manifestation-glow 3s ease-in-out infinite;_
_border-color: #9f7aea !important;_
_box-shadow: 0 0 40px rgba(159, 122, 234, 0.8);_
_}_
_@keyframes etape1-highlight {_
_0%, 100% { filter: brightness(1); }_
_50% { filter: brightness(1.3); }_
_}_
_@keyframes etape2-highlight {_
_0%, 100% { filter: brightness(1); }_
_50% { filter: brightness(1.3); }_
_}_
_@keyframes etape3-highlight {_
_0%, 100% { filter: brightness(1); }_
_50% { filter: brightness(1.3); }_
_}_
_@keyframes manifestation-glow {_
_0%, 100% { filter: brightness(1) saturate(1); }_
_50% { filter: brightness(1.2) saturate(1.3); }_
_}_
_/* FLÈCHES DE SÉQUENCE */_
_.sequence-arrow {_
_position: absolute;_
_height: 8px;_
_background: linear-gradient(90deg, #e53e3e, #f56565);_
_opacity: 0;_
_transition: all 1s ease;_
_transform-origin: left center;_
_z-index: 5;_
_border-radius: 4px;_
_box-shadow: 0 3px 10px rgba(229, 62, 62, 0.4);_
_}_
_.sequence-arrow::after {_
_content: '';_
_position: absolute;_
_right: -18px;_
_top: -10px;_
_width: 0;_
_height: 0;_
_border-left: 24px solid #e53e3e;_
_border-top: 12px solid transparent;_
_border-bottom: 12px solid transparent;_
_filter: drop-shadow(0 3px 6px rgba(229, 62, 62, 0.4));_
_}_
_.sequence-arrow.visible {_
_opacity: 1;_
_animation: arrow-pulse 2s ease-in-out infinite;_
_}_
_@keyframes arrow-pulse {_
_0%, 100% { background: linear-gradient(90deg, #e53e3e, #f56565); }_
_50% { background: linear-gradient(90deg, #c53030, #e53e3e); }_
_}_
_/* BARRE DE CONTRÔLES */_
_.controls-section {_
_background: #f8fafc;_
_border-top: 3px solid #e2e8f0;_
_padding: 25px;_
_display: flex;_
_justify-content: center;_
_gap: 20px;_
_}_
_.control-button {_
_background: linear-gradient(135deg, #4299e1, #3182ce);_
_color: white;_
_border: none;_
_padding: 15px 30px;_
_border-radius: 30px;_
_font-size: 15px;_
_font-weight: 600;_
_cursor: pointer;_
_transition: all 0.3s ease;_
_box-shadow: 0 5px 15px rgba(66, 153, 225, 0.3);_
_display: flex;_
_align-items: center;_
_gap: 8px;_
_}_
_.control-button:hover {_
_transform: translateY(-3px);_
_box-shadow: 0 8px 25px rgba(66, 153, 225, 0.4);_
_}_
_.control-button.action {_
_background: linear-gradient(135deg, #e53e3e, #c53030);_
_box-shadow: 0 5px 15px rgba(229, 62, 62, 0.3);_
_}_
_.control-button.success {_
_background: linear-gradient(135deg, #38a169, #2f855a);_
_box-shadow: 0 5px 15px rgba(56, 161, 105, 0.3);_
_}_
_/* PANNEAU INFORMATIONS */_
_.info-panel {_
_background: #f8fafc;_
_padding: 25px;_
_overflow-y: auto;_
_}_
_.info-panel h3 {_
_margin: 0 0 20px 0;_
_color: #2d3748;_
_font-size: 1.2em;_
_border-bottom: 2px solid #e2e8f0;_
_padding-bottom: 10px;_
_}_
_.current-pathology-info {_
_background: white;_
_border: 2px solid #e2e8f0;_
_border-radius: 12px;_
_padding: 20px;_
_margin-bottom: 20px;_
_box-shadow: 0 3px 10px rgba(0,0,0,0.05);_
_}_
_.step-display {_
_background: white;_
_border: 2px solid #e2e8f0;_
_border-radius: 12px;_
_padding: 15px;_
_margin-bottom: 15px;_
_display: none;_
_box-shadow: 0 3px 10px rgba(0,0,0,0.05);_
_}_
_.step-display.active {_
_display: block;_
_border-color: #e53e3e;_
_background: #fed7d7;_
_animation: step-appear 0.5s ease;_
_}_
_@keyframes step-appear {_
_from { opacity: 0; transform: translateY(10px); }_
_to { opacity: 1; transform: translateY(0); }_
_}_
_.step-number {_
_display: inline-block;_
_width: 35px;_
_height: 35px;_
_background: #4299e1;_
_color: white;_
_border-radius: 50%;_
_text-align: center;_
_line-height: 35px;_
_font-weight: bold;_
_margin-right: 15px;_
_font-size: 14px;_
_}_
_.step-number.active {_
_background: #e53e3e;_
_animation: number-pulse 1s ease-in-out infinite;_
_}_
_@keyframes number-pulse {_
_0%, 100% { transform: scale(1); }_
_50% { transform: scale(1.1); }_
_}_
_.step-content h4 {_
_margin: 0 0 10px 0;_
_color: #2d3748;_
_font-size: 1.1em;_
_}_
_.step-content p {_
_margin: 0;_
_color: #4a5568;_
_line-height: 1.5;_
_font-size: 0.95em;_
_}_
_.solutions-section {_
_background: #f0fff4;_
_border: 2px solid #68d391;_
_border-radius: 12px;_
_padding: 20px;_
_margin-top: 20px;_
_display: none;_
_}_
_.solutions-section.visible {_
_display: block;_
_animation: solutions-appear 0.6s ease;_
_}_
_@keyframes solutions-appear {_
_from { opacity: 0; transform: translateY(20px); }_
_to { opacity: 1; transform: translateY(0); }_
_}_
_.solutions-grid {_
_display: grid;_
_grid-template-columns: 1fr 1fr;_
_gap: 20px;_
_margin-top: 15px;_
_}_
_.solution-category h5 {_
_margin: 0 0 10px 0;_
_color: #2f855a;_
_font-size: 1em;_
_}_
_.solution-category ul {_
_margin: 0;_
_padding-left: 15px;_
_font-size: 0.9em;_
_}_
_.solution-category li {_
_margin-bottom: 5px;_
_color: #2d3748;_
_}_
_/* TOOLTIP */_
_.element-tooltip {_
_position: absolute;_
_background: rgba(45, 55, 72, 0.95);_
_color: white;_
_padding: 15px;_
_border-radius: 10px;_
_font-size: 13px;_
_max-width: 300px;_
_z-index: 100;_
_pointer-events: none;_
_opacity: 0;_
_transition: opacity 0.3s ease;_
_box-shadow: 0 5px 20px rgba(0,0,0,0.3);_
_}_
_.element-tooltip.visible {_
_opacity: 1;_
_}_
_.element-tooltip h5 {_
_margin: 0 0 8px 0;_
_color: #68d391;_
_}_
_.element-tooltip p {_
_margin: 0;_
_line-height: 1.4;_
_}_
_</style>_
Rue du Rhône 11