/* 
- CSS GENERALISTE

- CONTAINERS GENERAUX

- HEADER CONTAINER
- TOP CONTAINER
- CENTRE CONTAINER
- FOOTER CONTAINER

- HEADER CONTENT
- TOP CONTENT
- CENTRE CONTENT
- FOOTER CONTENT

*/
/**
.col- Extra small < 576px
.col-sm- Small ≥576px
.col-md- Medium ≥768px
.col-lg- Large ≥992px
.col-xl- Extra large ≥1200px
*/

/**************************************
 CSS GENERALISTE
**************************************/
/** Fonts **/
@font-face {
    font-family: "Marvel";
    src: url("/kassets/css/font/marvel/Marvel-Bold.ttf");
}

@font-face {
    font-family: "Marvel-BoldItalic";
    src: url("/kassets/css/font/marvel/Marvel-BoldItalic.ttf");
}

@font-face {
    font-family: "Marvel-Regular";
    src: url("/kassets/css/font/marvel/Marvel-Regular.ttf");
}

@font-face {
    font-family: "Marvel-RegularItalic";
    src: url("/kassets/css/font/marvel/Marvel-RegularItalic.ttf");
}

@font-face {
    font-family: "FontAwesome";
    src: url("/kassets/css/font-awesome/fonts/fontawesome-webfont.eot");
    src: url("/kassets/css/font-awesome/fonts/fontawesome-webfont.of");
    src: url("/kassets/css/font-awesome/fonts/fontawesome-webfont.ttf");
    src: url("/kassets/css/font-awesome/fonts/fontawesome-webfont.woff");
    src: url("/kassets/css/font-awesome/fonts/fontawesome-webfont.svg");
}



