/* Général */
:root{
    --main-color:#800080;
    --light-color: #c26fb3;
    --dark-color:#5b2a5a;
    --darker-color:#341733;
    --red: #ff0000;
    --green: #007c36;
    --blue:#012172;
    --orange: #ff8000;
    --yellow:#fbff00;
    --light-blue: #3f8acd;
    --light-yellow: #fff068;
    --light-green: #03b19a;
    --light-red: #db524a;
    --light-orange: #ff9950;
    --light-pink: #e560a9;
    --light-purple: #e090f6;
}
body {
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size:14px;
    background: -moz-linear-gradient(180deg, rgba(0,0,24,1) 0%, rgba(1,51,146,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(0,0,24,1) 0%, rgba(1,51,146,1) 100%);
    background: linear-gradient(180deg, rgba(0,0,24,1) 0%, rgba(1,51,146,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000018,endColorstr=#013392,GradientType=1);
    background: #000018 url(images/ciel-nuit-large.jpg) no-repeat center center fixed;
    background-size:cover;
    min-width:100%;
}
b{
    font-weight:bold;
}
#content{
    min-height:calc(100vh - 199px);
    padding-top:30px;
}
#content .bloc-row{
    display:block;
    width:100%;
    float:left;
    padding:10px;
    border:2px solid var(--main-color);
    background:#fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
#content .bloc-blanc{
    background:#fff;
    padding:15px;
    display:block;
    float:left;
    width:100%;
}
.center{
    text-align:center;
}
/* Titres */
h2{
    font-size:22px;
    margin:15px 0;
}
.title-carre {
    display: block;
    clear: both;
    position: relative;
    width: 100%;
    padding: 10px 15px;
    line-height: 30px;
    margin-top: 15px;
    font-size: 16px;
    color: #000;
    background: #D8D9D9;
    border:0;
    border-radius: 4px;
    overflow:hidden;
    margin-bottom:0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
/* Boutons */
.btn{
    font-size:14px;
}
.main-btn{
    display:inline-block;
    background:var(--main-color);
    color:#fff !important;
    cursor:pointer;
    line-height:30px;
    text-align:center;
    padding:0 15px;
    text-decoration:none;
    border:1px solid #800080;
    white-space: normal;
}
.main-btn:hover{
    background: var(--dark-color);
    color:#fff !important;
    text-decoration:none;
}
.main-btn.active{
    background:#fff;
    color:#800080 !important;
    border:1px solid #800080;
}
.orange-btn{
    display:inline-block;
    background:var(--orange);
    color:#fff !important;
    cursor:pointer;
    line-height:30px;
    text-align:center;
    padding:0 15px;
    text-decoration:none;
}
.orange-btn:hover{
    background: var(--light-orange);
    color:#fff;
}
.orange-btn.selected{
    background:var(--light-purple);
}
.orange-btn.selected:hover{
    background: var(--light-color);
}
.btn-full{
    width:100%;
}

/* Prelaoder */
#preloader {
    width: 100vw;
    height: 100vh;
    background:#fff;
    position:relative;
}
#preloader svg {
    position:absolute;
    top:calc(50% - 51px);
    left:calc(50% - 51px);
    width: 102px;
    height: 102px;
}
@keyframes draw-small {
    0% { stroke-dashoffset: 0; transform: rotate(0deg); }
    100% { stroke-dashoffset: 210; transform: rotate(360deg); }
}
@keyframes draw-big {
    0% { stroke-dashoffset: 0; transform: rotateY(180deg) rotate(360deg); }
    100% { stroke-dashoffset: 240; transform: rotateY(180deg) rotate(0deg); }
}
#preloader .small-circle {
    stroke-dasharray: 210;
    stroke-dashoffset: 210;
    transform-origin: 50%;
    animation: 1s draw-small infinite alternate;
}
#preloader .big-circle {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    transform-origin: 50%;
    animation: 1s draw-big infinite alternate 0.5s;
}

/* En-tête */
#header{
    background:#1A0459;
}
#header .bottom-header {
    min-height: 50px;
}

