/* ===================================
   CONTEXTE ADVANCED STYLES
   Styles pour sections économique, juridique, social, paysager, historique, culturel
   =================================== */

/* Economic Cards */
.eco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.eco-card {
    padding: var(--spacing-lg);
    border-radius: 12px;
    background: linear-gradient(135deg, #fff, #f8f9fa);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    transition: var(--transition-normal);
}

.eco-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.eco-card i {
    font-size: 2.5rem;
    color: var(--secondary-color);
}

.eco-data {
    display: flex;
    flex-direction: column;
}

.eco-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.eco-label {
    font-size: 0.9rem;
    color: var(--gray-600);
}

/* Chart Containers */
.economic-chart-container,
.demo-chart-container {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-xl);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

/* Production Cards */
.production-grid {
    display: grid;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.production-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
}

.production-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-lg);
}

.production-header {
    padding: var(--spacing-lg);
    color: #fff;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.production-header i {
    font-size: 2rem;
}

.production-card.elevage .production-header { background: linear-gradient(135deg, #27ae60, #229954); }
.production-card.cereales .production-header { background: linear-gradient(135deg, #f39c12, #e67e22); }
.production-card.maraichage .production-header { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.production-card.bio .production-header { background: linear-gradient(135deg, #2ecc71, #27ae60); }

.production-body {
    padding: var(--spacing-lg);
    background: #fff;
}

/* Stats Cards */
.stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.stat-card-eco {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-100);
    border-radius: 8px;
    border-left: 4px solid var(--secondary-color);
}

.stat-card-eco i {
    font-size: 2rem;
    color: var(--secondary-color);
}

.stat-card-eco strong {
    display: block;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.stat-card-eco span {
    font-size: 0.85rem;
    color: var(--gray-600);
}

/* Tourism Attractions */
.tourism-attractions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.attraction-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-100);
    border-radius: 8px;
}

.attraction-item i {
    font-size: 2rem;
    color: var(--secondary-color);
    flex-shrink: 0;
}

/* Priority Tags */
.priority {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
}

.priority.high { background: #e74c3c; }
.priority.medium { background: #f39c12; }
.priority.low { background: #3498db; }
.priority.critical { background: #c0392b; }

/* Info Boxes */
.info-box {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    border-radius: 12px;
    border-left: 5px solid var(--info-color);
}

.info-box.tourism { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }
.info-box.maec { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }

/* Conchyliculture */
.conchy-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.stat-item {
    text-align: center;
    padding: var(--spacing-md);
    background: var(--gray-100);
    border-radius: 8px;
}

.stat-item i {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-sm);
}

.stat-item strong {
    display: block;
    font-size: 1.8rem;
    color: var(--primary-color);
}

.stat-item span {
    font-size: 0.9rem;
    color: var(--gray-600);
}

/* Water Quality */
.water-quality-impact {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, #fff5f5, #ffe5e5);
    border-radius: 12px;
    border-left: 6px solid var(--accent-color);
}

.quality-issues {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.issue-card {
    padding: var(--spacing-md);
    background: #fff;
    border-radius: 8px;
}

.issue-card h5 {
    color: var(--accent-color);
    margin-bottom: var(--spacing-sm);
}

/* Interdependence Diagram */
.interdependence-diagram {
    padding: var(--spacing-xl);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

/* SWOT Economic */
.swot-economic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.swot-item {
    padding: var(--spacing-lg);
    border-radius: 12px;
}

.swot-item.forces {
    background: linear-gradient(135deg, #d5f4e6, #a8e6cf);
    border-left: 5px solid var(--success-color);
}

.swot-item.faiblesses {
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
    border-left: 5px solid var(--warning-color);
}

.swot-item h5 {
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Trend Indicators */
.trend-up { color: #27ae60; font-weight: 600; }
.trend-down { color: #e74c3c; font-weight: 600; }
.trend-stable { color: #95a5a6; font-weight: 600; }

.trend-up::before { content: '↗ '; }
.trend-down::before { content: '↘ '; }
.trend-stable::before { content: '→ '; }

/* Key Points Boxes - Colors */
.key-points-box.economic {
    background: linear-gradient(135deg, #fff9e6, #ffe5b3);
    border-left-color: var(--warning-color);
}

.key-points-box.juridical {
    background: linear-gradient(135deg, #e8eaf6, #c5cae9);
    border-left-color: #5e35b1;
}

.key-points-box.social {
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
    border-left-color: #c2185b;
}

.key-points-box.ecological {
    background: linear-gradient(135deg, #e0f2f1, #b2dfdb);
    border-left-color: #00695c;
}

.key-points-box.historical {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border-left-color: #e65100;
}

.key-points-box.cultural {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    border-left-color: #7b1fa2;
}

/* Legal Hierarchy */
.legal-hierarchy {
    padding: var(--spacing-xl);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    margin: var(--spacing-lg) 0;
}

/* Regulation Cards */
.regulation-cards {
    display: grid;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.reg-card {
    padding: var(--spacing-lg);
    background: #fff;
    border-radius: 12px;
    border-left: 5px solid var(--secondary-color);
    box-shadow: var(--shadow-sm);
}

.reg-card h5 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Wetland Obligations */
.wetland-obligations {
    margin-top: var(--spacing-lg);
}

.obligation-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.obligation-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-100);
    border-radius: 8px;
}

.obligation-item i {
    font-size: 1.5rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

/* MAEC Types */
.maec-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.maec-card {
    padding: var(--spacing-lg);
    background: #fff;
    border-radius: 12px;
    border: 2px solid var(--success-color);
}

.maec-card h5 {
    color: var(--success-color);
    margin-bottom: var(--spacing-md);
}

/* Property Rights */
.property-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.property-card {
    padding: var(--spacing-lg);
    background: var(--gray-100);
    border-radius: 12px;
}

.property-card h5 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.property-card i {
    color: var(--secondary-color);
}

/* Legal Issues */
.legal-issues {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.issue-item {
    padding: var(--spacing-md);
    background: #fff;
    border-radius: 8px;
    border-left: 4px solid var(--warning-color);
}

.issue-item h6 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

/* Status Tags */
.status-good { color: #27ae60; font-weight: 600; }
.status-medium { color: #f39c12; font-weight: 600; }
.status-poor { color: #e74c3c; font-weight: 600; }

/* Migration Trends */
.migration-trends {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.trend-card {
    padding: var(--spacing-xl);
    border-radius: 12px;
    border-left: 5px solid;
}

.trend-card.positive {
    background: linear-gradient(135deg, #d5f4e6, #a8e6cf);
    border-left-color: var(--success-color);
}

.trend-card.negative {
    background: linear-gradient(135deg, #ffeaa7, #fdcb6e);
    border-left-color: var(--warning-color);
}

.trend-card i {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

.trend-card.positive i { color: var(--success-color); }
.trend-card.negative i { color: var(--warning-color); }

/* Employment Cards */
.employment-characteristics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.employment-card {
    padding: var(--spacing-lg);
    background: #fff;
    border-radius: 12px;
    border-left: 5px solid var(--secondary-color);
    box-shadow: var(--shadow-sm);
}

.employment-card h5 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.service-card {
    padding: var(--spacing-lg);
    border-radius: 12px;
    border-left: 5px solid;
}

.service-card i {
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
}

.service-card.good {
    background: linear-gradient(135deg, #d5f4e6, #a8e6cf);
    border-left-color: var(--success-color);
}

.service-card.good i { color: var(--success-color); }

.service-card.medium {
    background: linear-gradient(135deg, #fff9e6, #ffe5b3);
    border-left-color: var(--warning-color);
}

.service-card.medium i { color: var(--warning-color); }

.service-card.poor {
    background: linear-gradient(135deg, #fff5f5, #ffe5e5);
    border-left-color: var(--accent-color);
}

.service-card.poor i { color: var(--accent-color); }

/* Associations */
.associations-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.assoc-card {
    padding: var(--spacing-md);
    background: var(--gray-100);
    border-radius: 8px;
    text-align: center;
}

.assoc-card h5 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

/* Social Tensions */
.social-tensions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.tension-item {
    padding: var(--spacing-md);
    background: #fff;
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.tension-item h6 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

/* Landscape Units */
.landscape-units {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.unit-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.unit-header {
    padding: var(--spacing-lg);
    color: #fff;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.unit-header i {
    font-size: 2.5rem;
}

.unit-card.marais-mouille .unit-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.unit-card.marais-desseche .unit-header {
    background: linear-gradient(135deg, #e67e22, #d35400);
}

.unit-card.marais-maritime .unit-header {
    background: linear-gradient(135deg, #1abc9c, #16a085);
}

.unit-body {
    padding: var(--spacing-xl);
    background: #fff;
}

.enjeu-text {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: #fff5f5;
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

/* Biodiversity Stats */
.bio-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.bio-stat-card {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-radius: 12px;
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.bio-stat-card i {
    font-size: 3rem;
    color: var(--marsh-green);
}

.bio-stat-content strong {
    display: block;
    font-size: 2rem;
    color: var(--primary-color);
}

.bio-stat-content span {
    font-size: 0.9rem;
    color: var(--gray-600);
}

.bio-detail {
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-top: var(--spacing-xs);
}

/* Emblematic Species */
.emblematic-species {
    display: grid;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.species-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.species-header {
    padding: var(--spacing-lg);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.species-card.red .species-header { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.species-card.orange .species-header { background: linear-gradient(135deg, #f39c12, #e67e22); }
.species-card.green .species-header { background: linear-gradient(135deg, #27ae60, #229954); }

.status {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255,255,255,0.3);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.species-body {
    padding: var(--spacing-lg);
    background: #fff;
}

/* Ecosystem Services */
.services-categories {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.service-category {
    padding: var(--spacing-xl);
    border-radius: 12px;
}

.service-category.provisioning { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }
.service-category.regulating { background: linear-gradient(135deg, #e3f2fd, #bbdefb); }
.service-category.cultural { background: linear-gradient(135deg, #fce4ec, #f8bbd0); }
.service-category.supporting { background: linear-gradient(135deg, #fff3e0, #ffe0b2); }

.service-category h4 {
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.service-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: #fff;
    border-radius: 8px;
}

.service-item i {
    font-size: 2rem;
    color: var(--secondary-color);
    flex-shrink: 0;
}

.service-item h6 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.value {
    color: var(--success-color);
    font-weight: 600;
    margin-top: var(--spacing-xs);
}

/* Economic Value Box */
.economic-value-box {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, #fff9e6, #ffe5b3);
    border-radius: 12px;
    border-left: 6px solid var(--warning-color);
}

.value-breakdown {
    margin: var(--spacing-lg) 0;
}

.value-item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: #fff;
    border-radius: 8px;
    margin-bottom: var(--spacing-sm);
}

.value-total {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-lg);
    background: var(--primary-color);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.2rem;
    margin-top: var(--spacing-md);
}

/* Ecological Threats */
.ecological-threats {
    display: grid;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.threat-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.threat-header {
    padding: var(--spacing-lg);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.threat-card.critical .threat-header { background: linear-gradient(135deg, #c0392b, #a93226); }
.threat-card.high .threat-header { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.threat-card.medium .threat-header { background: linear-gradient(135deg, #f39c12, #e67e22); }

.threat-level {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(255,255,255,0.3);
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.threat-body {
    padding: var(--spacing-lg);
    background: #fff;
}

/* Historical Periods */
.historical-periods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.period-card {
    text-align: center;
    padding: var(--spacing-lg);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.period-badge {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.period-badge.period-1 { background: linear-gradient(135deg, #95a5a6, #7f8c8d); }
.period-badge.period-2 { background: linear-gradient(135deg, #e67e22, #d35400); }
.period-badge.period-3 { background: linear-gradient(135deg, #27ae60, #229954); }
.period-badge.period-4 { background: linear-gradient(135deg, #c0392b, #a93226); }

/* Evolution List */
.evolution-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.evolution-item {
    display: flex;
    gap: var(--spacing-md);
}

.year {
    flex-shrink: 0;
    width: 100px;
    padding: var(--spacing-sm);
    background: var(--secondary-color);
    color: #fff;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    height: fit-content;
}

.event {
    flex-grow: 1;
    padding: var(--spacing-md);
    background: var(--gray-100);
    border-radius: 8px;
}

.evolution-item.highlight .event {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border-left: 5px solid var(--success-color);
}

.evolution-item.critical .event {
    background: linear-gradient(135deg, #fff5f5, #ffe5e5);
    border-left: 5px solid var(--accent-color);
}

/* Milestone Box */
.milestone-box {
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, #fff9e6, #ffe5b3);
    border-radius: 12px;
    border-left: 6px solid var(--warning-color);
}

/* Drought Timeline */
.drought-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

.drought-year {
    padding: var(--spacing-md);
    border-radius: 8px;
}

.drought-year.severe {
    background: #fff5f5;
    border-left: 5px solid var(--accent-color);
}

.drought-year strong {
    display: block;
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: var(--spacing-sm);
}

/* Historical Lessons */
.historical-lessons {
    display: grid;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.lesson-card {
    padding: var(--spacing-lg);
    background: #fff;
    border-radius: 12px;
    border-left: 5px solid var(--secondary-color);
    box-shadow: var(--shadow-sm);
}

.lesson-card h4 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

/* Timeline Visual */
.timeline-visual {
    margin: var(--spacing-xxl) 0;
    padding: var(--spacing-xl);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

/* Heritage Sites */
.heritage-grid {
    display: grid;
    gap: var(--spacing-lg);
}

.heritage-card {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.heritage-img-placeholder {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    background: var(--gray-200);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
}

.heritage-content {
    flex-grow: 1;
}

/* Savoir-faire Cards */
.savoir-faire-cards {
    display: grid;
    gap: var(--spacing-lg);
}

.sf-card {
    padding: var(--spacing-lg);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}

.sf-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--secondary-color), var(--water-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
}

.sf-icon i {
    color: #fff;
    font-size: 1.8rem;
}

/* Identity and Myths */
.myth-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.myth-card {
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border-radius: 12px;
    border-left: 5px solid var(--info-color);
}

.myth-card h5 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

/* Arts Grid */
.arts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.art-card {
    padding: var(--spacing-lg);
    background: var(--gray-100);
    border-radius: 12px;
}

.art-card h5 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

/* Synthesis Final */
.synthesis-final {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.global-synthesis {
    max-width: 1000px;
    margin: 0 auto;
}

.synthesis-intro {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-xl);
}

.synthesis-blocks {
    display: grid;
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
}

.synthesis-block {
    padding: var(--spacing-xl);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    border-left: 6px solid;
}

.synthesis-block.complexity { border-left-color: #9b59b6; }
.synthesis-block.gov-challenge { border-left-color: #3498db; }
.synthesis-block.economic-paradox { border-left-color: #f39c12; }
.synthesis-block.legal-constraint { border-left-color: #5e35b1; }
.synthesis-block.social-aging { border-left-color: #e74c3c; }
.synthesis-block.ecological-urgency { border-left-color: #c0392b; }
.synthesis-block.historical-lesson { border-left-color: #e67e22; }
.synthesis-block.cultural-richness { border-left-color: #8e44ad; }

.synthesis-block h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.synthesis-conclusion {
    margin-top: var(--spacing-xxl);
    padding: var(--spacing-xxl);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 12px;
}

.synthesis-conclusion h3 {
    color: #fff;
    margin-bottom: var(--spacing-lg);
}

.synthesis-final-statement {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
}

/* Navigation Next Section */
.navigation-next-section {
    margin-top: var(--spacing-xxl);
}

.next-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.next-card {
    padding: var(--spacing-xl);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    text-align: center;
    transition: var(--transition-normal);
}

.next-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.next-card i {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-md);
}

.next-card h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.next-card p {
    color: var(--gray-600);
}

/* Responsive */
@media (max-width: 768px) {
    .evolution-item {
        flex-direction: column;
    }
    
    .year {
        width: 100%;
    }
    
    .heritage-card {
        flex-direction: column;
    }
    
    .heritage-img-placeholder {
        width: 100%;
    }
}