body{ position:relative; font-size:13px; 
      font-family:"Marvel"; margin:0px; 
      background:#f1f1f1; font-size:15px; }

html, body, button, input, select, textarea{ color:#000;}

hr{ display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

::-moz-selection{ background:#004372; color:white; text-shadow:none; }
::selection{ background:#004372; color:white; text-shadow:none; }

p{ font-size:1.2em; }

a { color:#004372; text-decoration:none; outline:none; /*vire le pointillé autour du lien */ }
a:hover		{ text-decoration:none; }
a:focus		{  }
a:active		{  }
a:visited	{  }

h1, h2, h3, h4, h5, h6 { font-weight:normal; }
h1{ }
h2{ }
h3{ }
h4{ }
h5{ }
h6{ }

:root{
    --bleu-pfc:#038EC4;
    --bleuclair-pfc:#0795CA;
}

.bleuclair{color:var(--bleuclair-pfc);}



/**************************************
  L E S   C O N T E N T S
/**************************************
 HEADER CONTENT
**************************************/
.principale_container{background-color: #fff;padding-bottom: 80px;padding-top: 80px;}
/**************************************
 CENTRE CONTENT
**************************************/
/* NOM PAGE */
.row_header{background-color: var(--bleuclair-pfc);width: 100%;padding:0 5px;position: fixed;z-index: 10;}
.row{margin-left:0px; margin-right:0px;}
.container-logo{
    background-color: #292F47;
    padding:15px 0px 15px 0px;
}
.input-group{
    margin-bottom:20px;
}
.kmodale {
    position: absolute;
    top: -100px;
    left: 0;
    background-color: #fff;
    padding: 15px;
    box-shadow: 10px 7px 35px #888;
    z-index: 100;
    max-width: 50%;
	right: 0;
	margin: auto
}

.fadeur{
    -khtml-opacity:0.5; 
    -moz-opacity : 0.5; 
    -ms-filter: "alpha(opacity=5)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=5); 
    filter : alpha(opacity=5); 
    opacity : 0.5;
}
.noti_bubble {
    position: absolute;
    top: 0px;
    left: 25px;
    font-size: 10px;
    font-family: Arial, Verdana, Georgia, sans-serif;
    color: #ffffff;
    font-weight: bold;
    padding: 0px 2px;
    height: 17px;
    line-height: 17px;
    min-width: 16px;
    background-color: #d8000e;
    background: -webkit-gradient(linear, center top, center bottom, from(#fa3c45), to(#dc0d17));
    background: -webkit-linear-gradient(top, #fa3c45, #dc0d17);
    border: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
}
.cartopen{z-index: 10;
width: 25%;
background: white;
position: fixed;
right: 0;
top: 80px;
height: 100%;
box-shadow: 0px 0 20px rgba(0, 0, 0, 0.2);
transition: transform 500ms ease 0s;
/*transform: translate3d(100.5%, 0, 0);*/
}
.pushed{
    transition: transform 500ms ease 0s;
    width: 75%;
}
.pushed:hover{cursor: pointer;}
.header-panier{text-transform: uppercase;text-align: center;font-size: 1.2em;padding-top: 40px;padding-bottom: 25px;border-bottom: #ddd 1px solid;}
.baspage{padding-top:10px;}
.row_footer img{width:inherit;}
footer#footer{ border-top:#f1f1f1 1px solid;}

.row_righthead .col-lg-2 a{ padding:12px 23px; display: block}

.row_righthead .col-lg-2{ display: flex; align-items: center; justify-content: center; position:relative}

.row_righthead .col-lg-2 a:hover {   background: #006c9e;    color: #FFFFFF;}

h1 {
    font-family: 'Marvel', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-style: normal;
    color: #006c9e;
    text-rendering: optimizeLegibility;
    line-height: 1.1;
}

.theflags{ position:absolute; background: #f9f9f9; border: solid 1px #cccccc !important;width: auto; padding: 5px; top: 49px}


.theflags:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
        border-top-color: currentcolor;
        border-right-color: currentcolor;
        border-bottom-color: currentcolor;
        border-bottom-style: inset;
        border-left-color: currentcolor;
    border-color: transparent transparent white transparent;
    border-bottom-style: solid;
    position: absolute;
    top: -12px;
    left: 0;
    z-index: 99;
	right:0;
	margin:auto
}

.theflags a{ display: block}

select {
    -webkit-appearance: none !important;
    -webkit-border-radius: 0px;
    background-color: #fafafa;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
    background-position: 100% center;
    background-repeat: no-repeat;
    border: 1px solid #cccccc;
    padding: 0.5rem;
    font-size: 17px;
    color: rgba(0, 0, 0, 0.75);
    line-height: normal;
    border-radius: 0;
    height: auto;
}

ul.ul_sousmenucat{ padding-left:0; 
    margin: 0 0 25px 5px;
    border-bottom: 1px #e1e1e1 solid;
    padding: 0 0 10px 0;
}
ul.ul_sousmenucat li a:before {
    font-family: 'FontAwesome';
    content: '\f10c';
    margin-right: 8px;
    color: rgba(0, 0, 0, 0.4);
}

.miniature_image{min-height: 200px;}

ul.ul_sousmenucat li { list-style: none; font-size: 13px;font-weight: bold; color:rgba(0, 0, 0, 0.8); margin: 0 0 5px 0}

ul.ul_sousmenucat li  a{color:rgba(0, 0, 0, 0.8)}

#footer2, #footer2 p{ text-align:right; font-size:11px; color:#666}

#footer2 p{ margin-bottom:0}

#footer2{ padding: 15px;  border-top:#c0c0c0 1px solid;}

.row_footer{ padding-top: 15px; padding-bottom: 15px}

.row_footer img{ max-width: 150px}

.searchArea input{ height: 65px; color: rgba(0, 0, 0, 0.75); font-size: 0.875rem; padding: 0 0.5rem;}

#bx-pager a{ display:inline-block !important; vertical-align:middle; width: 75px}

#bx-pager a img{ width: 100%}

.row_footer .col-lg-7 a{ color: #000000}

.row_footer .col-lg-7 a:hover{ text-decoration: none}

.row_righthead{justify-content: flex-end; align-items: center}


form input, form select, input, select{
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
background-color:#fff;
background-clip: padding-box;
border: 1px solid #ced4da;
    border-radius: .25rem;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

::placeholder{ opacity: 1}


form input[type="checkbox"]{
    height: 15px;
    display: inline-block;
    width: auto;
    text-align: left;
}

.container_customer_fiche .row_groups .floatleft{text-align:left;}


button.boutonsubmit{
    transition: all 0.5s;
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 25px;
    background-color: rgba(7, 149, 202,0.3);
    color: rgb(7, 149, 202);
}


.btn-success{ background-color: rgba(7, 149, 202,1); color: #fff; border: none}

.btn-success:hover{ background-color: rgba(7, 149, 202,0.7)}


form select option{
	color: #495057;
	font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}


/*.row_footer img{max-width: 100px;}
*/
.ribbon{display: none}

.row_nouveaute_liste .ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
	display: block
}
.row_nouveaute_liste .ribbon::before,
.row_nouveaute_liste .ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.row_nouveaute_liste .ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 0px 0;
    background-color: #3498db;
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
	color:  #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,.2);
	text-transform: uppercase;
	text-align: center;
}

/* top right*/
.row_nouveaute_liste .ribbon-top-right {
    top: 0;
    right: 0;
    position: absolute;
}
.row_nouveaute_liste .ribbon-top-right::before,
.row_nouveaute_liste .ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.row_nouveaute_liste .ribbon-top-right::before {
  top: 0;
  left: 0;
}
 .row_nouveaute_liste .ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.row_nouveaute_liste .ribbon-top-right span {
  left: 3px;
  top: 21px;
  transform: rotate(45deg);
}


.product_miniature{position: relative; overflow: hidden}


#menu-haut ul > li[class*="li0 idCat-"]:after{content:""; background: url("/kassets/cssimg/site/angle-down-bleu.png"); background-repeat: no-repeat; background-position: right center; position: absolute; right: -7px; top: 26px; width:  24px; height: 3px}

#menu-haut ul li{position: relative}

.left-header{display: flex; align-items: center; justify-content: flex-start}

/*#menuZone{margin-top: 6px}
*/

.selection_link a, .nouveaute_link a{ font-size: 20px; margin-top: 22px}

.row_footer .col-lg-4{display: flex; align-items: center; justify-content: center}

.row_footer .col-lg-4:first-child{justify-content: flex-start}

.row_footer .col-lg-4:last-child{justify-content: flex-end}


	
@media(max-width: 1200px){
  .row_header .col-lg-3 img{ margin-top: inherit}
  .row_header{ display: inherit}
  .row_header{ display: flex; justify-content: space-between; align-items:center; position:relative}
  .row_header .col-7{ display: none}
  .cartopen{ position:absolute; margin: 15px auto; width: 100%; z-index:9999}
}

@media(max-width: 992px){
 .btn.btn-outline-danger.btn-sm{ margin: 15px auto}
   .row_righthead .col-lg-2 a:hover { background-color: transparent}
  .row_righthead .col-lg-2 a{ padding:inherit}


}

@media(max-width: 768px){
  .row_header .col-3.right-col{ flex: 0 0 50%; max-width: 50%;}
  .row_header .col-3.right-col .col-lg-2:first-child{ display: none}
  .row_header .col-3.right-col .col-lg-2{ padding: 12px 0; text-align:right}
  .row_header  img{ max-width: 160px}
}

@media(max-width: 576px){
	.row_header  img{ max-width: 120px}
}