/* ========================================================= */
/* RESPONSIVE MOBILE UNIQUEMENT */
/* Ne modifie rien sur ordinateur */
/* ========================================================= */

@media screen and (max-width: 950px)
{
    * {
        box-sizing:border-box;
    }

    html, body {
        margin:0;
        padding:0;
        width:100%;
        overflow-x:hidden;
        background-color:#02002D;
    }

    .contenantgeneral {
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:0 !important;
        background-color:#02002D;
    }

    .contenantreduit,
    .contenantreduit_bluelog,
    .contenantreduit_bluelog_connexion {
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
        padding-bottom:40px !important;
    }

    /* ENTÊTE */
    .entete {
        height:auto !important;
        min-height:0 !important;
        background-color:#02002D;
        padding:12px 0 0 0;
        overflow:hidden;
    }

    .contenuentetegauche,
    .contenuentetedroit,
    .contenuentetedroit_connexion,
    .contenuentetedroit_bluelog {
        position:static !important;
        float:none !important;
        display:block !important;
        width:100% !important;
        text-align:center !important;
    }

    .contenuentetegauche img {
        max-width:170px !important;
        height:auto !important;
        margin:0 auto 8px auto;
        display:block;
    }

    .connexionbluelog,
    .connexionbluelog_ok {
        position:static !important;
        float:none !important;
        display:block !important;
        width:100% !important;
        text-align:center !important;
        color:#d3ff00 !important;
        font-size:13px !important;
        padding:8px 0 12px 0 !important;
        margin:0 !important;
        background-color:#02002D !important;
    }

    .connexionbluelog a,
    .connexionbluelog_ok a {
        color:#d3ff00 !important;
        text-decoration:none;
    }

    /* MENU PRINCIPAL MOBILE */
    .menubandeau,
    .menubandeau_2,
    .menubandeau_6 {
        position:static !important;
        float:none !important;
        width:100% !important;
        height:auto !important;
        margin:0 !important;
        padding:10px !important;
        top:0 !important;
        background-color:#02002D !important;
    }

    .menubandeau ul,
    .menubandeau_2 ul,
    .menubandeau_6 ul {
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:8px !important;
        padding:0 !important;
        margin:0 !important;
    }

    .menubandeau li,
    .menubandeau_2 li,
    .menubandeau_6 li {
        float:none !important;
        border:none !important;
        width:auto !important;
        margin:0 !important;
    }

    .menubandeau ul li a,
    .menubandeau_2 ul li a,
    .menubandeau_6 ul li a {
        float:none !important;
        display:block !important;
        width:auto !important;
        min-width:105px !important;
        height:auto !important;
        padding:10px 14px !important;
        border-radius:20px !important;
        background-color:rgba(255,255,255,0.12) !important;
        color:white !important;
        font-size:14px !important;
        font-weight:bold !important;
        text-align:center !important;
        border:1px solid rgba(255,255,255,0.25);
    }

    .menubandeau ul li a:hover,
    .menubandeau_2 ul li a:hover,
    .menubandeau_6 ul li a:hover,
    .menubandeau ul li a.actif,
    .menubandeau_2 ul li a.actif,
    .menubandeau_6 ul li a.actif {
        background-color:#8bc1e3 !important;
        color:#02002D !important;
    }

    /* BANDEAU IMAGE */
    .bandeau {
        margin:0 !important;
        width:100% !important;
        overflow:hidden;
    }

    .bandeau img {
        display:block;
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
    }

    /* SOUS-MENU BLUELOG */
    .menubandeau_8 {
        position:static !important;
        float:none !important;
        width:100% !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
        top:0 !important;
        background-color:#8bc1e3 !important;
    }

    .menubandeau_8 ul {
        display:flex !important;
        flex-wrap:nowrap !important;
        padding:0 !important;
        margin:0 !important;
        width:100% !important;
    }

    .menubandeau_8 li {
        float:none !important;
        width:50% !important;
        border:none !important;
        margin:0 !important;
    }

    .menubandeau_8 ul li a {
        float:none !important;
        display:block !important;
        width:100% !important;
        height:auto !important;
        padding:14px 5px !important;
        background-color:#8bc1e3 !important;
        color:white !important;
        text-align:center !important;
        font-size:14px !important;
        text-decoration:none !important;
    }

    .menubandeau_8 ul li a.actif,
    .menubandeau_8 li.actif a {
        background-color:white !important;
        color:black !important;
        font-weight:bold !important;
    }

    /* CONTENU */
    .contenugauche,
    .contenucentre,
    .contenugauche_agenda {
        width:100% !important;
        padding:10px !important;
        margin:0 !important;
        background-color:white;
        overflow-x:auto;
    }

    img {
        max-width:100%;
        height:auto;
    }

    table {
        max-width:100%;
    }

    /* COLONNES */
    .colonneunesurdeux,
    .colonnedeuxsurdeux {
        float:none !important;
        width:100% !important;
    }

    .infos_droites {
        float:none !important;
        width:auto !important;
        max-width:100% !important;
        margin:10px 0 !important;
    }

    /* PIED DE PAGE */
    .pieddepage,
    .pieddepage_bluelog {
        position:relative !important;
        width:100% !important;
        height:auto !important;
        bottom:auto !important;
        padding:15px !important;
    }
}
@media screen and (max-width:950px)
{
    .menubandeau li.actif,
    .menubandeau ul li.actif {
        background:white !important;
    }

    .menubandeau li.actif a,
    .menubandeau ul li.actif a,
    .menubandeau ul li a.actif {
        display:block !important;
        width:100% !important;
        height:auto !important;
        background:white !important;
        color:black !important;
        font-weight:bold !important;
        box-sizing:border-box !important;
    }
}

