@charset "UTF-8";
/* CSS Document */

div {
    display: block
}

.bold, .go, .entete, footer #newsletter span, .prix {
    font-family: Worken_black, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal
}

strong, input {
    font-family: Worken_roman, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal
}

li, ul {
    list-style-type: none
}

.produit .info br {
    content: " ";
    margin-right: 5px;
}


.left {
    float: left
}

.center {
    text-align: center
}

.right {
    float: right
}

#TOP {
    min-width: 965px;
    margin-left: 15px;
    padding-top: 20px
}

#CONTENU-A {
    position: relative
}

#CONTENU-B {
}


#COL-G {
    float: left
}

#COL-C {
    float: left;
    margin-right: 330px
}

#COL-D {
    width: 300px;
    position: absolute;
    right: 15px
}

.entete h2 {
    margin: inherit
}

#COL-H {
    text-transform: uppercase
}

#demi {
    float: left;
    width: 50%
}

#tiers {
    float: left;
    width: 33.33333333333%
}

#quart {
    float: left;
    width: 25%
}

.ligneA {
    height: 25px;
    line-height: 24px;
    font-size: 11px
}

.ligneB {
    height: 50px;
    line-height: 50px;
    background-color: #FC0
}

.lien {
    color: #999
}

.assu {
    height: 60px;
    font-size: 12px
}

.assu a {
    text-decoration: none;
    color: #000;
    display: block;
    height: 45px
}

.garantie a {
    background: url(../img/garantie.jpg) no-repeat 0 5px;
    padding: 15px 5px 0 50px
}

.stock a {
    background: url(../img/stock.jpg) no-repeat 0 5px;
    padding: 15px 5px 0 70px
}

.livraison a {
    background: url(../img/livraison.jpg) no-repeat 0 5px;
    padding: 15px 10px 0 85px
}

.securise a {
    background: url(../img/securise.jpg) no-repeat 0 5px;
    padding: 15px 5px 0 70px
}


/*---------------------------------------------------------------------------------------------------------------------*/

#LISTE-Z {
    margin: 0 0 10px 0
}

.entete {
    margin: 0 0 5px 0
}

.entete {
    font-size: 22px;
    width: 100%;
    height: 35px;
    line-height: 30px;
    background: url(../img/hr2.jpg) no-repeat bottom left;
    padding: 5px 0 0 0;
    overflow: hidden;
    border-top: 1px solid #CCC;
    color: #FC0;
    text-transform: uppercase
}

/*---------------------------------------------------------------------------------------------------------------------*/

.entete h2 {
    font-size: 22px
}

.go {
    display: inline-block;
    float: left;
    font-size: 11px;
    width: 60px;
    height: 20px;
    color: #333;
    background: #FFF url(../img/fleche-9-333.gif) no-repeat 50px 0;
    padding: 0 5px 0 5px;
    line-height: 20px;
    clear: both
}

.go {
    text-align: left;
    text-transform: uppercase
}

#LISTE-Z {
    width: 100%;
    overflow: hidden;
    background-color: #FFF
}

.decouvrir #LISTE-Z {
    width: inherit
}

.decouvrir {
    min-width: 55%
}

.z-produits {
    height: 255px
}

.decouvrir .z-produits {
    height: 230px
}

.z-rubrique {
    height: 480px
}

.details {
    font-size: 12px;
    color: #333;
    background: #FFF url(../img/fleche-9-333.gif) no-repeat;
    padding: 0 0 0 15px;
    display: inline-block;
    margin-bottom: 10px
}

.details:hover, a.SELECT:hover {
    text-decoration: none
}

.prix {
    text-align: left;
    text-transform: uppercase
}

.prix {
    font-size: 20px;
    color: #F33;
}


.decouvrir .prix {
    font-size: 15px
}

.prix strike {
    font-size: 13px;
    color: #000
}

#PRODUIT-Z {
    width: 180px;
    height: 250px;
    position: relative;
    display: inline-block;
    text-align: center;
    background-color: #FFF;
    margin: 0 5px 10px 0
}

.decouvrir #PRODUIT-Z {
    width: 160px;
    height: 220px
}

#PRODUIT-Z img {
    max-width: 120px;
    max-height: 185px;
    padding: 10px 30px 0 30px;
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0
}