/* Menu */
#menu ul {
    margin:30px 0;
    justify-content: space-between;
    /*background:#000;*/
    color:#e0e0e0;
    list-style:none;
    padding:0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
#menu a {
    color: var(--main-color);
    font-size:16px;
    font-weight:bold;
    display:block;
    line-height:45px;
    text-align:center;
    padding:0 15px;
    background:#ffffff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
#menu a img{
    margin-right:5px;
}
#menu a:hover {
    color: var(--orange);
    text-decoration:none;
}
#menu a.active{
    background: var(--light-color);
    color:#fff;
}

/* Sidebar */
#login input{
    width:100%;
    display:inline-block;
}
#login{
    text-align:center;
}
.container-password {
    margin:15px 0;
    position: relative;
    display: inline-block;
    width: 100%;
    text-align:right;
}
.big-login input, .big-login .container-password{
    max-width:300px;
}
.container-password .eye-password,.container-password .eye-text {
    position:absolute;
    right:5px;
    top:0;
    font: normal normal normal 16px/1 FontAwesome;
    content:"\f06e";
    height:34px;
    line-height:34px;
    cursor:pointer;
    color:#111;
}
.container-password .eye-password:hover,.container-password .eye-text:hover {
    color:#000 !important;
}
a.logout:hover{
    cursor:pointer;
    color:var(--orange) !important;
}
.sidebar ul {
    float:left;
    display:block;
    clear:both;
    width:100%;
    list-style:none;
    padding:0;
    margin:30px 0;
}
.sidebar ul li {
    float:left;
    display:block;
    clear:both;
    width:100%;
    list-style:none;
    background:none;
    padding:0;
    margin:0;
}
.sidebar ul li a {
    float:left;
    display:block;
    clear:both;
    width:100%;
    padding:0;
    margin:0 0 15px 0;
    font-weight:bold;
    color:#9C3F90;
}
.sidebar ul li a i{
    width:20px;
}
.sidebar ul li a i.fa-check{
    color:var(--green);
}
.sidebar ul li a i.fa-times{
    color:var(--red);
}
.sidebar ul li a:hover {
    color:var(--orange);
    text-decoration: none;
}

/* Footer */
#footer {
    display:block;
    float:left;
    width:100%;
    position:relative;
    min-height: 50px;
    text-align:center;
    color:#fff;
}
.btn-partages{
    padding:5px;
    margin:0 5px 5px 5px;
    /*font-weight:bold;*/
    display:inline-block;
    color:#fff;
}
.btn-facebook{
    background:#1877F2;
}
.btn-twitter{
    background:#1DA1F2;
}
.btn-pinterest{
    background:#c8232c;
}
.btn-reddit{
    background:#FF5700;
}
.btn-messenger{
    background:#448AFF;
}
.btn-mail{
    background: #686868;
}
/* Popup Achat */
#popup_achat {
    position:fixed;
    bottom:5px;
    left:5px;
    width:330px;
    height:0;
    overflow:hidden;
    padding:5px;
    border:1px solid #800080;
    border-radius:3px;
    background:#EEEEEE;
    transition:height 2s;
    line-height:25px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    opacity:0;
    color:#000;
    font-weight:normal;
}
#popup_achat.open {
    height:63px;
    opacity:1;
}
#popup_achat.display {
    opacity:1;
}
.img_popup_achat {
    float:left;
    display:block;
    width:50px;
    margin-right:15px;
    height:53px;
}
.img_popup_achat img {
    max-width:100%;
}
#text_popup_achat {
    float:left;
    display:block;
    width:250px;
    line-height:20px;
}