.menu_top_console {
    display:inline-block;

    width:130px;
    height:78px;

    padding-top:12px;
    padding-left:18px;

    box-sizing:border-box;

    background:#02002a;

    color:white;
    text-decoration:none;

    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;

    vertical-align:top;

    border-bottom:4px solid #dcdcdc;
}

.menu_top_console:hover {
    background:#17175f;
}

.menu_top_console.actif {
    background:#27348b;
    border-bottom:4px solid #d3ff00;
}
	@media screen and (max-width:950px)
{
    .menu_top_console {
        width:auto;
        height:auto;

        padding:9px 14px;
        margin:4px;

        border-radius:20px;
        border-bottom:none;

        background:rgba(255,255,255,0.12);

        font-size:14px;
        text-align:center;
    }

    .menu_top_console.actif {
        background:#8bc1e3;
        color:#02002D;
        border-bottom:3px solid #d3ff00;
    }

    .menu_top_console:hover {
        background:#8bc1e3;
        color:#02002D;
    }
}
	@media screen and (max-width:950px)
{
    .menu_top_console_conteneur {
        text-align:center;
        padding:8px 6px;
        background:#02002D;
    }
}
/* ========================================================= */
/* RESPONSIVE CONSOLE BLUELOG */
/* Complément pour les nouvelles pages console */
/* ========================================================= */

@media screen and (max-width:950px)
{
    .bloc_console {
        width:100% !important;
        max-width:100% !important;
        margin:0 0 15px 0 !important;
        padding:12px !important;
        box-sizing:border-box !important;
        overflow-x:auto !important;
    }

    .bloc_console h1,
    .bloc_console h2,
    .bloc_console h3 {
        margin-top:0 !important;
    }

    .table_console {
        width:100% !important;
        min-width:850px !important;
        font-size:12px !important;
    }

    .table_console th,
    .table_console td {
        padding:6px !important;
    }

    .contenucentre form,
    .bloc_console form {
        width:100% !important;
        box-sizing:border-box !important;
    }

    .contenucentre label,
    .bloc_console label {
        display:block !important;
        margin-top:8px !important;
        margin-bottom:4px !important;
    }

    .contenucentre select,
    .bloc_console select {
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        margin:0 0 10px 0 !important;
    }

    .contenucentre textarea,
    .bloc_console textarea {
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .bouton_console {
        display:block !important;
        width:100% !important;
        margin:6px 0 !important;
        padding:10px !important;
        box-sizing:border-box !important;
        text-align:center !important;
    }

    .bloc_console .bouton_console {
        white-space:normal !important;
    }

    code {
        white-space:pre-wrap !important;
        word-break:break-word !important;
    }
}

/* Très petit écran : tableaux en scroll confortable */
@media screen and (max-width:600px)
{
    .table_console {
        min-width:720px !important;
        font-size:11px !important;
    }

    .contenucentre {
        padding:8px !important;
    }

    h1 {
        font-size:21px !important;
    }

    h2 {
        font-size:18px !important;
    }
}

@media screen and (max-width:950px)
{
    .contenucentre,
    .contenugauche,
    .contenugauche_agenda,
    .bloc_console {
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
    }

    .contenucentre table,
    .contenugauche table,
    .contenugauche_agenda table,
    .bloc_console table {
        width:auto !important;
        min-width:850px !important;
        max-width:none !important;
        table-layout:auto !important;
    }

    .contenucentre th,
    .contenucentre td,
    .contenugauche th,
    .contenugauche td,
    .contenugauche_agenda th,
    .contenugauche_agenda td,
    .bloc_console th,
    .bloc_console td {
        white-space:normal !important;
    }
}