/* #region Index Layout */


/* =========================================================
   Conteneur général
   ========================================================= */

.index-page {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        25px
        400px
        30px;

    grid-template-rows: auto;

    align-items: start;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    position: relative;

    box-sizing: border-box;

}


/* =========================================================
   Layout principal
   ========================================================= */

.index-layout {

    grid-column: 1;

    grid-row: 1;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

}


/* =========================================================
   Contenu principal
   ========================================================= */

.index-main {

    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

}


/* =========================================================
   Conteneur des composants
   ========================================================= */

.index-content {

    display: flex;

    flex-direction: column;

    gap: 10px;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    padding: 10px;

    box-sizing: border-box;

}


/* =========================================================
   Blocs principaux
   ========================================================= */

.index-content > * {

    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

}


/* =========================================================
   Blocs Gutenberg
   ========================================================= */

.index-content .wp-block-group,
.index-content .wp-block-columns,
.index-content .wp-block-column,
.index-content .wp-block-cover,
.index-content .wp-block-media-text,
.index-content .wp-block-image {

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

}


/* =========================================================
   Blocs alignwide et alignfull
   ========================================================= */

.index-content .alignwide,
.index-content .alignfull {

    width: 100%;

    max-width: 100%;

    margin-left: 0;

    margin-right: 0;

    box-sizing: border-box;

}


/* =========================================================
   Séparateur Facebook responsive
   ========================================================= */

.facebook-responsive-separator {

    display: none;

}


/* #endregion Index Layout */


/* =========================================================
   INDEX LAYOUT — DESKTOP
   ========================================================= */

@media (min-width: 1081px) {

    .facebook-column {

        margin-top: -96px !important;

            width:400px !important;

        min-width:400px !important;

    }

}


/* =========================================================
   INDEX LAYOUT — TABLETTE + MOBILE
   ========================================================= */

@media (max-width: 1080px) {


    /* =====================================================
       Conteneur général
       ===================================================== */

    .index-page {

        display: flex;

        flex-direction: column;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;

    }


    /* =====================================================
       Facebook
       ===================================================== */

    .facebook-column {

        order: 1;

        display: block;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        position: relative !important;

        z-index: 1;

        box-sizing: border-box;

        overflow: visible;

    }


    /* =====================================================
       Séparateur Facebook
       ===================================================== */

    .facebook-responsive-separator {

        order: 2;

        display: block;

        width: 100%;

        max-width: 100%;

        margin-top: 30px;

        margin-bottom: 30px;

        box-sizing: border-box;

    }


    /* =====================================================
       Layout principal
       ===================================================== */

    .index-layout {

        order: 3;

        width: 100%;

        max-width: 100%;

        min-width: 0;

        position: relative;

        z-index: 2;

        box-sizing: border-box;

    }


    /* =====================================================
       Contenu principal
       ===================================================== */

    .index-main {

        width: 100%;

        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;

    }


    /* =====================================================
       Conteneur des composants
       ===================================================== */

    .index-content {

        width: 100%;

        max-width: 100%;

        min-width: 0;

        padding: 10px;

        box-sizing: border-box;

    }


    /* =====================================================
       Blocs principaux
       ===================================================== */

    .index-content > * {

        width: 100%;

        max-width: 100%;

        min-width: 0;

        box-sizing: border-box;

    }

}