/*exo 2 200 400 600 700 900*/
body {
    background-color: #FFF;
    background-image: url(../images/fond.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    font-family: 'Exo 2', sans-serif;
    margin: 0;
}

a {
    color: #004c74;
}

    a:hover {
        color: #ff7f37;
    }

h1 {
    color: #ff7f37;
    font-weight: bold;
    font-size: 36px;
}

/*#endregion */

.stop {
    clear: both;
}

/*#region PUB */

.fermer {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
    background-image: url(../JQuery/fancybox_sprite.png);
}

#pub {
    position: relative;
}


/*#endregion */

/*#region BANDEAU */
#toggleMenu {
    display: none;
}

#bandeau {
    position: relative;
}

    #bandeau > div {
        max-width: 1484px;
        /*min-width: 980px;*/
        margin: auto;
        position: relative;
        text-align: left;
    }

    #bandeau #logo {
        float: left;
    }

        #bandeau #logo a {
            margin: 30px 10px 0 55px;
            vertical-align: middle;
            display: inline-block;
        }

.logoPetit {
    display: none;
}

#bandeau .titreBandeau {
    position: absolute;
    top: 112px;
    left: 195px;
    display: block;
    vertical-align: middle;
    font-size: 21px;
    font-weight: normal;
    font-style: italic;
    color: #bfbfbf;
    /* width: 310px; */
    text-align: left;
}

#bandeau #espaceEtPanier {
    vertical-align: middle;
    display: inline-block;
    margin-top: 26px;
    text-align: right;
    float: right;
    margin-right: 55px;
}



#bandeau .pictoBandeau {
    display: inline-block;
    vertical-align: middle;
    margin: 0 28px 0 54px;
    cursor: pointer;
    background-repeat: no-repeat;
}

#tel {
    font-weight: 100;
    font-size: 24px;
    line-height: 35px;
    vertical-align: middle;
    display: inline-block;
    background-image: url(../images/contact.png);
    background-position: left center;
    background-repeat: no-repeat;
    padding-left: 55px;
    margin-top: 30px;
    position: relative;
}

#lienContact {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 55px;
    height: 100%;
}

#google_translate_element {
    line-height: 15px;
    font-size: 12px;
    text-align: right;
    margin-top: 10px;
}

#loupe {
    width: 32px;
    height: 29px;
    position: relative;
    background-image: url(../images/loupe.png);
    z-index: 10;
}

    #loupe .montantArticle {
        text-transform: uppercase;
        bottom: -27px;
    }

.user {
    width: 41px;
    height: 29px;
    background-image: url(../images/user.png);
    position: relative;
}

    .user.logged {
        background-image: url(../images/userIn.png);
    }

    .user .nomClient {
        width: 158px;
        color: #ff7f37;
        border-radius: 3px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 14px;
        padding: 3px 5px;
        text-align: center;
        position: absolute;
        top: 30px;
        left: 50%;
        margin: auto;
        margin-left: -77px;
        font-weight: bold;
    }

.panier {
    width: 42px;
    height: 35px;
    background-image: url(../images/panier.png);
    background-position: left center;
    background-repeat: no-repeat;
    text-align: left;
    padding-left: 37px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 22px;
    line-height: 35px;
    text-decoration: none;
    color: black;
    position: relative;
}

    .panier .nombreArticle {
        min-width: 32px;
        background-color: #ff7f37;
        border-radius: 50%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #004c74;
        font-size: 24px;
        line-height: 32px;
        text-align: center;
        position: absolute;
        top: -16px;
        right: -15px;
        font-weight: bold;
    }

.pictoBandeau .montantArticle {
    min-width: 90px;
    background-color: #ff7f37;
    border-radius: 8px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    font-size: 13px;
    line-height: 14px;
    padding: 4px 8px;
    text-align: center;
    position: absolute;
    bottom: -25px;
    left: 50%;
    margin: auto;
    margin-left: -45px;
    font-weight: bold;
}

.panier .saisieExpress {
    /* width: 100%; */
    text-align: center;
    position: absolute;
    bottom: -51px;
    left: -16px;
    font-size: 11px;
    white-space: nowrap;
    font-weight: bold;
    color: #004c74;
}

.leH2 {
    display: block;
    margin: 20px 0;
    vertical-align: middle;
    font-size: 24px;
    color: #004c74;
    text-align: center;
    font-weight: normal;
}


