/* Responsive stylesheet for Ondes Mécaniques Progressives simulation suite */
@media (max-width: 768px) {
    body {
        padding: 12px 10px !important;
        min-height: auto !important;
    }

    header {
        margin-bottom: 12px !important;
    }

    header h1 {
        font-size: 1.35rem !important;
        letter-spacing: normal !important;
    }

    header p {
        font-size: 0.82rem !important;
        margin-top: 3px !important;
    }

    .simulation-container {
        padding: 12px 10px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    }

    canvas {
        width: 100% !important;
        height: auto !important;
        max-height: 260px !important;
        aspect-ratio: 10 / 4 !important;
        border-radius: 8px !important;
        touch-action: none;
    }

    .legend {
        padding: 8px 10px !important;
        margin-top: 10px !important;
        font-size: 0.76rem !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }

    .controls {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px 10px !important;
        margin-top: 12px !important;
        border-radius: 10px !important;
    }

    .control-group {
        gap: 6px !important;
    }

    .control-group label {
        font-size: 0.82rem !important;
    }

    select, input[type="text"], input[type="number"] {
        font-size: 16px !important;
        padding: 8px 10px !important;
    }

    input[type=range]::-webkit-slider-thumb {
        height: 22px !important;
        width: 22px !important;
    }

    .button-group {
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }

    .button-group button, button {
        width: 100% !important;
        min-height: 42px !important;
        justify-content: center !important;
        font-size: 0.88rem !important;
        padding: 10px 14px !important;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.15rem !important;
    }
    
    header p {
        font-size: 0.78rem !important;
    }

    canvas {
        max-height: 210px !important;
    }

    .legend-item {
        font-size: 0.72rem !important;
        gap: 6px !important;
    }
}