/* -------------*/ /* COMMUN */ /* -------------*/ .auto{margin:auto;} .center{text-align: center;} .no-margin-right{margin-right:0px !important;} a.bouton {padding:5px; border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color:#404040; color:white; text-decoration: none;} a.bouton:hover {padding:5px; border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color:#404040; color:white;text-decoration: underline; background-color:#5997d1;} hr {background-color:#404040; margin:10px 0;} .ombre {-moz-box-shadow: 0px 0px 4px #000;-webkit-box-shadow: 0px 0px 4px #000;box-shadow: 0px 0px 6px #CCC;} .arrondi{-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .arrondi-gauche{-webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; } .arrondi-droite{-webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } .bleu{color:#5997d1;} .rouge{color:#ec1323;} .vert{color:#d6e211;} .img-gauche{float:left; margin:0 10px 10px 0 ;} .clear{clear:both;} .left{float:left;} .right{float:right;} .margin-bottom{margin-bottom:20px;} a.gros-bouton{ padding:0px 5px; color:white; text-transform: uppercase; font-size:16px; text-decoration: none; line-height: 33px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /* Old browsers */background: -moz-linear-gradient(top, #f85d91 0%, #f85d91 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85d91), color-stop(100%,#f85d91)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #f85d91 0%,#f85d91 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #f85d91 0%,#f85d91 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #f85d91 0%,#f85d91 100%); /* IE10+ */background: linear-gradient(to bottom, #f85d91 0%,#f85d91 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85d91', endColorstr='#f85d91',GradientType=0 ); /* IE6-9 */} a.gros-bouton:hover{ background: #78addf; /* Old browsers */background: -moz-linear-gradient(top, #4387c6 0%, #78addf 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4387c6), color-stop(100%,#78addf)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,#4387c6 0%,#78addf 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #78addf 0%,#4387c6 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #78addf 0%,#4387c6 100%); /* IE10+ */background: linear-gradient(to bottom, #78addf 0%,#4387c6 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78addf', endColorstr='#4387c6',GradientType=0 ); /* IE6-9 */} .gros-bouton{ border:0; padding:0px 5px; color:white; text-transform: uppercase; font-size:16px; text-decoration: none; line-height: 33px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /* Old browsers */background: -moz-linear-gradient(top, #f85d91 0%, #f85d91 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85d91), color-stop(100%,#f85d91)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #f85d91 0%,#f85d91 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #f85d91 0%,#f85d91 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #f85d91 0%,#f85d91 100%); /* IE10+ */background: linear-gradient(to bottom, #f85d91 0%,#f85d91 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85d91', endColorstr='#f85d91',GradientType=0 ); /* IE6-9 */} .gros-bouton:hover{ background: #78addf; /* Old browsers */background: -moz-linear-gradient(top, #4387c6 0%, #78addf 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4387c6), color-stop(100%,#78addf)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,#4387c6 0%,#78addf 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #78addf 0%,#4387c6 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #78addf 0%,#4387c6 100%); /* IE10+ */background: linear-gradient(to bottom, #78addf 0%,#4387c6 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78addf', endColorstr='#4387c6',GradientType=0 ); /* IE6-9 */} .petit {font-size:10px; color:#BBB;} .gros {font-size:20px; } .form_erreur{color:red; font-weight: bold;} table .table-default td { height:10px;} .erreur{ font-weight: bold; padding:5px; margin-bottom: 5px; color:white; background: #ff686b; /* Old browsers */ background: -moz-linear-gradient(top, #ff686b 0%, #ff3538 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff686b), color-stop(100%,#ff3538)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ff686b 0%,#ff3538 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ff686b 0%,#ff3538 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ff686b 0%,#ff3538 100%); /* IE10+ */ background: linear-gradient(to bottom, #ff686b 0%,#ff3538 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff686b', endColorstr='#ff3538',GradientType=0 ); /* IE6-9 */ } .ok{ font-weight: bold; padding:5px; margin-bottom: 5px; color:white; background: #d2ff52; /* Old browsers */ background: -moz-linear-gradient(top, #d2ff52 0%, #91e842 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2ff52), color-stop(100%,#91e842)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #d2ff52 0%,#91e842 100%); /* IE10+ */ background: linear-gradient(to bottom, #d2ff52 0%,#91e842 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2ff52', endColorstr='#91e842',GradientType=0 ); /* IE6-9 */ } table { border-collapse:collapse; width:100%;} table td{ border:1px solid white; background-color: #f9f9f7; padding:5px;} table th{ border:1px solid white; background-color: #f9f9f7; padding:5px; font-weight: bold;} a {color:#f85d91;} a:hover {color:#404040;} ul {list-style-type:square;} body{ color:#222222;font-family: 'Roboto', sans-serif;background:url("../img/body.jpg") repeat; } p{ color:#222222;} .titre{color:#f85d91;font-size:15px;font-weight:bold;text-transform: uppercase;height:50px;line-height: 50px;padding-left:15px; border-top-left-radius:5px;border-top-right-radius:5px;background:url("../img/body.jpg") repeat;display:inline-block;padding-right: 15px; margin-bottom: 0px;margin-left:10px;} .bloc{width:860px;background:#f9f9f7; padding:10px; } a.rose{background:url("../img/fleche-rose.png") no-repeat; padding-left:20px;font-size:11px !important;color:#f85d91 !important;text-transform: uppercase;text-decoration: none;height:21px;display:inline-block;line-height:21px;} .rose{color:#f85d91 !important;} h3{font-size:18px;color:#f85d91;font-weight:bold;text-transform: uppercase;margin-bottom:10px;} h4{color:#171717;font-size:16px;font-weight:bold;} p{font-size:14px;color:#5b5b5b;} ul{color: #5b5b5b;font-size: 12px !important;} .padding20{padding:20px;} /* -------------*/ /* HEADER */ /* -------------*/ .bande-haut { height:34px; background-color:#FFF; color:#767676; line-height: 34px;box-sizing:content-box; font-family: 'Roboto', sans-serif;} .bande-haut a {color:#000;font-weight:bold;text-transform: uppercase;font-size:12px; text-decoration:none;margin-left:15px; } .bande-haut h1, .bande-haut p { font-size:12px; color:#767676; text-align: left;font-weight: normal;} .bande-haut img {width: 20px;height: 20px; display: inline-block} .header-banner {background: #f85d91;color: #fff;position: relative;text-align: center;z-index: 1;height: 35px;} .header-banner p {font-size: .7rem;color: #fff;display: inline-block;} .header-banner-coli {background: red;color: #fff;position: relative;text-align: center;z-index: 1;height: 45px;margin-bottom: 25px} .header-banner-coli p {font-size: .8rem;color: #fff;display: inline-block;} #header { height: 134px; position:relative; } #header #logo { margin-top:30px; color:white;} #header #form-recherche{ margin-top:40px;width:287px;} #header #form-recherche input.recherche-input{ border-radius:5px;padding-top:4px; width:230px;height:28px; border:none;float:left;margin-right:2px;} #header #form-recherche input.btn-recherche{ border:none;margin-top:1px; } /*#header #form-recherche input.valid-input{ float:right; border:0; color:white;}*/ #header #liens { margin-top:15px; height:67px; width: 170px; float:left;} #header #liens a { color:#333;} #header #panier { z-index:1; right: 10px; position:absolute;top:11px;} #header #panier #panier-detail{width:200px; background-color: #eee;} #header #panier #panier-detail table{margin-bottom:0; margin:0 3px 3px 3px;display:none;} #header #panier #panier-detail table td{padding:2px; color:#404040; line-height:13px; font-size: 10px; background:none; border:0;} #header #panier #panier-detail a{color:white; background-color: #404040; padding:3px; text-decoration: none;} #header #panier #panier-detail a:hover{color:#404040; background-color: white; padding:3px; text-decoration: none;} #header #panier #panier-detail div.photo-produit{background-color:white; width:40px; height:40px; text-align: center} #header #panier #panier-detail p {height:40px; line-height:40px; text-align:center;} #header #panier #panier-detail img {vertical-align:middle;} #header #panier #panier-resume{ width: 200px; height:67px; position:relative; color:#f94481; margin-top:7px;} #header #panier #panier-resume img.panier {position:absolute; top:14px; left:10px;width:51px ;height:44px} #header #panier #panier-resume .resume{color:white; text-align: right; width:130px; right:30px; position: absolute; top:14px;} #header #panier #panier-resume .resume p {margin-bottom:0px;} #header #panier #panier-resume .resume p.prix-total { font-size: 24px !important; margin-bottom:0px;color:#f94481;font-weight:300;} #header #panier #panier-resume .resume .nb-produit { font-size: 12px !important; font-weight:300;color:#f94481;} /* -------------*/ /* MENU */ /* -------------*/ #menu {margin-bottom: 20px; position: relative;height:60px;} #menu-texte h2{font-weight: normal; } #menu-texte .menu {float:left;padding-right:5px; } #menu-texte .nouveaute{background:#f85d91;width:131px; height:60px;margin-right:5px;text-align:center;margin-right:0px;padding-right:0px;} #menu-texte .promotion{background:#f94481;width:131px; height:60px;text-align:center;margin-right:0px;padding-right:0px;} #menu-texte .nouveaute h2, #menu-texte .promotion h2{color:#FFF;line-height:60px;font-size:13px;text-transform: uppercase;text-decoration:none;margin-bottom: 0;} #menu-texte div.bloc-couleur{width:2px; height:29px; float:left; margin-right: 3px; } #menu-texte div.libelle{clear:both;width:125px; line-height: 45px; height:60px;background: #FFF;margin:auto;text-align: center;} #menu-texte div.libelle .separateur{width:18px;height:3px;background:#282828;margin:auto;} #menu-texte .libelle .lien-libelle {font-size:13px; color:#404040; text-decoration: none;text-transform: uppercase;margin-bottom: 0;} #menu-texte a{text-decoration: none;} #menu-texte a:hover { text-decoration: underline;} .sous-menu{ width:625px; background:white; position:absolute; top:56px; left:0; z-index:1; padding:10px; -moz-box-shadow: 0px 0px 4px #000;-webkit-box-shadow: 0px 0px 4px #000;box-shadow: 0px 0px 6px #CCC; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} .sous-menu .photo{ float:left; width:250px; height:200px;} .left-nouveaute{background: url("../img/menu/left-nouveaute.png") no-repeat;;width:9px;height:60px;float:left;margin-left:10px;} .right-nouveaute{background: url("../img/menu/right-nouveaute.png") no-repeat;;width:9px;height:60px;float:left;} .left-promo{background: url("../img/menu/left-promo.png") no-repeat;;width:9px;height:60px;float:left;} .right-promo{background: url("../img/menu/right-promo.png") no-repeat;;width:9px;height:60px;float:left;} .sous-menu .titre-menu { font-size: 16px; font-weight: bold;text-align:left;color:#333333;} .sous-menu ul { list-style: none;margin-left:20px;text-align:left;} .sous-menu ul li a{ font-size: 12px; color: #f86294; font-weight: bold; line-height: 20px; position: relative; display: block; height: 25px;} .sous-menu .produits{ float:left; width:200px; height: 200px} .sous-menu .produits .produit-menu { float:left; width:190px; padding:5px;} .sous-menu .produits .produit-menu .photo-menu{ text-align:center;} .sous-menu .produits .produit-menu .prix .ancien-prix{ text-decoration:line-through; color:#DDDDDD; display: block;} .sous-menu .produits .produit-menu .prix .nouveau-prix{ text-decoration:line-through; color:#ec1323;} .sous-menu .theme{ width:300px; float:left; padding-left:20px;} .sous-menu .theme a:hover {color:#404040; text-decoration: underline;} .sous-menu .liens{ width:260px; float:left; } #mise-en-avant{margin-top:10px;margin-bottom:10px;} #contenu{background:#FFF;border-top-left-radius:5px;border-top-right-radius:5px;} /* ------------------------------*/ /* PIED DE PAGE - LIENS */ /* ------------------------------*/ #liens-bas{margin-bottom:20px;margin-top:40px;} #liens-bas h2.fond-noir { background-color:#404040; color:white; font-weight: 100; font-size:13px;padding-left:10px; margin-bottom:10px;} #liens-bas li a { font-weight: bold; font-size:12px; color:#7e7e7e; text-decoration: none; } #liens-bas li a:hover { color:white; background-color:#f85d91; } #liens-bas li { list-style-type: none; margin:0; padding:0; } #liens-bas .separ{width:8px;height:42px;float:left;background:#f85d91;} /* --------------------------------*/ /* ACCUEIL */ /* --------------------------------*/ #presentation-accueil h2.fond-noir { background-color:#404040; color:white; font-weight: 100; font-size:13px;padding-left:10px; margin-bottom:20px;} #liens-meilleur p {width:296px; text-align:center; float:left;} #liens-meilleur a { height:30px;font-size:18px; color:#404040; text-decoration: none; font-weight:100; } #liens-meilleur a:hover { text-decoration: underline;} .bloc-produit {position:relative;} .bloc-produit .produit{margin-right:0;} .bloc-produit .titre-produit{line-height:30px; padding-left:20px; font-weight:bold;} .bloc-produit .pag a{ letter-spacing: 10px; color:white; text-decoration: none } .bloc-produit .pag { background:#5997d1;letter-spacing: 10px; color:white; text-decoration: none; padding-left:5px;} .deco{ float:left; height:30px; width:7px; background-color: red; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; } #carrousel div.prod , #carrousel_comp div.prod{color:#3a3a3a !important;width:210px; min-height:290px; float:left; text-align: center; position: relative;background:#FFF;border:1px solid #e4e4e2;} #carrousel div.prod a, #carrousel_comp div.prod a{color:#3a3a3a !important; text-decoration: none} div.prod h3{color:#3a3a3a;font-size:13px;} div.prod .nouveau-prix{font-size:21px;} #carrousel,#carrousel_comp {width:640px; height:200px;} #categorie_accueil .bloc{ height:150px;} #categorie_accueil .bloc .fond{ height:40px; margin-top:100px; background: url('../img/fond-titre-categorie.png') repeat-y;} #categorie_accueil .bloc .lien{ line-height:13px; position:relative; padding:5px;} #categorie_accueil .bloc .lien span{color:#404040; font-weight:bold; text-decoration: none; font-size:14px; position:absolute;} #salon-lyon{background: url('../img/salon-lyon.jpg') #f9f9f7 no-repeat;height:232px;} #presentation-salon{margin-left:260px;padding-top:40px;} #presentation-salon p{font-weight: bold;text-transform:;} #dossier-lissage{background: url('../img/dossier-lissage.jpg') #f7f7f5 no-repeat 100% 0%;height:232px;} #presentation-dossier{padding-left:15px;padding-top:25px;line-height: 30px;} #presentation-dossier a{color:#5b5b5b;font-size:13px;font-weight:bold;text-decoration:none;} #presentation-dossier a:hover{color:#171717;} /* --------------------------------*/ /* PIED DE PAGE - FOOTER */ /* --------------------------------*/ .footerdroite td a { color:white; font-size:x-small; } .footerdroite td {vertical-align: middle; width:100px; text-align: center;} #footer{ height:150px ;background-color:#2a2a2a; border-top:3px solid #f43977; padding-top:10px;} #footer img{ height:auto;width: auto;position: relative;display: inline-block;} #footer table td{ background-color: transparent; border:0; margin:0; padding: 0; line-height: normal;} /* --------------------------------*/ /* BANNIERE DEROULANTE */ /* --------------------------------*/ #banniere{ width:698px; height:267px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #slider{ width:940px; height:267px; position: relative; } #slider .slide{ position: absolute; top: 0; left: 0 ; width:940px; height: 216px;} #slider .contenu{position:absolute; padding: 15px; left:30px; top:0px; height:236px; width:200px; background: url("../img/fond-slide.png") top left repeat-x; } #slider .contenu h1 { font-weight: bold; font-size: 20px; line-height: 18px; color:#404040; margin-bottom: 4px;} #slider .contenu p {font-size: 13px; line-height: 13px; } #slider .contenu a {font-weight: bold;} #slider .navigation {position: absolute; bottom:10px; right:15px; } #slider .navigation span {background-color: #333;font-weight: bold; margin-right:5px; color: white; cursor: pointer; padding:3px 6px 3px 6px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} #slider .navigation span:hover, #slider .navigation .current{background-color: #FFF;font-weight: bold; margin-right:5px; color: #333; cursor: pointer; padding:3px 6px 3px 6px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} /* --------------------------------*/ /* PAGE LISTE PRODUIT */ /* --------------------------------*/ #liste-produits { color:#404040;margin-top:25px; } #liste-produits .description { background:url("../img/motif-barre.png"); padding:10px; margin-bottom:20px; } #liste-produits .pag { float:right; margin-bottom:20px;} #liste-produits .pag a { color:white; display: block; float:left; width:20px; height:20px; background-color: #404040; text-decoration: none; margin-right:5px; text-align:center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} #liste-produits .pag a:hover { text-decoration: underline;} #liste-produits .produit, .bloc-produit .produit{ width:270px; float:left; margin:0 35px 40px 0px; height:360px;position: relative;} .produit .stock{font-size:10px;color:#ffffff;position: absolute;top:0;right:0;background:#92d164;width:70px;height:20px;line-height: 20px;text-align: center;} .produit .rupture{font-size:10px;color:#ffffff;position: absolute;top:0;right:0;background:#ff0000;width:110px;height:20px;line-height: 20px;text-align: center;} .produit .image {width:220px;width:200px; height:200px; padding:10px; text-align: center; margin:auto; } .produit .nom {height:110px; background:#333333;color:#FFF;width:250px;display:table-cell;vertical-align: middle;text-align:center;padding-left:10px;padding-right:10px;} .produit .nom h2{font-size:18px;margin-bottom: 0;} .produit .nom a{color:#FFF;text-decoration:none;} #liste-produits .produit .sous_titre {height:33px; color:#505050; font-size: 10px;} .produit .prix{height:45px; text-align: center;} /* .produit .resume{height:325px; width:240px; font-size: 14px; color:#ffffff;background:#000;padding:20px 15px 15px 15px;position:absolute;top:0;display:none;}*/ .produit .resume{height:325px; width:240px; font-size: 14px; color:#ffffff;background:rgba(0,0,0,0.8);padding:20px 15px 15px 15px;position:absolute;top:0;display:none;} .produit .voir_produit{position:absolute;bottom:15px;left:15px;} .produit .prix .nouveau-prix{color:#3a3a3a;font-size: 21px; } .produit .prix .ancien-prix{text-decoration: line-through; color:#c3c3c3; font-size:16px;} .block-filtre{height:30px;background:#f85d91;margin-bottom: 20px;line-height: 30px;} .block-filtre ul{list-style: none;} .block-filtre a{color:#FFF;text-decoration: none;} .block-filtre a:hover { color:#FFF; text-decoration: underline;} .block-filtre strong a { color:#404040;} #liste-produits .block-filtre{ margin-bottom: 10px; padding:10px; background:url("../img/motif-barre.png"); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} #liste-produits .block-filtre .titre{ border-left:2px solid #5997d1; padding-left: 10px;font-size: 16px; font-weight: 100;} #liste-produits .block-filtre ul{ margin-left:20px;list-style: none;} #liste-produits .block-filtre li{ margin:0;} #liste-produits .block-filtre a { color:#FFF; text-decoration: none;} #liste-produits .block-filtre a:hover { color:#FFF; text-decoration: underline;} #liste-produits .promo { display: inline; color:white; background-color: #f94481; padding:3px 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;position:absolute;top:5px;left:-20px;font-size:16px;} /* --------------------------------*/ /* PAGE PRODUIT */ /* --------------------------------*/ #fiche-produit h1{color:#3a3a3a;} #fiche-produit .infos{} #fiche-produit .photo-principale{ position:relative; width:360px; padding:20px; height:360px; border:1px solid #DDD; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;} #fiche-produit .photo-principale .pastille{ position:absolute; width:209px; height:208px; top:-9px; left:-10px; } #fiche-produit .photo-principale .incline{ color:white; font-size: 18px;top:82px; left:31px; text-align: center;position:absolute; transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -khtml-transform: rotate(-45deg);} #fiche-produit .infos .prix { text-align:left;margin-bottom:15px;font-weight: bold;height:40px;width: 230px;line-height:40px;} #fiche-produit .infos .prix .ancien-prix { margin-left:10px;text-decoration: line-through; color:#a5a5a5; float: left; font-size: 16px; margin-right: 10px;} #fiche-produit .infos .prix .nouveau-prix { float:left;color:#f94481; font-size:26px; } #fiche-produit .infos .prix .promo { float:left;width:35px;height:35px;color:white; background-color: #f94481; padding:3px 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;line-height: 35px;} #fiche-produit .infos .expedition { margin-bottom:15px; text-align: center;color:white; background-color: #80c11a; padding:3px 5px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;} #fiche-produit .infos .options { background-color:#FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:5px;text-align:right;} #fiche-produit .infos .options label{ width:80px; float:left; line-height: 12px} #fiche-produit .infos .options input{ width:100px; float:left;} #fiche-produit .infos .ajouteraupanier{ margin-top: 100px} #fiche-produit .infos .ajouteraupanier:hover{} #fiche-produit .infos .ajouteraupanier input.ajouterpanier{ border:0; background: url('../img/ajouter_panier.png') no-repeat;width: 303px;height:43px;cursor:pointer;} #fiche-produit .infos .ajouteraupanier p{ color:white; margin:0; border:0; text-transform: uppercase; font-size:15px; line-height: 15px; text-align: center;} #fiche-produit .infos .boutongrispanier{line-height: 33px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding:5px; background-color: #efefef; } #fiche-produit .infos .boutongrispanier:hover{line-height: 33px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding:5px; background-color: #efefef; } #fiche-produit .infos .boutongrispanier p { color:#404040; } #fiche-produit .infos .boutonbleupanier{line-height: 33px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding:5px; background: #78addf; /* Old browsers */background: -moz-linear-gradient(top, #78addf 0%, #4387c6 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#78addf), color-stop(100%,#4387c6)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #78addf 0%,#4387c6 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #78addf 0%,#4387c6 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #78addf 0%,#4387c6 100%); /* IE10+ */background: linear-gradient(to bottom, #78addf 0%,#4387c6 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78addf', endColorstr='#4387c6',GradientType=0 ); } #fiche-produit .infos .boutonbleupanier:hover {-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding:5px; background: #78addf; /* Old browsers */background: -moz-linear-gradient(top, #4387c6 0%, #78addf 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4387c6), color-stop(100%,#78addf)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,#4387c6 0%,#78addf 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #78addf 0%,#4387c6 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #78addf 0%,#4387c6 100%); /* IE10+ */background: linear-gradient(to bottom, #78addf 0%,#4387c6 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78addf', endColorstr='#4387c6',GradientType=0 ); /* IE6-9 */} #fiche-produit .point-fort li{list-style-image: url("../img/puce.png"); } #fiche-produit #miniatures { margin:10px 0 20px 0px; } #fiche-produit .miniature { float:left; width:120px; margin:0 5px; height:110px; text-align:center; border:1px solid #DDD; } #fiche-produit #pagination-photo{ text-align:center; width:400px;} #fiche-produit #pagination-photo a{ text-decoration:none; } #fiche-produit .bloc-description{ margin-bottom: 20px;color:#222222;} #fiche-produit .bloc-description a{ color:#f85d91 !important;text-decoration: none !important;} #fiche-produit .bloc-description .navigation .gris-fonce{ margin:0; float:left;line-height: 28px; padding:0px 10px; height:28px; font-size:14px; text-decoration:none; color:white; background:url("../img/fond-description.png") repeat-x;} #fiche-produit .bloc-description .navigation .gris-clair{margin:0; float:left; line-height: 28px; padding:0px 10px; height:28px; font-size:14px; text-decoration:none;color:white; background-color:#c5c5c5;} #fiche-produit .bloc-description .navigation a{ color:white; text-decoration: none;} #fiche-produit .bloc-description .navigation a:hover{ color:white; text-decoration: underline;} #fiche-produit .bloc-description .contenu {margin-bottom: 10px;} #fiche-produit #carrousel div.prod {width:220px; height:200px; float:left; text-align: center; position: relative;} #fiche-produit #carrousel div.prod a{color:#404040; text-decoration: none;} #fiche-produit #carrousel {width:640px; height:200px;} /* --------------------------------*/ /* PANIER */ /* --------------------------------*/ #panier #recap { margin-bottom: 20px;} #panier #recap table { width:940px; } #panier #recap table thead, #panier #recap table tfoot { background-color:#f0f1f2;} #panier #recap table thead tr, #panier #recap table tfoot tr{ line-height: 33px;height:33px;} #panier #recap table tbody td{ height:33px; padding:5px 0; vertical-align: middle; text-align: center;} #panier #recap table thead th{ border-bottom: 3px solid white;} #panier #recap table tbody tr{ border-bottom: 3px solid white; background-color: #f9f9f9;} #panier #recap table thead th, #panier #recap table tfoot tr{ color:#404040; font-size:16px; text-align: center;} #panier #recap td.produit {text-align:left;} #panier #recap td.produit .nom-produit{ font-weight:bold; text-align:left; text-transform: uppercase} #panier #recap td.produit .attribut{ color:#AAA; line-height: 12px} #panier #recap td.produit .attribut li{list-style-image: url("../img/puce.png"); } #panier #recap .photo {border:1px solid #eceeef; width:80px; background-color: white;margin-left:10px;} #panier #produit-comp {border:1px solid #eceeef; width:940px; margin-bottom:20px;} #panier #carrousel-panier div.prod {float:left; width:220px; height:300px; float:left; text-align: center; position: relative;} #panier #carrousel-panier div.prod a{color:#404040; text-decoration: none;} #panier #carrousel-panier {width:640px; height:200px;} #panier #carrousel-panier .fleche-gauche{float:left;} #panier #carrousel-panier .fleche-droite{float:left;} /* --------------------------------*/ /* COMMANDE */ /* --------------------------------*/ #etapes{ height:54px; background:url("../img/body.jpg") repeat; margin-bottom: 20px} #etapes > span {float:left; color:#f85d91; margin-left: 16px;font-weight:bold;font-size:14px !important;line-height: 54px;} #etapes #bloc-etapes {float:right; margin:8px 20px 0 0;} #etapes .etape{height:46px; width:170px;float:left; background-color:#a1a1a1; position:relative; margin-right: 1px;} #etapes .hover{background-color: #f85d91;} #etapes .etape .chiffre{height:46px; color:white; position:absolute; bottom:10px; left:3px;font-size:3.8em;} #etapes .etape .texte{height:46px; color:white; position:absolute; right:10px; top:15px;font-size: 1em;} #etapes a{color:#FFF;font-size:1em;text-decoration:none;text-transform: uppercase;} .haut-arrondi {-webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px;border-top-right-radius: 5px;} #processus h2 {font-size: 1.3em; } #processus .bloc {width:390px; background:url("../img/body.jpg") repeat; padding:10px; margin-bottom: 10px;} #processus .bloc .input{width:30px; float:left; line-height: 130px; padding-left: 10px} #processus .bloc .input input{width:20px; height:20px;} #processus .bloc .adresse{ margin-left:50px;} #processus .bloc-100 { background-color: #f9f9f7; margin-bottom: 10px;} #processus .bloc-100 .radio{width:30px; float:left; } #processus .bloc-100 .radio input{width:20px; height:20px; margin: 17px 0 0 20px ;} #processus .bloc-100 .transporteur{ margin-left:50px; float:left;padding-top: 4px;} #processus .bloc-100 .prix{ float:right; height:50px; line-height:50px; padding:0 20px; background-color:#f94481; color:white; font-size: 2em; } /* --------------------------------*/ /* IDENTIFICATION */ /* --------------------------------*/ #identification .numero { float:left; width:153px; text-align: center; } #identification .numero p { font-style: italic; font-size:15px; } #identification .numero div p { line-height:60px; font-size: 40px; font-style:normal; } #identification .numero .fond-hover p{ color:white; } #identification .numero .fond p{ color:#404040; } #identification .numero .fond-hover { margin-left: 42px;background:url("../img/etape-hover.png"); width:67px; height:74px; } #identification .numero .fond {margin-left: 42px; background:url("../img/etape.png"); width:67px; height:74px; } #identification h2{font-size:15px;} #identification .box{border:1px solid #DDD; padding:10px;} #identification .boxh{border-left:1px solid #EFEFEF;border-top:1px solid #DDD;border-right:1px solid #DDD; padding:10px;} #identification .boxb{border-left:1px solid #EFEFEF;border-bottom:1px solid #DDD;border-right:1px solid #DDD; padding:10px;} #identification .info { position:relative; } #identification .info div{z-index:1; position:absolute; width:200px; border:1px solid #DDD;; background-color: #404040; color:white;padding:10px;} #identification table.adresse tr{ border-bottom:1px solid #DDD;} #identification table.adresse tr td{vertical-align: middle; height:100px;} #identification .fleche{float:left; margin-top:26px;} #identification a {text-decoration: none;} #identification #recap { margin-bottom: 20px} #identification #recap table { width:940px;} #identification #recap table thead, #panier #recap table tfoot { background-color:#f9f9f7;} #identification #recap table thead tr, #panier #recap table tfoot tr{ line-height: 33px;height:33px;} #identification #recap table tbody td{ height:33px; padding:5px 0; vertical-align: middle; text-align: center;} #identification #recap table thead th{ border-bottom: 3px solid white;} #identification #recap table tbody tr{ border-bottom: 3px solid white; background-color: #f9f9f7;} #identification #recap table thead th, #panier #recap table tfoot tr{ color:#404040; font-size:16px; text-align: center;} #identification #recap td.produit {text-align:left;} #identification #recap td.produit .nom-produit{ font-weight:bold; text-align:left; text-transform: uppercase} #identification #recap td.produit .attribut{ color:#AAA; line-height: 12px} #identification #recap td.produit .attribut li{list-style-image: url("../img/puce.png"); } #identification #recap .photo {border:1px solid #eceeef; width:80px; background-color: white;margin-left:10px;} /* NEW */ .menu-responsive, .mise-en-avant-responsive, .id_mise_en_avant_responsive { display : none; } .menu-normal, .mise-en-avant-normal, .recherche_normal, .id_mise_en_avant_normal { display : block; } .header_img img { margin-left:5px; width: auto; } /*#contenu.contenu2{box-shadow : initial;-moz-box-shadow: initial; -webkit-box-shadow: initial;} */ .recherche_prod { height: 160px; } .recherche_prod #form-recherche input.recherche-input { border-radius: 5px; padding-top: 4px; width: 230px; height: 28px; border: none; float: left; margin-right: 2px; border: 1px solid #bebebe; } .recherche_prod #form-recherche input.btn-recherche { border: 1px solid #bebebe; border-radius: 5px; } .ombre2 { -moz-box-shadow: 0px 6px 6px #000; -webkit-box-shadow: 0px 6px 6px #000; box-shadow: 0px 6px 6px #CCC; } #contenu.ombre2{background: #FFF; border-top-left-radius: 0px; border-top-right-radius: 0px;} @media screen and (max-width: 980px) { .container_16,.container_16 .grid_1,.container_16 .grid_2,.container_16 .grid_3,.container_16 .grid_4,.container_16 .grid_5,.container_16 .grid_6,.container_16 .grid_7,.container_16 .grid_8,.container_16 .grid_9,.container_16 .grid_10,.container_16 .grid_11,.container_16 .grid_12,.container_16 .grid_13,.container_16 .grid_14,.container_16 .grid_15,.container_16 .grid_16{width:100%!important;margin:0;padding:0} /* Layout */ #logo,#panier,.menu_haut{display:none} .bande-haut{height:initial;line-height:initial} .bande-haut h1,.bande-haut p{text-align:center;margin:10px 0;width:100%;display:block} .header_img{text-align:center}.header_img img{text-align:center;margin:15px 0} #header {height : 148px;} #header #form-recherche input.recherche-input{float:initial;margin-left:-35px} #header #form-recherche{width:100%;margin:0;text-align:center} #header #form-recherche input.btn-recherche{position:absolute} .cadre_recherche{position:relative} .mise-en-avant-normal{display:none} .mise-en-avant-responsive{display:block;text-align:center} .mise-en-avant-responsive img{padding:10px} #salon-lyon {margin-top : 10px;} #liens-bas {padding : 0 15px;} /* MENU */ body { min-width: 100%; } .site-container { overflow : hidden; height : 100%;} .menu-responsive { display : block; } .menu-normal { display : none; } .site-pusher{height:100%;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transform:translateX(0);transform:translateX(0)} .site-content{position:absolute;top:0;right:0;left:0;bottom:0;overflow-y:scroll;-webkit-overflow-scrolling:touch} .header{position:fixed;left:0;right:0;height:66px;line-height:66px;color:#404040;background-color:#fff} .header{position:static;border-bottom:1px solid #e7e7e7} .header a{text-decoration:none;color:inherit} .menu_header_logo{font-weight:700;float:left; padding-left: 15px; padding-top: 2px;} .menu_header_logo img{width :140px;} .menu_header{float:left} .menu_header a{padding:0 10px;display:block;height:40px;line-height:40px;border-bottom:1px solid #e7e7e7} .menu_header a:first-child{border-top:1px solid #e7e7e7} .menu_header a:hover{color:#f85d91} .menu_header_icon{position:relative;display:block;float:left;width:60px;height:66px;cursor:pointer; border-right: 1px solid #e7e7e7;} .menu_header_icon:after{content:'';position:absolute;display:block;width:1rem;height:0;top:18px;left:21px;box-shadow:0 10px 0 1px #404040,0 16px 0 1px #404040,0 22px 0 1px #404040} .menu_header_panier{position:relative;display:block;float:right;width:60px;height:59px;cursor:pointer;text-align:center;border-left:1px solid #e7e7e7; padding-top: 7px;} .menu_header_panier .produit-total{position:absolute;top:0;left:0;width:100%;padding-top:18px;color:#f94481;font-weight:300;font-size:12px} .menu_header_utilisateur{position:relative;display:block;float:right;width:60px;height:60px;cursor:pointer;text-align:center;border-left:1px solid #e7e7e7; padding-top: 6px;} .icon-haut{font-size:25px;color:#f94481} .menu_header{-webkit-transform:translateX(-250px);transform:translateX(-250px);-webkit-transition-duration:.3s;transition-duration:.3s;z-index:100000000000;position:absolute;left:0;top:66px;bottom:0;overflow-y:scroll;-webkit-overflow-scrolling:touch;background-color:#fff;width:250px} .nav-sidebar .menu_header{-webkit-transform:translateX(0);transform:translateX(0)} .nav-sidebar .site-pusher{-webkit-transform:translateX(250px);transform:translateX(250px)} .nav-sidebar .site-cache{position:absolute;left:0;right:0;bottom:0;top:0;background-color:rgba(0,0,0,.6)} .fleche-droite{float:right;padding-right:20px} .bloc-sous-menu{display:none} .menu_separation{border-top: 2px solid #e7e7e7;} .header-banner {background: #f85d91;color: #fff;position: relative;text-align: center;z-index: 1;height: 45px;} /* VIDEO */ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-container video{ width : 545; height : 360; } .my-video-dimensions { width: 100% !important; height: 360px !important; } /* FORM */ .controls, .control-group { display : block; margin : 0 !important; text-align : center; width : 100%; } .form-horizontal .control-label { display: block; width : 100% !important; text-align : center !important; } .checkbox { padding : 0 15px !important; } legend { text-align : center; } .gros-bouton { float : left; display : block; text-align : center; } #identification p { float : initial; text-align : center; } /* ACCUEIL */ .titre { padding : 0; margin : 0; text-align : center; display : block; height : 100%; padding: 20px; line-height : initial; height : 100%; } .bloc-produit { margin-top : 30px; } #liste-produits .produit, .bloc-produit .produit, .produit .resume { width : 100%; margin : 0; padding: 0; height: 360px; text-align : center; padding-top : 20px; } .produit .voir_produit { position : initial; bottom : initial; left : initial; text-align: center; display: block; margin-top: 50px; } .produit .nom { display : block; width : 100%; padding : 0; } .produit .nom h2 { padding-top : 20px; } .bloc { width : 100%; padding : 0; } .opacite-lissage { background-color: rgba(247,247,245,0.8); height: 100%; } #presentation-salon { margin-left : 0; padding : 15px; } #footer { height: initial; text-align : center; } #footer .grid_3 { text-align : center; } #footer p { padding : 0 20px; } .recherche_normal, .id_mise_en_avant_normal { display : block; } .recherche_normal, .id_mise_en_avant_normal #form-recherche{ display : none; } .id_mise_en_avant_responsive { display : block; } #liens-bas .separ { display : none; } /* PRODUIT */ .block-filtre { height : initial; } #liste-produits .produit { margin-bottom: 20px; } #fiche-produit .photo-principale { width : auto; } #fiche-produit #pagination-photo { text-align : initial; width : auto; } .caroufredsel_wrapper { margin : 0 auto !important; } #fiche-produit .infos .options label { width : auto; padding-right : 20px; } #fiche-produit #quantite { float : left; } #description-produit .right { float : initial; } #description-produit p { padding : 10px; margin-bottom : 0; } #fiche-produit .infos .ajouteraupanier .hasref { float: left; margin: 20px 0; } /* PANIER */ .totalttc { margin : 20px 0; } /* COMMANDE */ #processus .bloc { width : initial; } input.span6, textarea.span6, .uneditable-input.span6 { width : 99% !important; } #etapes #bloc-etapes { float : initial; margin : auto; } #etapes .etape { width : 100%; } #etapes .etape.haut-arrondi { webkit-border-top-left-radius: initial; -webkit-border-top-right-radius: initial; -moz-border-radius-topleft: initial; -moz-border-radius-topright: initial; border-top-left-radius: initial; border-top-right-radius: initial; } .margin-bottom { margin: 15px 0 !important; } } @media screen and (max-width: 520px) { .header-banner {height: 65px;} #footer .footerdroite { padding : 20px 0; } #footer .footerdroite td { display : block; width : 100%; padding : 5px 0; } #fiche-produit .photo-principale img { /*width : 100% !important; */ max-width: 100%; height: auto } .my-video-dimensions { width: 100% !important; height: 166px !important; } } @media screen and (max-width: 360px) { .header-banner {height: 55px;} #fiche-produit .infos .ajouteraupanier .hasref { float: initial; margin: initial; } #fiche-produit .infos .ajouteraupanier input.ajouterpanier { background-size: 100%; width : 100%; } } /* SYSTEM D'AVIS */ .avis-etoile{ color : #fea569; font-size: 12px; } .avis-contenu{ font-size: .85rem; padding: 10px 0; } .avis-nom{ position: absolute; bottom: 0; right: 20px; font-weight: bold; } .avis-cadre{ } .owl-prev, .owl-next { position: absolute; top: 50%; transform: translateY(-50%); } .owl-prev { left: -2rem; font-size: 35px !important; } .owl-next { right: -2rem; font-size: 35px !important; } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; } .rounded { border-radius: .25rem !important; } .shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; } .p-3 { padding: 1rem !important; } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{ color: #f85d91 !important; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{ background: #f85d91 !important; } .owl-theme .owl-dots .owl-dot span{ background: #ff99bb !important; } .owl-theme .owl-nav [class*=owl-]:hover { background: #ffffff !important; color: #000000 !important; text-decoration: none !important; } /* FIN */