/*#endregion */

/*#region FOCUS */

#gammesReferencement {
    background-color: white;
    font-family: 'PT Sans', sans-serif;
    border-top: solid 0.1em #f0f0f0;
}

    #gammesReferencement > div {
        max-width: 1484px;
        /*min-width: 980px;*/
        margin: auto;
        position: relative;
        background-image: url(../images/focus.png);
        background-repeat: no-repeat;
        background-position: 0px 0px;
    }

    #gammesReferencement #contenuGammesReferencement {
        margin-left: 155px;
    }

        #gammesReferencement #contenuGammesReferencement ul {
            display: block;
            padding: 36px 0 20px 0px;
            list-style-type: none;
            box-shadow: 10px 10px 0px rgba(0,0,0,.1);
            margin: 0;
        }

            #gammesReferencement #contenuGammesReferencement ul li {
                display: inline-block;
                width: 385px;
                padding-left: 35px;
                margin-bottom: 5px;
                vertical-align: top;
            }

                #gammesReferencement #contenuGammesReferencement ul li a {
                    color: #ff7f37;
                    text-decoration: none;
                    font-size: 16px;
                }

                    #gammesReferencement #contenuGammesReferencement ul li a:before {
                        content: "- ";
                    }
/*#endregion */

/*#region PIED */
#pied {
    background-color: #d6d6d6;
    padding: 30px;
}

    #pied > div {
        max-width: 1484px;
        /*min-width: 980px;*/
        margin: auto;
        position: relative;
    }

    #pied #newsletter {
        float: right;
        margin-right: 48px;
    }

        #pied #newsletter iframe {
            border-width: 0;
            width: 424px;
            height: 250px;
        }
/*#endregion */

/*#region SOUS PIED */

#sousPied {
    background-color: #3d3d3d;
    color: #d6d6d6;
    border-bottom: 40px solid white;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    #sousPied > div {
        max-width: 1484px;
        /*min-width: 980px;*/
        margin: auto;
        position: relative;
    }

    #sousPied #adresse {
        font-size: 12px;
        line-height: 17px;
        padding: 10px 50px;
    }

    #sousPied #reseaux {
        position: absolute;
        right: 0;
        top: 0;
        padding: 6px 120px 10px 5px;
        font-size: 18px;
    }

#pied nav {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    width: 900px;
    float: right;
    -moz-column-rule: 1px solid white;
    -webkit-column-rule: 1px solid white;
    column-rule: 1px solid white;
}

    #pied nav a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 5px 0;
    }

.pictoReseau {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 10px 5px 0 0;
}

    .pictoReseau:hover {
        background-color: #666;
    }

#googlePlus {
    background-image: url(../images/googlePlus.png);
}

#twitter {
    background-image: url(../images/twitter.png);
}

#facebook {
    background-image: url(../images/facebook.png);
}
/*#endregion */

/*#region bouton */

.contenantBouton {
    display: inline-block;
    margin: 3px;
}

    .contenantBouton a.bouton {
        display: inline-block;
        background-color: #ff7f37;
        border-radius: 5px;
        border-width: 0;
        color: white;
        cursor: pointer;
        padding: 10px 15px;
        font-family: 'Exo 2', sans-serif;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
    }

    .contenantBouton.bouton2 a.bouton {
        display: inline-block;
        background-color: transparent !important;
        border-radius: 5px;
        border-width: 0;
        color: white;
        cursor: pointer;
        padding: 10px 15px;
        font-family: 'Exo 2', sans-serif;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid #ff7f37;
    }

    .contenantBouton.bouton3 a.bouton {
        display: inline-block;
        background-color: white !important;
        border-radius: 5px;
        border-width: 0;
        color: #ff7f37;
        cursor: pointer;
        padding: 10px 15px;
        font-family: 'Exo 2', sans-serif;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        border: 1px solid #ff7f37;
        text-align: center;
    }

    .contenantBouton.icon a.bouton {
        display: inline-block;
        background-color: transparent !important;
        border-radius: 0px;
        border-width: 0;
        color: #ff7f37;
        cursor: pointer;
        padding: 2px 5px;
        font-family: 'Exo 2', sans-serif;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

/*#endregion */

/*#region contenu et chemin */
#contenu {
    max-width: 1484px;
    /*min-width: 980px;*/
    margin: auto;
    position: relative;
    text-align: left;
    min-height: 600px;
}