/* Page achat */
.add_panier {
    float: none;
    display: inline-block;
    line-height: 36px;
    padding: 0 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background: #800080;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
}
.add_panier:hover {
    background: #000;
}
.add_panier.disable {
    background: #000;
    cursor: default;
}
#lst-panier {
    float: left;
    display: block;
    clear: both;
    width: 100%;
    list-style: none;
}
#lst-panier li {
    float: left;
    display: block;
    clear: both;
    width: 100%;
    list-style: none;
    border: 1px solid #ccc;
    border-top: 0;
    background: #fff;
    padding: 15px;
}
#lst-panier li:nth-child(odd) {
    background: #e0e0e0;
}
#lst-panier li:first-child {
    border-top: 1px solid #ccc;
}
#lst-panier li .label-panier {
    float: left;
    display: block;
    clear: both;
    width: 50%;
    font-weight: bold;
    line-height: 36px;
}
#lst-panier li .prix-panier {
    float: left;
    display: block;
    width: 25%;
    font-weight: bold;
    line-height: 36px;
    text-align: center;
}
#lst-panier li .prix-panier .prix-barre {
    text-decoration: line-through;
    color: #CC0000;
}
#lst-panier li .del-panier {
    float: left;
    display: block;
    width: 25%;
    font-weight: bold;
    text-align: center;
}
#lst-panier li .del-panier .del-panier-btn {
    float: none;
    display: inline-block;
    line-height: 36px;
    padding: 0 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background: #cc0000;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
}
#lst-panier li .del-panier .del-panier-btn:hover {
    background: #8c0000;
}
#total-panier {
    float: left;
    display: none;
    clear: both;
    width: 100%;
    margin-top: 10px;
    font-weight: bold;
}
#total-panier .col-total {
    float: left;
    clear: both;
    width: 75%;
    text-align: right;
    font-weight: bold;
    line-height: 36px;
}
#total-panier .col-prix-total {
    float: left;
    width: 25%;
    text-align: center;
    font-weight: bold;
    line-height: 36px;
}
#btn-achat {
    float: left;
    display: none;
    clear: both;
    width: 100%;
    margin-top: 30px;
}
#btn-achat .col-btn-achat {
    text-align: center;
}
#btn-achat .col-btn-achat .btn-paiement {
    display: inline-block;
    cursor: pointer;
}
#btn-continue {
    float: left;
    display: none;
    clear: both;
    width: 100%;
    margin-top: 30px;
}
.col-btn-continue {
    text-align: center;
}
.col-btn-continue .btn-continue {
    float: none;
    display: inline-block;
    height: 70px;
    line-height: 35px;
    padding: 0 20px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background: #FDC43E;
    border: 1px solid #FD7101;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
}
.col-btn-continue .btn-continue:hover {
    background: #FD7202;
}
#continue_achat, #continue_achat2 {
    line-height: 70px !important;
}
.acces_panier {
    color: #006699;
    text-decoration: underline;
    cursor: pointer;
}
.acces_panier:hover {
    text-decoration: none;
}

/* Formulaire */
form:not(.livraison_form) {
    display: inline-block;
    justify-content: center;
    background: #fefefe;
    padding:15px 60px;
    border-radius: 4px;
}
#formulaire form{
    padding:15px;
    background: none;
}
form.livraison_form{
    float:right;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
    width: 100%;
    float: left;
    line-height: 35px;
    text-align: left;
    padding-right: 15px;
}
label span{
    color:red;
}
.text_form {
    font-size: 16px;
    width: 100%;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #ccc;
    line-height: 35px;
    padding-left: 10px;
    text-align: left;
    float: left;
}
p.error{
    display:none;
    font-size:14px;
    line-height:20px;
    color:#cc0000;
    float: left;
    width: 100%;
}
select.text_form{
    margin-bottom:30px;
    height: 38px;
}
form.livraison_form select{
    height:30px;
    margin-right:5px;
}
.checkbox_form{
    cursor:pointer;
    width:auto;
}
.checkbox_form input{
    margin-top:0 !important;
    margin-right:10px;
}

/* Livraisons */
.table-livraisons{
    margin:0;
    padding:0;
}
.table-livraisons li{
    list-style:none;
    border-bottom:1px solid #ccc;
    padding:15px 0;
}
.table-livraisons li:last-child{
    border:none;
}
.table-livraisons li > .row{
    align-items: center;
}
.module-mgk{
    margin-top:15px;
}