/* =============================== */
/*        RESPONSIVE LARGE         */
/* =============================== */

@media (max-width: 1100px) {
    .layout {
        grid-template-columns: 260px 1fr 300px;
    }
}

/* =============================== */
/*        RESPONSIVE MOBILE        */
/* =============================== */

@media (max-width: 600px) {

    /* Layout général */
    .layout {
        padding: 8px;
        gap: 10px;
        grid-template-columns: 1fr;
    }

    .left-panel,
    .center-panel,
    .right-panel {
        padding: 12px;
        border-radius: 10px;
        box-shadow: none;
    }

    .section h2 {
        font-size: 16px;
    }

    /* Boutons */
    .btn-primary,
    .button-wide,
    .btn-secondary,
    .btn-animaux,
    .btn-matiere {
        font-size: 16px;
        padding: 14px;
        border-radius: 10px;
    }

    /* Panels */
    .panel-box,
    .pricing-panel,
    #choixContainer {
        padding: 12px;
        border-radius: 10px;
    }

    /* Canvas */
    .preview-canvas {
        width: 100% !important;
        height: auto !important;
        min-width: 0;
    }

    .preview-face {
        min-width: 100%;
    }

    /* Modales */
    .modal-window {
        padding: 16px 10px;
        border-radius: 10px;
        width: 96vw;
        max-width: 96vw;
    }

    /* Footer */
    .site-footer {
        font-size: 13px;
        padding: 14px 0 8px 0;
    }
}

/* =============================== */
/*   MOBILE PAYSAGE (LANDSCAPE)    */
/* =============================== */

@media only screen and (max-width: 600px) and (orientation: landscape) {

    .layout {
        display: flex !important;
        flex-direction: row !important;
        gap: 3vw !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        padding: 0 !important;
        grid-template-columns: unset !important;
    }

    .left-panel,
    .center-panel,
    .right-panel {
        flex: 1 1 0 !important;
        min-width: 320px !important;
        padding: 12px !important;
        margin-bottom: 0 !important;
        border-radius: 10px !important;
    }
}