.Panel_chemin {
    color: #21bbef;
    padding: 10px;
}

    .Panel_chemin a {
        color: #21bbef;
        text-decoration: none;
        font-size: 16px;
    }

        .Panel_chemin a:hover {
            text-decoration: underline;
        }
/*#endregion */

/*#region listes */

.liste {
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
    list-style-type: none;
    margin: 15px 0 15px 0;
    padding: 0;
}

    .liste .element a {
        display: inline-block;
        background-image: url(../images/puceVerte.png);
        background-position: left center;
        background-repeat: no-repeat;
        padding: 0px 0 0px 15px;
        margin-left: 15px;
        color: #004c74;
        text-decoration: none;
        -moz-transition: all ease .2s;
        -o-transition: all ease .2s;
        -webkit-transition: all ease .2s;
        transition: all ease .2s;
        font-size: 0.85em;
    }

        .liste .element a:hover {
            color: #21bbef;
        }

    .liste .lettre span {
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        background-color: #cbe806;
        padding-top: 3px;
        margin-top: 10px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 30px;
        width: 30px;
        text-align: center;
        border-radius: 50%;
    }

/*#endregion */

/*#region listes gammes */

.listeGammes {
    list-style-type: none;
    margin: 15px 0 15px 0;
    padding: 0;
}

    .listeGammes .vGamme {
        display: block;
        float: left;
        margin: 0px;
        padding: 0px;
    }

        .listeGammes .vGamme > a {
            display: block;
            position: relative;
            background-position: center center;
            background-size: contain;
            background-repeat: no-repeat;
            width: 207px;
            height: 207px;
            margin: 0 20px 20px 0;
            text-decoration: none;
            box-shadow: 10px 10px 0px rgba(0,0,0,.1);
            -moz-transition: all ease .2s;
            -o-transition: all ease .2s;
            -webkit-transition: all ease .2s;
            transition: all ease .2s;
            background-color: white;
            border: 1px solid #eee;
        }

            .listeGammes .vGamme > a > .logoMarque {
                display: block;
                position: relative;
                background-position: center center;
                background-size: contain;
                background-repeat: no-repeat;
                width: calc( 100% - 60px );
                height: calc( 100% - 60px );
                margin: 20px 30px 30px 30px;
                box-sizing: border-box;
            }

            .listeGammes .vGamme > a > .etiquettePromo {
                height: 29px;
                width: 94px;
                background-image: url(../images/promo.png);
                position: absolute;
                top: 10%;
                left: 0px;
            }

            .listeGammes .vGamme > a:hover {
                -moz-transform: scale(1.02);
                -ms-transform: scale(1.02);
                -o-transform: scale(1.02);
                -webkit-transform: scale(1.02);
                transform: scale(1.02);
            }

        .listeGammes .vGamme .titreVignette {
            width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            text-align: center;
            color: #fff;
            font-size: 16px;
            font-weight: normal;
            background-color: #004c74;
            text-decoration: none;
            position: absolute;
            bottom: 0;
        }

#filtreLettres {
    max-width: 990px;
    margin: 30px auto;
    text-align: center;
    padding: 10px 70px 0 70px;
    font-size: 20px;
    font-family: 'Oswald', sans-serif;
    color: #0080c8;
}

    #filtreLettres div {
        display: inline-block;
        text-transform: uppercase;
        padding: 2px 11px;
        cursor: pointer;
        margin: 0 0;
        transition: all ease .2s;
        border-radius: 50%;
    }

        #filtreLettres div:hover, #filtreLettres div.active {
            background-color: #ff7f37;
            color: white;
        }
/*#endregion */
/*#region blockUI recherche */

.blockMsg {
    border: 5px solid #ff7f37;
    border-color: #ff7f37 !important;
    border-radius: 10px;
    color: #ff7f37 !important;
    font-size: 30px;
    font-weight: bold;
    box-shadow: 10px 10px 0px rgba(0,0,0,.1) !important;
}

    .blockMsg .loading {
        margin: 15px 0;
    }

/*#endregion */
/* todo style des liens dans le blockui client*/

.messageErreur {
    color: #21bbef !important;
    font-weight: bold;
    text-align: center;
}