.decouvrir #PRODUIT-Z img {
    max-width: 80px;
    max-height: 125px
}

#PRODUIT-Z a {
    text-decoration: none
}

#PRODUIT-Z .descriptif {
    position: absolute;
    bottom: 0;
    background-image: url(../img/FFF-80.png);
    padding: 5px 0 10px 10px;
    width: 170px
}

.decouvrir #PRODUIT-Z .descriptif {
    width: inherit
}

#PRODUIT-Z .titre {
    font-size: 11px;
    text-transform: uppercase;
    text-align: left;
    color: #333;
    margin-bottom: 5px;
    height: 40px;
    overflow: hidden
}

div#PRODUIT-Z:hover DIV.go {
    color: #FFF;
    background: #666 url(../img/fleche-9-FFF.gif) no-repeat 50px 0
}

div#PRODUIT-Z {
    border: 1px solid #FFF
}

div#PRODUIT-Z:hover {
    border: 1px solid #CCC
}

#RUB-Z {
    position: relative;
    text-transform: uppercase;
    width: 200px;
    height: 240px;
    display: inline-block;
    background-color: #FFF
}

#RUB-Z img {
    max-width: 140px;
    max-height: 130px;
    border: 2px solid #FFF;
    margin-bottom: 5px
}

#RUB-Z a {
    color: #000;
    text-decoration: none;
    border: 0
}

#RUB-Z .descriptif {
    position: absolute;
    top: 140px
}

#RUB-Z .titre {
    font-size: 12px;
    margin: 0 10px 5px 0
}

div#RUB-Z:hover DIV.go {
    color: #FFF;
    background: #666 url(../img/fleche-9-FFF.gif) no-repeat 50px 0
}

div#RUB-Z:hover img {
    border: 2px solid #CCC
}

div#RUB-Z:hover a {
    color: #F33
}

/*---------------------------------------------------------------------------------------------------------------------*/

div.wicket-modal div.w_caption {
}


div.wicket-modal div.w_content_3 {
    border: 0
}

div.wicket-modal div.w_content_1 span.titre {
    display: block;
    padding: 10px;
    font-family: Worken_black, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: oblique;
    color: #000;
    font-size: 17px;
    text-transform: uppercase
}

#resumeCommande {
    font-weight: normal;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e9e9e9
}

#resumeCommande TR:first-child {
    font-weight: normal;
    background-color: #e9e9e9
}

#resumeCommande TD:first-child {
    font-size: .8em
}

#resumeCommande TR {
    border: 1px solid #e9e9e9;
    height: 40px
}

#resumeCommande TH, #resumeCommande TD {
    font-weight: normal;
    padding: 15px;
    width: inherit
}

#resumeCommande TH {
    font-size: 10px;
    text-transform: uppercase;
    text-align: left
}

#resumeCommande TR TH:nth-child(3), #resumeCommande TR TD:nth-child(3) {
    text-align: right
}

#resumeCommande TR TH:nth-child(4), #resumeCommande TR TD:nth-child(4) {
    text-align: center
}

#resumeCommande TR TD:nth-child(3) {
    font-size: 15px;
    font-family: Worken_black, Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    text-align: right
}

#ligneCommandes {
    padding: 10px
}

div.wicket-modal .continuer, div.wicket-modal .passer_commande {
    display: inline-block;
    padding: 10px;
    text-decoration: none;
    margin-bottom: 10px
}

div.wicket-modal a.continuer, div.wicket-modal a.passer_commande {
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 10px 2%;
    text-decoration: none !important
}

div.wicket-modal a.continuer {
    float: left;
    font-size: 1em
}

div.wicket-modal a.passer_commande {
    float: right;
    font-size: 1.2em
}

/*---------------------------------------------------------------------------------------------------------------------*/

@media all and (min-width: 980px) {
    #COL-C {
        margin-left: 15px
    }
}


