/* Styles spécifiques aux services */
.service-hero { background: #f8f9fa; padding: 4rem 0; display: flex; align-items: center; gap: 2rem; color: #333; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin: 2rem 0; }
.medical-card { background: white; padding: 1.5rem; border-radius: 10px; border: 1px solid #eee; color: #333; }
.alert-box { background: #f8f9fa; border-left: 5px solid #6c757d; padding: 1.5rem; margin: 2rem 0; color: #333; }
.steps-container { display: flex; justify-content: space-around; margin: 3rem 0; text-align: center; color: #333; }
.doctor-card { border: 1px solid #ddd; padding: 1.5rem; border-radius: 10px; display: flex; gap: 1rem; align-items: center; color: #333; }
.price-tag { font-size: 1.5rem; color: #007bff; font-weight: bold; }
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; }
.modal-content { background: white; margin: 10% auto; padding: 2rem; width: 50%; border-radius: 10px; color: #333; }
.progress-container { width: 100%; background-color: #e9ecef; border-radius: 25px; margin-bottom: 1rem; padding: 5px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }
.progress-bar { height: 20px; background: #007bff; border-radius: 20px; width: 0%; transition: width 0.5s ease-in-out; position: relative; overflow: hidden; }
.progress-bar::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.timer { text-align: center; font-weight: bold; color: #333; margin-bottom: 1rem; font-size: 1.2rem; }
.question input, .question select, .question textarea { width: 100%; padding: 0.8rem; border: 2px solid #ccc; border-radius: 8px; font-size: 1rem; margin-top: 0.5rem; transition: border-color 0.3s; color: #333; }
.question input:focus, .question select:focus, .question textarea:focus { border-color: #999; outline: none; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
.question { margin-bottom: 1.5rem; color: #333; }
input[type="range"] { width: 100%; }