.inputIdentification {
    font-size: 15px;
    border: 1px solid #ebedf0;
    padding: 10px 10px;
    background-color: white;
    border-radius: 5px;
    font-family: 'Exo 2', sans-serif;
    margin: 0 10px;
}

.dataFiltre {
    font-size: 15px;
    border: 1px solid #ebedf0;
    padding: 10px 10px;
    background-color: white;
    border-radius: 5px;
    font-family: 'Exo 2', sans-serif;
    margin: 0 10px;
}

a.BoutonOK {
    color: black;
    font-size: 1em;
}


@media screen and (min-width: 1024px) and (max-width: 1439px) {
    /*#region bandeau */
    .user .nomClient {
        width: 125px;
        margin-left: -61px;
        font-size: small;
    }

    #bandeau #logo a {
        margin: 30px 10px 0 30px;
        vertical-align: middle;
        display: inline-block;
    }

    #bandeau .pictoBandeau {
        margin: 0 28px 0 38px;
    }

    #bandeau .titreBandeau {
        left: 165px;
        top: 115px;
    }

    #tel {
        padding-left: 37px;
        font-size: 18px;
    }

    #bandeau #espaceEtPanier {
        float: right;
        margin-right: 15px;
    }
    /*#endregion */

    #pied nav {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        width: 450px;
        float: right;
        -moz-column-rule: 1px solid white;
        -webkit-column-rule: 1px solid white;
        column-rule: 1px solid white;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {



    #contenu {
        padding: 10px;
    }
    /*#region bandeau */
    #bandeau {
        text-align: center;
    }

        /*#bandeau #logo {
            float: none;
            margin: auto;
            text-align: center;
        }*/

        #bandeau #logo a {
            margin: 50px 0 0 10px;
            display: inline-block;
        }

            #bandeau #logo a img {
                max-width: 300px;
            }

        #bandeau .pictoBandeau {
            margin: 0 28px 0 38px;
        }

        #bandeau .titreBandeau {
            display: block;
            position: absolute;
            background-color: black;
            color: white;
            top: 0;
            left: 0;
            margin: 0;
            vertical-align: middle;
            font-size: 14px;
            font-weight: normal;
            font-style: italic;
            color: #bfbfbf;
            text-align: left;
            padding: 5px 10px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
        }

    .user .nomClient {
        width: 125px;
        margin-left: -61px;
        font-size: small;
    }

    #tel {
        position: absolute;
        background-color: black;
        color: white;
        line-height: 27px;
        top: 0;
        right: 0;
        margin: 0;
        padding-left: 117px;
        padding-right: 10px;
        font-size: 14px;
        background-image: none;
    }

    #bandeau #loupe {
        display: none;
    }

    #lienContact {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: 100%;
        text-decoration: none;
    }

        #lienContact::before {
            content: "Nous contacter";
            color: white;
            text-decoration: none;
        }

        #lienContact::after {
            content: "|";
            color: white;
            text-decoration: none;
            margin-left: 10px
        }

    #google_translate_element {
        display: none !important;
    }

    #bandeau #espaceEtPanier {
        display: block;
        float: right;
        text-align: center;
        margin: 55px 20px 40px 0;
        padding-top: 0;
    }
    /*#endregion */
    #diaporama {
        display: none;
    }

    #pied #newsletter {
        margin-right: 17px;
    }

    #pied nav {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        width: 230px;
        float: right;
        -moz-column-rule: 1px solid white;
        -webkit-column-rule: 1px solid white;
        column-rule: 1px solid white;
    }

        #pied nav a {
            padding: 2px 0;
        }

    #sousPied #adresse {
        padding: 10px 150px 10px 50px;
    }

    #sousPied #reseaux {
        padding: 6px 20px 10px 5px;
    }
}

