div, span, form {
  margin: 0px;
  padding: 0px;
}

body {
  margin: 0px;
  padding: 0px 3px;
}

img {
  border: 0;
}

input[type="image"] {cursor: pointer;}

/* Polices spécifiques - utilise $url_logos */

@font-face {
  font-family: "single-sleeve";
  src: url('logos/fonts/sing.eot');
  src: url('logos/fonts/sing.woff') format('woff'),
       url('logos/fonts/sing.ttf') format('truetype'),
       url('logos/fonts/sing.svg') format('svg');
}
@font-face {
  font-family: "HVD-Comic";
  src: url('logos/fonts/hvd_comic_serif_pro.eot');
  src: url('logos/fonts/hvd_comic_serif_pro.woff') format('woff'),
       url('logos/fonts/hvd_comic_serif_pro.ttf') format('truetype'),
       url('logos/fonts/hvd_comic_serif_pro.svg') format('svg');
}
@font-face {
  font-family: "sf-comic";
  src: url('logos/fonts/sf_comic_script.eot');
  src: url('logos/fonts/sf_comic_script.woff') format('woff'),
       url('logos/fonts/sf_comic_script.ttf') format('truetype'),
       url('logos/fonts/sf_comic_script.svg') format('svg');
}

/* Textes */

.gris7         {font: 7pt Arial,sans-serif; color: #333333;}
.gris8         {font: 8pt Arial,sans-serif; color: #333333;}
.gris10        {font: 10pt Arial,sans-serif; color: #333333;}
.clair7        {font: 7pt Arial,sans-serif; color: #999999;}
.clair8        {font: 8pt Arial,sans-serif; color: #666666;}
.clair14       {font: 14pt Arial,sans-serif; color: #666666;}
.noir7         {font: bold 7pt Arial,sans-serif; color: #000000;}
.noir8         {font: bold 8pt Arial,sans-serif; color: #000000;}
.noir10        {font: bold 10pt Arial,sans-serif; color: #000000;}
.noir12        {font: bold 12pt Arial,sans-serif; color: #000000;}
.noir14        {font: bold 14pt Arial,sans-serif; color: #000000;}
.bleu7         {font: bold 7pt Arial,sans-serif; color: #336666;}
.bleu8         {font: bold 8pt Arial,sans-serif; color: #336666;}
.bleu10        {font: bold 10pt Arial,sans-serif; color: #336666;}
.bleu12        {font: bold 12pt Arial,sans-serif; color: #336666;}
.marine8       {font: 8pt Arial,sans-serif; color: #0033CC;}
.marinegras8   {font: bold 8pt Arial,sans-serif; color: #00008B;}
.orange8       {font: bold 8pt Arial,sans-serif; color: #FF9900;}
.orange10      {font: bold 10pt Arial,sans-serif; color: #FF9900;}
.bordeaux8     {font: bold 8pt Arial,sans-serif; color: #CC3333;}
.bordeaux10    {font: bold 10pt Arial,sans-serif; color: #CC3333;}
.bordeaux12    {font: bold 12pt Arial,sans-serif; color: #CC3333;}
.bordeaux14    {font: bold 14pt Arial,sans-serif; color: #CC3333;}
.blancregular8 {font: 8pt Arial,sans-serif; color: #FFFFFF;}
.blanc8        {font: bold 8pt Arial,sans-serif; color: #FFFFFF;}
.blanc10       {font: bold 10pt Arial,sans-serif; color: #FFFFFF;}
.vertgras8     {font: bold 8pt Arial,sans-serif; color: #006600;}
.vertgras10    {font: bold 10pt Arial,sans-serif; color: #006600;}
.rouge7        {font: 7pt Arial,sans-serif; color: #FF0000;}
.rouge8        {font: 8pt Arial,sans-serif; color: #FF0000;}
.rougegras8    {font: bold 8pt Arial,sans-serif; color: #FF0000;}
.rougegras10   {font: bold 10pt Arial,sans-serif; color: #FF0000;}
.erreur8       {font: italic bold 8pt Arial,sans-serif; color: #FF0000;}
.erreur10      {font: italic bold 10pt Arial,sans-serif; color: #FF0000;}
.message8      {font: bold 8pt Arial,sans-serif; color: #0066FF;}
.message10     {font: bold 10pt Arial,sans-serif; color: #0066FF;}

/* Liens */

a:link, a:active, a:hover, a:visited {text-decoration: none;}

a.grisbleu8 {font: 8pt Arial,sans-serif;}
a.grisbleu8:link, a.grisbleu8:visited {color: #333333;}
a.grisbleu8:active, a.grisbleu8:hover {color: #0066FF;}
a.grisblanc8 {font: 8pt Arial,sans-serif;}
a.grisblanc8:link, a.grisblanc8:visited {color: #333333;}
a.grisblanc8:active, a.grisblanc8:hover {color: #FFFFFF;}
a.noirbleu8 {font: bold 8pt Arial,sans-serif;}
a.noirbleu8:link, a.noirbleu8:visited {color: #000000;}
a.noirbleu8:active, a.noirbleu8:hover {color: #0066FF;}
a.noirbleu10 {font: bold 10pt Arial,sans-serif;}
a.noirbleu10:link, a.noirbleu10:visited {color: #000000;}
a.noirbleu10:active, a.noirbleu10:hover {color: #0066FF;}
a.noirbleu12 {font: bold 12pt Arial,sans-serif;}
a.noirbleu12:link, a.noirbleu12:visited {color: #000000;}
a.noirbleu12:active, a.noirbleu12:hover {color: #0066FF;}
a.noirorange8 {font: bold 8pt Arial,sans-serif;}
a.noirorange8:link, a.noirorange8:visited {color: #000000;}
a.noirorange8:active, a.noirorange8:hover {color: #FF9900;}
a.clairbleu7 {font: 7pt Arial,sans-serif;}
a.clairbleu7:link, a.clairbleu7:visited {color: #999999;}
a.clairbleu7:active, a.clairbleu7:hover {color: #0066FF;}
a.clairbleu8 {font: 8pt Arial,sans-serif;}
a.clairbleu8:link, a.clairbleu8:visited {color: #666666;}
a.clairbleu8:active, a.clairbleu8:hover {color: #0066FF;}
a.grisorange8 {font: 8pt Arial,sans-serif;}
a.grisorange8:link, a.grisorange8:visited {color: #333333;}
a.grisorange8:active, a.grisorange8:hover {color: #FF9900;}
a.marineorange8 {font: 8pt Arial,sans-serif;}
a.marineorange8:link, a.marineorange8:visited {color: #0033CC;}
a.marineorange8:active, a.marineorange8:hover {color: #FF9900;}
a.marineorange10 {font: 10pt Arial,sans-serif;}
a.marineorange10:link, a.marineorange10:visited {color: #0033CC;}
a.marineorange10:active, a.marineorange10:hover {color: #FF9900;}
a.blancblanc8 {font: 8pt Arial,sans-serif;}
a.blancblanc8:link, a.blancblanc8:visited {color: #FFFFFF;}
a.blancblanc8:active, a.blancblanc8:hover {color: #FFFFFF; text-decoration: underline;}
a.rougerouge8 {font: 8pt Arial,sans-serif;}
a.rougerouge8:link, a.rougerouge8:visited {color: #FF0000;}
a.rougerouge8:active, a.rougerouge8:hover {color: #FF0000;}
a.bordeauxbleu8 {font: bold 8pt Arial,sans-serif;}
a.bordeauxbleu8:link, a.bordeauxbleu8:visited {color: #CC3333;}
a.bordeauxbleu8:active, a.bordeauxbleu8:hover {color: #0066FF;}

/* Titres */

h1.produit        {font: normal 18pt HVD-Comic,Verdana,Arial,sans-serif; text-transform: uppercase; color: #CC3333; margin:0; padding:0;}
h1.categorie      {font: normal 18pt single-sleeve,Verdana,Arial,sans-serif; text-transform: uppercase; color: #336666; text-align:center; margin:0 0 30px 0; padding:0;}
h2.categorie      {font: normal 18pt single-sleeve,Verdana,Arial,sans-serif; text-transform: uppercase; color: #336666; text-align:center; margin:0 0 30px 0; padding:0;}
h1.sous-categorie {font: normal 10pt sf-comic,Verdana,Arial,sans-serif; text-transform: uppercase; color: #FFFFFF; margin:0; padding:0;}
h2.sous-categorie {font: normal 10pt sf-comic,Verdana,Arial,sans-serif; text-transform: uppercase; color: #FFFFFF; margin:0; padding:0;}
h1.page           {font: normal 18pt single-sleeve,Verdana,Arial,sans-serif; text-transform: uppercase; color: #CC3333; text-align:center; margin:0 0 30px 0; padding:0;}
h3.bloc-titre     {font: normal 10pt sf-comic,Arial,sans-serif; color: #336666; text-transform: uppercase; margin:0 0 10px 0; text-align: center;}

div.sous-titre {
  width: 100%;
  background-color: #CC3333;
  padding: 0px 0px 2px 0px;
  border-radius: 5px;
  text-align: center;
  text-transform: uppercase;
  font: normal 10pt sf-comic,Verdana,Arial,sans-serif; color: #FFFFFF;
}

/* Menus */

a.menu_big {
  width: auto;
  margin: 0px;
  padding: 0px;
  font: 8pt single-sleeve,Arial,sans-serif;
  text-align: left;
  text-indent: 5px;
  text-transform: uppercase;
}
a.menu_1 {display: block; color: #333333;}
a.menu_1:active, a.menu_1:hover {color: #FFFFFF; background-color: #336666;}
a.menu_1_on {display: block; color: #FFFFFF; background-color: #CC3333;}
a.menu_2 {display: block; color: #666666;}
a.menu_2:active, a.menu_2:hover {color: #FFFFFF; background-color: #336666;}
a.menu_2_on {display: block; color: #FFFFFF; background-color: #CC3333;}

div.menu_small a {
  display: block;
  width: auto;
  margin: 0px;
  padding: 4px 0px;
  font-family: Arial,sans-serif;
  text-align: left;
  text-transform: uppercase;
}
a.menu_3 {font-size: 8pt; color: #666666; text-indent: 5px;}
a.menu_3:active, a.menu_3:hover {color: #FFFFFF; background-color: #336666;}
a.menu_3_on {font-size: 8pt; color: #FFFFFF; background-color: #CC3333; text-indent: 5px;}
a.menu_4 {font-size: 7pt; color: #666666;}
a.menu_4:active, a.menu_4:hover {color: #FFFFFF; background-color: #336666;}
a.menu_4_on {font-size: 7pt; color: #FFFFFF; background-color: #CC3333;}

div.bloc-colonne {
  display: block;
  position: relative;
  margin: 0px 0px 5px 0px;
  padding: 8px 5px;
  text-align: left;
  border: 1px #336666 solid;
  border-radius: 10px;
  width: auto;
  background: #FFFFFF url('/logos/pattern.jpg');  /* $url_logos */
}

a.menu_sous-cat {
  display: inline-block;
  margin: 0px 2px 2px 0px;
  font: 7pt single-sleeve,Arial,sans-serif;
}
a.menu_sous-cat:link, a.menu_sous-cat:visited {color: #333333;}
a.menu_sous-cat:active, a.menu_sous-cat:hover {color: #336666;}
a.menu_sous-cat_off {
  width: 125px; /* ($center_width_inside - 5colonnes*marge2px) / 5) - 2*border_du_div_1px; */
  height: 60px; /* $hauteur_fiche + 2*$marge_int */
  border: 1px #CCCCCC solid;
  background-color: #FFFFFF;
}
a.menu_sous-cat_off:hover {background-color: #EEEEEE}
a.menu_sous-cat_on {
  width: 121px; /* ($center_width_inside - 5colonnes*marge2px) / 5) - 2*border_du_div_3px */
  height: 56px; /* $hauteur_fiche + 2*$marge_int */
  border: 3px #547B90 solid;
  background: #EEEEEE url('/logos/pattern-dark.jpg');
}

.cart-medium {
  background : url('/logos/cart-add-medium.gif') no-repeat; border: none;
  width: 44px;
  height: 44px;
}
.cart-medium:hover {
  background : url('/logos/cart-add-medium-on.gif') no-repeat; border: none;
  cursor: pointer;
}

div.etapes {font: normal 12pt HVD-Comic,Verdana,Arial,sans-serif; text-transform:uppercase; color: #6699CC; text-align:left; margin-top:100px;}
.etapes-on-titre  {color: #990000;}
.etapes-on        {color: #003366;}
.etapes-off-titre {color: #CC6666;}
.etapes-off       {color: #6699CC;}

/* Affichage des produits */

.prix      {font: bold 16pt Verdana,Arial,sans-serif; color: #000000;}
.prixbarre {font: 14pt Verdana,Arial,sans-serif; color: #666666; text-decoration: line-through;}

div.prod_fiche_img_bloc {
  position: relative;
  top: 0px;
  width: auto;
  height: 280px; /* $cote_photo */
  max-height: 100vw;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 10px;
}
div.prod_fiche_img_zoom {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
}
.prod_fiche_img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
  border : 0px;
}
ul.prod_list {
  margin: 10px 0px;
  padding: 0;
  list-style-type: none;
}
ul.prod_list li {
  float: left;
  position: relative; 
  margin: 0px 5px 15px 5px;
  padding: 0;
}
div.prod_cat_img {
  position: relative;
  margin: 0px auto 5px auto;
  padding: 1px;
  border-radius: 5px;
}
div.prod_cat_nom {
  vertical-align: middle;
  margin: 0px auto 5px auto;
  text-align: center;
  height: 30px;
  border-radius: 5px;
  background: #EEEEEE url('/logos/pattern-dark.jpg');  /* $url_logos */
}
.prod_bandeau {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 2;
}
.prod_classement {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  background-color: #CC3333;
  text-align: center;
  font: bold 10px Arial,sans-serif;
  color: #FFFFFF;
  z-index: 2;
}
.prod_croix {
  position: absolute;
  margin: 0;
  bottom: 20px;
  right: -3px;
  z-index: 2;
}

a.produit:hover div.prod_cat_img {border: 1px #666666 dotted; padding: 0px;}
a.produit:hover div.prod_cat_nom {background: #666666 url('/logos/pattern-darker.jpg');}  /* $url_logos */

a.faded:hover img {
  border: 0px;
  opacity: 0.5;
  filter: alpha(opacity=50); /* IE */
}

/* Tables, formulaires */

.gris1blanc {
  border: 1px #666666 solid;
  background-color: #FFFFFF;
  font: 8pt Arial,sans-serif;
  color: #333333;
}
table.gris1blanc {
  border-collapse: collapse;
}
table.gris1blanc td {
  border: 1px #666666 solid;
}
table.border0    {border-width: 0px;}
table.border0 td {border-width: 0px;}
table.fondblanc  {background-color: #FFFFFF;}
tr.lignemarine8  {background-color: #0033CC; font: bold 8pt Arial,sans-serif; color: #FFFFFF;}
tr.lignemarine10 {background-color: #0033CC; font: bold 10pt Arial,sans-serif; color: #FFFFFF;}
tr.ligneclaire7  {background-color: #EAEFF4; font: 7pt Arial,sans-serif; color: #333333;}
tr.ligneclaire8  {background-color: #EAEFF4; font: 8pt Arial,sans-serif; color: #333333;}
tr.ligneerreur7  {background-color: #FFDDDD; font: 7pt Arial,sans-serif; color: #FF0000;}
tr.ligneerreur8  {background-color: #FFDDDD; font: 8pt Arial,sans-serif; color: #FF0000;}

.form_1 {background-color: #B8C9D9;}
.form_2 {background-color: #EAEFF4;}
.form_erreur {background-color: #FFE7F0;}
.form_checked {background-color: #CCFF99;}

/* Barre de recherche par prix */

.ui-slider-horizontal {
  height: 7px;
  background: #FFFFFF url("jquery/images/ui-bg_diagonals-medium_75_cccccc_40x40.png") 50% 50% repeat-x;color:#222;
}
.ui-widget-header {
  background: #bababa;
  background: -moz-linear-gradient(top, #BABABA 0%, #FFFFFF 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#BABABA), color-stop(100%,#FFFFFF));
  background: -webkit-linear-gradient(top, #BABABA 0%,#FFFFFF 100%);
  background: -o-linear-gradient(top, #BABABA 0%,#FFFFFF 100%);
  background: -ms-linear-gradient(top, #BABABA 0%,#FFFFFF 100%);
  background: linear-gradient(top, #BABABA 0%,#FFFFFF 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BABABA', endColorstr='#FFFFFF',GradientType=0 );
}
.ui-slider .ui-slider-handle {
  width: 18px;
  height: 18px;
  background-position: top left;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-top: -2px;
}
.ui-slider .ui-slider-handle.ui-corner-all.ui-state-default, .ui-slider .ui-slider-handle.ui-corner-all.ui-state-focus {border: none;}
.ui-slider .ui-slider-handle {
  background-image: url("logos/curseur-gauche.gif");  /* $url_logos */
}
.ui-slider .ui-slider-handle:last-child {
  background-image: url("logos/curseur-droit.gif");  /* $url_logos */
}

/* Divers */

.helper { /* Pour centrer verticalement une image */
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

hr {
  border-width: 0;
  height: 2px;
  width: 80%;
  background: #336666;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive design */

@-webkit-viewport {width: device-width;}
@-moz-viewport    {width: device-width;}
@-ms-viewport     {width: device-width;}
@-o-viewport      {width: device-width;}
@viewport         {width: device-width;}

img.resize {max-width: 100%; height: auto;}
div.prod_txt img {max-width: 100%; height: auto;}
div.prod_txt a {text-decoration: underline;}

.mobile-hide {display: inline-block;}
.mobile-only {display: none;}
#shell {width: 980px;}  /* $site_width */
#shell_centre {width: 670px;}  /* $center_width */
#shell_gauche-centre {width: 810px;}  /* $site_width_small */
#logo-site {width: 468px;}
#icones {margin: 10px 0px 0px 10px;}
#icone_menu {display: none;}
.icone_bloc {}
.icone_logo {height: 44px; width: 70px; margin-bottom: 3px; text-align: center;}
.icone_texte {width: 70px; text-align: center;}
#banniere-pub {display: inline-block;}
#colonne-gauche {display: inline-block; width: 130px; margin-right: 5px;}  /* $center_width & $col_padding */
#fenetre-centre {display: inline-block; width: 670px;}  /* $center_width */
#colonne-droite {display: inline-block;}
.inside-right {margin-left: 20px;}
.table_80pc {width: 80%;}
.bloc_96px_4, .bloc_116px_4 {min-width: 130px;}
.bloc_96px_5, .bloc_116px_5 {min-width: 119px;}

@media only screen and (max-width: 550px) {
  .mobile-hide {display: none;}
  .mobile-only {display: block;}
  #shell {width: auto;}
  #shell_centre {width: auto;}
  #shell_gauche-centre {width: auto;}
  #logo-site {width: 60%; text-align: center;}
  #logo-site img {max-width: 100%; height: auto;}
  #icones {margin: 2px 0px 5px 0px; width: 38%; text-align: center;}
  #icone_menu {display: inline-block;}
  .icone_bloc {width: 30%;}
  .icone_logo {width: 90%; height: auto; margin-bottom: 0px;}
  .icone_texte {display: none;}
  a.menu_1 {display: none;}
  a.menu_1_on {display: none;}
  #banniere-pub {display: none;}
  #colonne-gauche {
    display: none;
    position: absolute;
    left: 3px;
    z-index: 10;
    margin-right: 0px;
    width: 95%;
  }
  #fenetre-centre {width: 100%;}
  #colonne-droite {display: none;}
  #historique {display: none;}
  .inside-right {margin-left: 0px; min-width: 100%;}
  .table_80pc {width: 100%;}
  .bloc_96px_4, .bloc_96px_5, .bloc_96px_6    {min-width: 22.68%;} /* 4 blocs/ligne : 98/108/4 22.68% */
  .bloc_116px_4, .bloc_116px_5, .bloc_116px_6 {min-width: 30.72%;} /* 3 blocs/ligne : 118/128/3 */
  a.menu_sous-cat {font-size: 6pt;}
  .menu_sous-cat_off {max-width: 106px;}
  .menu_sous-cat_on {max-width: 102px;}
  h1.produit {font-size: 16pt;}
  h1.categorie {font-size: 14pt; margin-bottom: 15px;}
  h2.categorie {font-size: 14pt; margin-bottom: 15px;}
  h1.page {font-size: 14pt;}
}
/* Largeur des breaking points : nb_bloc_par_ligne * [dim_img + 2(border) + 10(marge)] + 2*14(padding body+border+$center_padding) + 20(scrollbar) */
@media only screen and (max-width: 480px) {
  .bloc_96px_4, .bloc_96px_5, .bloc_96px_6  {min-width: 30.24%;} /* 3 blocs/ligne : 98/108/3 */
}
@media only screen and (max-width: 432px) {
  .bloc_116px_4, .bloc_116px_5, .bloc_116px_6 {min-width: 46.09%;} /* 2 blocs/ligne : 118/128/2 */
}
@media only screen and (max-width: 372px) {
  .bloc_96px_4, .bloc_96px_5, .bloc_96px_6 {min-width: 45.37%;} /* 2 blocs/ligne : 98/108/2 */
}