 <![CDATA[ /* Styles généraux */ body { font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; margin: 0; padding: 0; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; } .header, .footer { background: #2D2D2D; color: white; padding: 1rem; } .content .section { padding: 2rem 0; } /* Boutons filtrants */ .filter-buttons button { background: #E0E0E0; border: none; border-radius: 16px; font-size: 0.8rem; padding: 8px 16px; margin: 4px; } /* Cartes de dinosaures */ .grid-card { background: #F8F9FA; border: 1px solid #DEE2E6; border-radius: 12px; margin: 10px; padding: 15px; } /* Timeline Animation */ .timeline { position: relative; width: 100%; height: 200px; border: 1px solid #CCC; margin: 20px 0; } .timeline::after { content: ''; position: absolute; left: 0; bottom: 50%; width: 100%; height: 8px; background: linear-gradient(45deg, #FF6B6B, #F1AA5A, #F08A5D); } .era { position: absolute; bottom: 0; height: 20px; background: rgba(0,0,0,0.1); border-bottom: 2px solid #4CAF50; } .species-marker { position: absolute; bottom: 50px; left: 0; opacity: 0; transition: opacity 0.3s; } .species-marker.show { opacity: 1; } .timeline-controls { display: flex; justify-content: center; margin: 20px 0; } .timeline .labels { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; } ]]>