html,
body {
    margin: 0;
    min-height: 100%;

    font-family: Arial, Helvetica, sans-serif;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(190, 160, 95, 0.045),
            transparent 38%
        ),
        #12110f;

    color: #e8dfcf;
}


/* ==========================================================
   LAYOUT CAMPAGNE
   ========================================================== */

.campaign-layout {

    display: grid;

    grid-template-rows:
        70px
        50px
        minmax(0, 1fr)
        0;

    min-height: 100vh;

    background: transparent;
}


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

.campaign-main {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        320px;

    gap: 20px;

    padding: 20px;

    background: transparent;

    min-width: 0;

    box-sizing: border-box;
}


/* ==========================================================
   CARTE
   ========================================================== */

.campaign-map {

    background: #24211c;

    border: 1px solid rgba(190, 160, 95, 0.14);

    border-radius: 10px;

    padding: 20px;

    box-sizing: border-box;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.campaign-sidebar {

    background: #24211c;

    border: 1px solid rgba(190, 160, 95, 0.14);

    border-radius: 10px;

    padding: 20px;

    box-sizing: border-box;
}


/* ==========================================================
   PLACEHOLDER
   ========================================================== */

.map-placeholder {

    display: flex;

    height: 100%;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    color: #e8dfcf;
}


/* ==========================================================
   ÉQUIPE
   ========================================================== */

.campaign-team-main {

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

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


/* ==========================================================
   LAYOUT CARTE DE CAMPAGNE
========================================================== */

.campaign-map-layout {

    min-width: 0;
    min-height: 0;
    height: 100%;
}


/* ==========================================================
   TABLETTE
========================================================== */

@media (max-width: 1100px) {

    .campaign-map-layout {

        grid-template-columns:
            180px
            minmax(0, 1fr)
            230px;

        gap: 10px;

        padding-left: 10px;
        padding-right: 10px;
    }

}

/* ==========================================================
   PAGE CAMPAGNE — DESKTOP
   ========================================================== */

html,
body {
    height: 100%;
}

body:has(.campaign-map-page) {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

body:has(.campaign-map-page) > main.campaign-map-main {
    height: 100vh;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body:has(.campaign-map-page) > .site-footer {
    display: none;
}

body:has(.campaign-map-page) .campaign-map-page {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}


/* ==========================================================
   MOBILE — PAGE SCROLLABLE + CARTE EXPLICITEMENT DIMENSIONNÉE
   ========================================================== */

@media (max-width: 700px) {

    html,
    body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body:has(.campaign-map-page) {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body:has(.campaign-map-page) > main.campaign-map-main {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    body:has(.campaign-map-page) .campaign-map-page {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }


    /* ------------------------------------------------------
       LAYOUT
       ------------------------------------------------------ */

    .campaign-map-layout {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        gap: 10px !important;
        padding: 0 8px 10px !important;

        overflow: visible !important;
    }


    /* ------------------------------------------------------
       SECTION QUI CONTIENT LA CARTE + ÉTAT
       ------------------------------------------------------ */

    .campaign-map-layout > section {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;

        gap: 10px !important;

        order: 1 !important;

        overflow: visible !important;
    }


    /* ------------------------------------------------------
       CONTENEUR DE LA CARTE
       ------------------------------------------------------ */

    .campaign-map-layout > section > div:first-child {
        display: block !important;

        width: 100% !important;
        height: 360px !important;
        min-height: 360px !important;
        max-height: none !important;

        flex: 0 0 360px !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* ------------------------------------------------------
       CARTE INTERNE
       IMPORTANT : toutes les hauteurs sont explicites.
       ------------------------------------------------------ */

    .campaign-map-layout > section > div:first-child .map-container {
        display: flex !important;

        width: 100% !important;
        height: 360px !important;
        min-height: 360px !important;

        box-sizing: border-box !important;
    }

    .campaign-map-layout > section > div:first-child .map-content {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .campaign-map-layout > section > div:first-child .map-viewport {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
    }

    .campaign-map-layout > section > div:first-child .map-camera {
        width: 100% !important;
        height: 100% !important;
    }

    .campaign-map-layout > section > div:first-child .map-camera svg {
        height: 94% !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
    }


    /* ------------------------------------------------------
       ÉTAT DE LA CAMPAGNE
       ------------------------------------------------------ */

    .campaign-map-layout > section > div:last-child {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        flex: 0 0 auto !important;

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       ÉQUIPES
       ------------------------------------------------------ */

    .campaign-map-layout > aside:first-child {
        display: block !important;

        order: 2 !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* ------------------------------------------------------
       TERRITOIRE / CONFLIT
       ------------------------------------------------------ */

    .campaign-map-layout > aside:last-child {
        display: block !important;

        order: 3 !important;

        width: 100% !important;
        height: auto !important;

        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }
}