/* ==========================================================
   PAGE DE MAINTENANCE
   J&F 3D Printing
========================================================== */

:root {
    color-scheme: dark;
    --page-background: #000000;
}

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-width: 320px;
    min-height: 100%;
    margin: 0;
    padding: 0;

    background: var(--page-background);
}

body {
    overflow-x: hidden;
}

/* ==========================================================
   CONTENU PRINCIPAL
========================================================== */

.maintenance {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    padding: 16px;
}

/* ==========================================================
   IMAGE
========================================================== */

.maintenance-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: calc(100vh - 32px);
    max-height: calc(100svh - 32px);
    max-height: calc(100dvh - 32px);

    object-fit: contain;
    object-position: center;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    image-rendering: auto;
}

/* ==========================================================
   GRANDS ÉCRANS
========================================================== */

@media (min-width: 1200px) {

    .maintenance {
        padding: 24px;
    }

    .maintenance-image {
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);

        border-radius: 10px;

        box-shadow:
            0 0 40px rgba(0, 132, 255, 0.08),
            0 0 90px rgba(255, 77, 0, 0.05);
    }

}

/* ==========================================================
   TÉLÉPHONES
========================================================== */

@media (max-width: 640px) {

    .maintenance {
        padding: 8px;
    }

    .maintenance-image {
        width: 100%;
        max-width: 100%;

        max-height: calc(100vh - 16px);
        max-height: calc(100svh - 16px);
        max-height: calc(100dvh - 16px);
    }

}

/* ==========================================================
   MODE PAYSAGE
========================================================== */

@media (max-height: 600px) and (orientation: landscape) {

    .maintenance {
        padding: 6px;
    }

    .maintenance-image {
        width: auto;
        height: calc(100vh - 12px);
        height: calc(100dvh - 12px);

        max-width: 100%;
        max-height: none;
    }

}

/* ==========================================================
   IMPRESSION
========================================================== */

@media print {

    html,
    body {
        background: #ffffff;
    }

    .maintenance {
        min-height: auto;
        padding: 0;
    }

    .maintenance-image {
        width: 100%;
        max-width: none;
        max-height: none;

        box-shadow: none;
    }

}