@media all and (max-width: 979px) {
    body {
        width: auto
    }

    .left {
        float: left
    }

    .center {
        text-align: center
    }

    .right {
        float: right
    }

    #TOP {
        min-width: 320px;
        margin-left: inherit;
        padding-top: 0
    }

    #CONTENU-A {
    }


    #CONTENU-B {
    }


    #COL-G {
    }


    #COL-C {
        margin-right: 0;
        max-width: 100%;
        padding: 15px
    }

    #COL-D {
        display: none
    }

    #demi {
        width: 100%
    }

    #tiers {
        width: 100%;
        float: left
    }

    #quart {
        width: 100%
    }

    .ligneA {
        display: none
    }

    .ligneB {
        height: 85px
    }

    .ligneC {
    }


    .ligneD {
        float: left;
        width: 100%;
        margin: 5% 0 0 0;
        height: inherit;
        line-height: inherit
    }

    header .ligneD {
        display: none
    }

    .ligneE {
        float: left;
        width: 100%;
        height: 60px;
        line-height: inherit
    }

    #CONTENU-A .assu {
        display: none
    }

    .assu a {
    }


    .garantie a {
    }


    .stock a {
    }


    .livraison a {
    }


    .securise a {
    }



    /*---------------------------------------------------------------------------------------------------------------------*/
    #LISTE-Z, .entete {
        margin: 0 0 5px 0
    }

    .entete {
        font-size: 20px;
        height: auto;
        padding: 10px 0 10px 0;
        line-height: 20px
    }

    /*---------------------------------------------------------------------------------------------------------------------*/
    .entete h2 {
        font-size: 20px
    }

    .go {
    }


    .titre, .go {
    }


    #LISTE-Z {
        overflow: inherit
    }

    .decouvrir #LISTE-Z {
        height: inherit
    }

    .z-produits {
        height: inherit
    }

    .z-rubrique {
        height: inherit
    }

    .details {
    }


    .details:hover {
    }


    .prix {
    }


    .prix {
    }


    .prix strike {
    }


    #PRODUIT-Z {
        width: 49%;
        max-width: 240px;
        height: auto;
        max-height: 320px;
        margin: 0
    }

    #PRODUIT-Z img {
        width: 70%;
        height: auto;
        max-width: 240px;
        max-height: 320px;
        padding: 5% 15% 35% 15%;
        position: static
    }

    #PRODUIT-Z a {
    }


    #PRODUIT-Z .descriptif {
        padding: 5% 0 5% 5%;
        width: 92%
    }

    #PRODUIT-Z .titre {
    }


    div#PRODUIT-Z:hover DIV.go {
    }


    div#PRODUIT-Z {
    }


    div#PRODUIT-Z:hover {
    }


    #RUB-Z {
        height: 165px;
        width: 50%;
        margin-bottom: 15%
    }

    #RUB-Z img {
    }


    #RUB-Z a {
    }


    #RUB-Z .descriptif {
        bottom: 15%
    }

    #RUB-Z .titre {
    }


    div#RUB-Z:hover DIV.go {
    }


    div#RUB-Z:hover img {
    }


    div#RUB-Z:hover a {
    }

    /*---------------------------------------------------------------------------------------------------------------------*/
    div.wicket-modal {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        width: inherit !important
    }

    div.wicket-modal h3.w_captionText {
        display: none
    }

    div.wicket-modal div.w_caption {
        padding: 0
    }

    div.wicket-modal div.w_content_1 span.titre {
        text-transform: none;
        font-style: normal;
        text-align: center;
        cursor: default;
        color: #666;
        padding: 2% 2% 1%
    }

    div#_wicket_window_3 {
        height: inherit !important
    }

    div.w_content br {
        display: none
    }
}


@media all and (max-width: 640px) {
    #resumeCommande TD:nth-child(2) {
        font-size: 12px
    }

    div.wicket-modal a.continuer {
        float: inherit;
        text-align: center
    }

    div.wicket-modal a.passer_commande {
        float: inherit;
        text-align: center
    }
}


@media (max-device-width: 768px) and(orientation: landscape) {
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%
    }
}


.rubriqueArticles {
    border: 1px solid black;
    border-radius: 10px;
    min-width: 300px;
    float: left;
    padding-left: 20px;
    margin-bottom: 20px;
}

#containerTutorials .ulArticle {
    display: block;
    padding: 3px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: oblique;
    font-weight: 200;
    background: none;
    border-bottom: none;
}

#containerTutorials {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.lienArticle {
    text-decoration-line: none;
    color: inherit;
}

.lienArticle:hover {
    text-decoration-line: underline;
    color: inherit;
    font-weight: 600;
}

.rubriqueArticles > .entete {
    border-top: none;
}