@media screen and (min-width: 1px) and (max-width: 767px) {
    #toggleMenu {
        display: block;
        float: left;
        color: #004c74;
        text-align: center;
        font-size: 60px;
        font-weight: normal;
        text-transform: uppercase;
        line-height: 50px;
        margin-top: 50px;
        margin-left: 15px;
        margin-right: 10px;
    }

    #contenu {
        padding: 10px;
    }

    #bandeau #loupe {
        display: none;
    }

    .liste {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

        .liste .element a {
            display: inline-block;
            background-image: url(../images/puceVerte.png);
            background-position: left center;
            background-repeat: no-repeat;
            padding: 5px 0 5px 15px;
            margin-left: 15px;
            color: #21bbef;
            text-decoration: none;
            -moz-transition: all ease .2s;
            -o-transition: all ease .2s;
            -webkit-transition: all ease .2s;
            transition: all ease .2s;
            font-size: 16px;
        }

    /*#region bandeau */
    #bandeau #logo a {
        margin: 50px 0 64px 10px;
    }

        #bandeau #logo a img {
            max-width: 300px;
        }

    #bandeau .pictoBandeau {
        margin: 0 28px 0 20px;
    }

    #bandeau .titreBandeau {
        display: none;
    }

    #tel {
        position: absolute;
        background-color: black;
        color: white;
        line-height: 27px;
        width: 100%;
        box-sizing: border-box;
        top: 0;
        right: 0;
        margin: 0;
        padding-left: 0px;
        padding-right: 10px;
        font-size: 14px;
        background-image: none;
        text-align: right
    }

    #bandeau #loupe {
        display: none;
    }

    #lienContact {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: auto;
        height: 100%;
        text-decoration: none;
    }

        #lienContact::before {
            content: "Nous contacter";
            color: white;
            text-decoration: none;
            margin-left: 10px;
        }

        #lienContact::after {
            content: "";
            color: white;
            text-decoration: none;
            margin-left: 10px;
        }

    .panier .saisieExpress {
        display: none;
    }

    #bandeau #espaceEtPanier {
        float: right;
        margin-top: 65px;
        margin-bottom: 10px;
        margin-right: 10px;
        padding-right: 0;
        width: auto;
        text-align: center;
    }
    /*#endregion */
    #diaporama {
        display: none;
    }

    #gammesReferencement {
        display: none;
    }

    #newsletter {
        display: none;
    }

    #sousPied #reseaux {
        position: relative;
        display: block;
        text-align: center;
        padding: 0;
        margin: 10px 0;
    }

    #pied {
        display: none;
    }

    #sousPied #adresse {
        text-align: center;
        padding: 0 10px;
    }

    .blockMsg {
        border: 5px solid #ff7f37;
        border-color: #ff7f37 !important;
        border-radius: 10px;
        color: #ff7f37 !important;
        font-size: 20px;
        font-weight: bold;
        box-shadow: 10px 10px 0px rgba(0,0,0,.1) !important;
        padding: 10px !important;
    }

        .blockMsg img {
            max-width: 50%;
        }
}

@media screen and (min-width: 1px) and (max-width: 600px) {
    #bandeau #logo img.logoGrand {
        max-width: 100%;
    }

    #bandeau #logo img.logoPetit {
        max-width: 100px;
    }

    .logoPetit {
        display: block;
    }

    .logoGrand {
        display: none;
    }
}

@media screen and (min-width: 375px) and (max-width: 424px) {
    #bandeau #logo img.logoPetit {
        max-width: 90px;
    }

    .logoPetit {
        display: block;
    }

    .logoGrand {
        display: none;
    }
}

@media screen and (min-width: 1px) and (max-width: 374px) {

    #bandeau #espaceEtPanier {
        float: right;
        margin-top: 40px;
        margin-bottom: 10px;
        margin-right: 5px;
        padding-right: 0;
        width: auto;
        text-align: center;
    }

    #bandeau #logo a {
        margin: 37px 0 70px 5px;
    }

    #bandeau #logo img.logoPetit {
        max-width: 60px;
    }

    #toggleMenu {
        font-size: 50px;
        font-weight: normal;
        text-transform: uppercase;
        line-height: 50px;
        margin-top: 30px;
        margin-left: 5px;
        margin-right: 5px;
    }
}

.zoneImprimer {
    margin: 20px 0;
    text-align: right;
}

#animCaddie {
    position: absolute;
    display: none;
    z-index: 1001;
}

#animCaddieLoader {
    position: absolute;
    top: -8px;
    left: -8px;
}


.radioButtonAdresse {
    display: block;
}

    .radioButtonAdresse label {
        display: inline-block;
        color: gray;
        margin-bottom: 10px;
    }

    .radioButtonAdresse input {
        vertical-align: top;
    }

        .radioButtonAdresse input:checked + label {
            color: black;
        }