/* Police personnalisée */ @font-face { font-family: 'robotoregular'; src: url('fonts/roboto-regular-webfont.eot'); src: url('fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/roboto-regular-webfont.woff') format('woff'), url('fonts/roboto-regular-webfont.ttf') format('truetype'), url('fonts/roboto-regular-webfont.svg#robotoregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'chopinscriptmedium'; src: url('fonts/chopinscript-webfont.eot'); src: url('fonts/chopinscript-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/chopinscript-webfont.woff2') format('woff2'), url('fonts/chopinscript-webfont.woff') format('woff'), url('fonts/chopinscript-webfont.ttf') format('truetype'), url('fonts/chopinscript-webfont.svg#chopinscriptmedium') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'robotoregular'; src: url('fonts/roboto-bold-webfont.eot'); src: url('fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/roboto-bold-webfont.woff2') format('woff2'), url('fonts/roboto-bold-webfont.woff') format('woff'), url('fonts/roboto-bold-webfont.ttf') format('truetype'), url('fonts/roboto-bold-webfont.svg#robotobold') format('svg'); font-weight: 600; font-style: normal; } /* Elements de base */ html { width: 100%; height: 100%; } body { margin: 0px; padding: 0px; font-family: 'robotoregular', Arial, Helvetica, sans-serif; font-size: 14px; line-height: normal; color: #4c4c4e; height: 100%; width: 100%; background: #f0f0f0 -webkit-linear-gradient(bottom right, #fff, #e0e0e0) fixed; background: #f0f0f0 linear-gradient(to bottom right, #fff, #e0e0e0) fixed; } table { margin: 0px; padding: 0px; } tr, thead, tbody { margin: 0px; padding: 0px; } td { margin: 0px; padding: 0px; vertical-align: top; } th { margin: 0px; padding: 0px; vertical-align: top; } p { margin: 0px; padding: 0px; margin-bottom: 4px; height: auto; } ul, ol { margin: 12px 0px; padding: 0; padding-left: 40px; } li { margin-top: 0px; margin-bottom: 0px; list-style-image: url(/img/front/bull-li.png); line-height: 15px; } img { border: none; vertical-align: top; } input { vertical-align: middle; margin: 0px; margin-top: -1px; border: 1px solid #888; padding: 2px 3px; font-size: 12px; line-height: 1; color: #000; font-family: Arial, sans-serif; } input[type=file] { border: none; } input[type=checkbox] { margin-top: -2px; border: none; } input[type=radio] { margin-top: -3px; border: none; } input[type=submit] { border-radius: 5px; background: #eee url(/img/admin/tick.png) 4px center no-repeat; padding: 1px 4px; padding-left: 20px; border-color: #ccc; color: #666; cursor: pointer; } textarea { margin: 0px; border: 1px solid #888; font-size: 12px; color: #000; resize: none; font-family: Arial, sans-serif; } select { margin: 0px; border: 1px solid #888; font-size: 12px; color: #000; font-family: Arial, sans-serif; } div { position: relative; } hr { color: #999; background-color: #999; height: 1px; border: none; } strong { font-weight: 600; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: geometricPrecision; } /* Liens et classes associées */ a, a:link, a:visited { text-decoration: none; color: #d97700; } a:hover { text-decoration: none; } a.actif { font-weight: bold; } li a { text-decoration: none; color: #d97700; } .btnbg { border: 1px solid #c6c6c6; height: 45px; padding-left: 39px; text-decoration: none; display: block; margin-bottom: 10px; background-repeat: no-repeat; background-position: left top; } .btnbg.vert { background-color: #6a9d2e; } .btnbg.gris { background-color: #828282; } .btnbg:hover { background-color: #d97700; } .btnbg > .btncnt { height: 39px; padding: 3px 12px; color: #fff; font-family: 'chopinscriptmedium', cursive; font-size: 18px; line-height: 18px; font-weight: normal; background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.12) 29%, rgba(0, 0, 0, 0) 48%); background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.12) 29%, rgba(0, 0, 0, 0) 48%); text-shadow: 0 3px 4px rgba(0, 0, 0, 0.7); -moz-text-shadow: 0 3px 4px rgba(0, 0, 0, 0.7); -webkit-text-shadow: 0 3px 4px rgba(0, 0, 0, 0.7); } a.linkgv, a.linkgv:link, a.linkgv:visited { color: #555555; font-size: 13px; line-height: 16px; } a.linkgv:hover { color: #6a9d2e; text-decoration: none; } a.lnkbul, a.lnkbul:link, a.lnkbul:visited { background: url(/img/front/bull-rayon.png) no-repeat 0px -8px; display: inline-block; padding-left: 19px; } a.lnkbul:hover { background-image: url(/img/front/bull-rayonh.png); } a.btnCancel { border-radius: 5px; background: #eee url(/img/admin/undo.png) 4px center no-repeat; padding: 1px 4px; padding-left: 20px; border-color: #ccc; color: #666; cursor: pointer; } /* Titres */ h1 { position: relative; font-family: 'chopinscriptmedium', cursive; font-size: 42px; line-height: 35px; font-weight: normal; color: #3f3f3f; margin: 0px; margin-top: 5px; padding: 0px; padding-bottom: 5px; } h1.souligne { border-bottom: 1px dotted #3f3f3f; } h2 { font-size: 20px; font-weight: bold; color: #b6b6b6; margin: 0px; margin-bottom: 8px; padding: 0px; text-transform: uppercase; } h2 > a, h2 > a:link, h2 > a:visited { color: #b6b6b6; } h2 > a:hover { color: #6a9d2e; text-decoration: none; } h2.pied { color: #555555; text-transform: none; } h2.pied > a, h2.pied > a:link, h2.pied > a:visited { color: #555555; } h2.pied > a:hover { color: #6a9d2e; text-decoration: none; } h3 { color: #78a83f; font-size: 16px; padding: 0; margin: 5px 0; line-height: normal; } h4 { background-color: #d97700; /* background-image: -webkit-linear-gradient(top, #b30101, #d83d00); background-image: linear-gradient(to top, #b30101, #d83d00); */ box-shadow: 0 17px rgba(0, 0, 0, 0.1) inset; color: white; font-size: 18px; font-weight: bold; line-height: 33px; margin-bottom: 5px; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); text-transform: uppercase; } h5 { color: #AA1B8E; font-size: 16px; padding: 0; margin: 0; margin-bottom: 5px; line-height: 20px; } h6 { font-family: 'chopinscriptmedium', cursive; font-size: 26px; line-height: 30px; font-weight: normal; color: #333; margin: 0px; margin-bottom: 5px; padding: 0px; border-bottom: 1px solid #c7c7c7; } /* Classes de style */ .nodisp { display: none; } .clear { display: block; clear: both; } .erreur { font-size: 13px; font-style: italic; color: #F00; background: url(/img/admin/erreur.png) no-repeat left; padding-left: 22px; font-weight: 500; } .alerte { display: inline-block; font-size: 11px; font-style: normal; color: #ffae00; background: url(/img/admin/erreur.png) no-repeat left top; padding-left: 20px; font-weight: normal; } .info { font-size: 11px; font-style: italic; color: #0F0; background: url(/img/admin/information.png) no-repeat left; padding-left: 22px; font-weight: 500; color: #369; } .gros { font-size: 18px; font-weight: bold; color: #000; margin-bottom: 8px; } .petit { font-size: 11px; font-style: normal; } .surligne { background: #FF0; color: #036; font-style: normal; font-weight: bold; } .hr { border-top: 1px solid #777; height: 1px; font-size: 0px; } .ombre { box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); } .tombre { text-shadow: 0px 0px 4px #000; -moz-text-shadow: 0px 0px 4px #000; -webkit-text-shadow: 0px 0px 4px #000; } .outline { font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; color: #fff; } .espace { height: 5px; font-size: 0px; overflow: hidden; } .icone { width: 16px; height: 16px; } .contenu { left: 50%; width: 1200px; margin-left: -600px; } .contenu > .padding { padding: 0px; } .cntcol { display: table; width: 100%; } .cntcol > .col3 { display: table-cell; width: 33%; border-left: 1px solid #c7c7c7; } .cntcol > .col3:first-child { border-left: none; } .cntcol > .col3 > .padding { padding: 0 12px; } .inline { display: inline-block; } .nbart { font-size: 9px; } .cursive { font-family: 'tabitha', cursive; } .fright { float: right; } .aright { text-align: right; } .aleft { text-align: left; } .acenter { text-align: center; } .disabled { color: #d7d7d7; } .txtH1 { margin: 8px; } .cntBloc { background-color: #fff; border: 1px solid #d7d7d7; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); padding: 20px; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.07)); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.07)); } .moocboqte { text-align: right; width: 24px; } .labelCheck.inactive { color: #a7a7a7; } input.montant, input.entier { text-align: right; } .btnCommander { cursor: pointer; } .sepLowres { display: none; } a.btnRouge { background: #d97700; color: #fff; font-weight: bold; padding: 2px 5px; border-radius: 3px; } a.btnStyle { background-color: #d97700; box-shadow: 0 17px rgba(0, 0, 0, 0.1) inset; color: white; display: inline-block; padding: 0 20px; font-size: 18px; font-weight: bold; line-height: 33px; height: 33px; border-radius: 15px 0 0 15px; cursor: pointer; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); } a.btnStyle:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.6), 0 17px rgba(255, 255, 255, 0.1) inset; } a.btnStyle > img { width: 48px; height: 48px; margin-top: -14px; margin-right: 10px; } /* Promos % */ .pctpromo { display: inline-block; background-color: #a00; color: #fff; font-style: normal; font-weight: bold; padding: 0 4px; border-radius: 5px; font-size: 12px; line-height: 14px; } #cntRayons .cntArthaz .pctpromo { margin-top: 12px; } #slideProduits #cntSlide > a .pctpromo { font-size: 16px; line-height: 18px; position: absolute; right: 0; top: -18px; } /* Elements de la page */ #btop-test { position: fixed; bottom: 0; left: 0; right: 0; padding: 4px 8px; background: #f00; color: #fff; text-align: center; z-index: 100004; font-size: 18px; } #content { padding: 25px 0; background: url(/img/front/bg-page.jpg) no-repeat center fixed; background-size: cover; } .at4-share-btn { box-shadow: 0 0 6px rgba(0,0,0,0.7); } /* Entête */ #entete { position: relative; height: 175px; overflow: hidden; background-color: #333333; color: #fff; } #entete > .contenu { height: 100%; } #entete #titsit { position: absolute; top: 12px; left: 100px; font-family: 'chopinscriptmedium', cursive; font-size: 100px; line-height: 100px; font-weight: normal; color: #fff; } #entete #cntClient { position: fixed; top: 0; left: 50%; margin-left: 100px; width: 500px; padding: 8px 0; color: #3f3f3f; background: #cecece; border-radius: 0 0 4px 4px; z-index: 99; box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.75), 0 3px 3px rgba(255, 255, 255, 0.1) inset; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)); } #entete #cntClient a { color: #3f3f3f; } #entete #cntClient a:hover { color: #fff; } #entete #cntClient #compte { float: left; padding: 0 30px; border-right: 1px dotted #888; padding-left: 80px; background: url(/img/front/picto-compte.png) no-repeat 24px center; } #entete #cntClient #compte a { display: block; line-height: 16px; } #entete #cntClient #compte a > strong { font-size: 18px; } #entete #cntClient #compte a > span { font-size: 11px; line-height: 12px; } #entete #cntClient #panier { float: left; padding: 0 30px; border-right: 1px dotted #888; padding-left: 80px; background: url(/img/front/picto-panier.png) no-repeat 24px center; min-width: 90px; } #entete #cntClient #panier a { display: block; line-height: 16px; } #entete #cntClient #panier a > strong { font-size: 18px; } #entete #cntClient #panier a > span { font-size: 11px; } #entete #cntClient #chxlangue { float: right; padding-right: 30px; } #entete #cntClient #chxlangue a { padding: 0; border: none; display: block; height: 12px; width: 18px; text-decoration: none; margin: 5px 0; background-repeat: no-repeat; background-position: top left; } #entete #cntClient #chxlangue a.active { background-position: 0 -12px; } #entete #cntRech { position: absolute; top: 75px; font-size: 12px; right: 0px; width: auto; } #entete #cntRech #frmRech { border-radius: 5px; height: 29px; overflow: hidden; } #entete #cntRech #frmRech > div { float: left; } #entete #cntRech #frmRech > div.clear { float: none; } #entete #cntRech #chxPortee { background-color: #c7c7c7; background-image: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)); height: 29px; line-height: 3px; overflow: hidden; width: 200px; } #entete #cntRech #chxPortee #portee { background-color: transparent; font-weight: bold; height: 29px; padding: 0 0 0 7px; border: none; font-size: 12px; width: 220px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: url(/img/front/pop-down.png) no-repeat 180px center; } #entete #cntRech #chxPortee .porteeSite { font-weight: bold; margin: 4px 0; } #entete #cntRech #chxPortee .porteeRayon { font-weight: normal; margin-left: 12px; } #entete #cntRech #recherche { height: 29px; width: 258px; line-height: 29px; margin: 0; padding: 0 5px; border: none; font-size: 12px; color: #59980e; border-radius: 0; } #entete #cntRech #recherche::-webkit-input-placeholder { color: #aaa; } #entete #cntRech #recherche::-moz-placeholder { color: #aaa; } #entete #cntRech #btnValrec { background-color: #d97700; background-image: none; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)); background-position: top left; border-radius: 0 4px 4px 0; color: #fff; cursor: pointer; font-weight: bold; height: 31px; line-height: 29px; padding: 0 5px; text-align: center; border: none; } #entete #menu { position: absolute; left: 0; width: 100%; top: 124px; background-color: #d97700; background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); height: 40px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } #entete #menu a { color: #fff; float: left; font-size: 26px; font-weight: 900; height: 37px; line-height: 37px; padding: 0px 25px; padding-bottom: 3px; text-decoration: none; border-right: 1px solid #764100; } #entete #menu a:first-child { border-left: 1px solid #764100; } #entete #menu a:hover { background-color: #888; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)) } #entete #menu a.actif { background-color: #cecece; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)); border-radius: 4px 4px 0 0; border: none; padding: 8px 25px; padding-bottom: 16px; margin-top: -8px; box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(255, 255, 255, 0.1) inset; -webkit-transition: background-color 0.3s; transition: background-color 0.3s; } /* Barre de navigation */ #cntNavig { height: 16px; line-height: 16px; padding: 4px 6px; vertical-align: top; overflow: hidden; font-size: 11px; margin-top: -20px; margin-bottom: 15px; } #cntNavig > a { display: inline-block; height: 16px; line-height: 16px; vertical-align: top; background: url(/img/front/nav-sep.png) no-repeat left center; padding: 0 10px 0 18px; color: #555555; } #cntNavig > a:hover { color: #6a9d2e; } #cntNavig > #navHome { display: inline-block; height: 16px; width: 10px; background: url(/img/front/nav-home.png) no-repeat left center; padding: 0 10px 0 0; } #cntNavig > #navHome:hover { background: url(/img/front/nav-homeh.png) no-repeat left center; } /* Rayons */ #cntRaysel { display: none; } #cntFrlmob { display: none; } #cntRayons { float: left; width: 320px; margin-right: 20px; } #cntRayons .lnkrayon { display: block; border-bottom: 1px solid #b7b7b7; color: #555555; font-size: 18px; line-height: 20px; padding: 6px 4px 6px 19px; text-decoration: none; background: url(/img/front/bull-rayon.png) no-repeat left 1px; } #cntRayons .lnkrayon:hover { color: #d97700; background-image: url(/img/front/bull-rayonh.png); } #cntRayons .lnkrayon.currayon { color: #6a9d2e; background-image: url(/img/front/bull-rayonc.png); } #cntRayons .cntSrayons { padding: 4px 0; background: #d7d7d7 linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 10px); border-bottom: 1px solid #c7c7c7; } #cntRayons .cntSrayons .lnkrayon { border-bottom: none; font-size: 15px; line-height: 17px; padding: 4px 4px 4px 25px; background: url(/img/front/bull-rayon.png) no-repeat 6px -4px; } #cntRayons .cntSrayons .lnkrayon.currayon { color: #6a9d2e; background-image: url(/img/front/bull-rayonc.png); } #cntRayons .cntSsrayons { padding: 4px 0; padding-left: 6px; padding-top: 6px; margin: 0; margin-bottom: 4px; background: #ccc linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0) 10px); border-top: 1px solid #b7b7b7; border-bottom: 1px solid #b7b7b7; } #cntRayons .cntSsrayons .lnkrayon { border-bottom: none; font-size: 13px; line-height: 15px; padding: 4px 4px 4px 25px; background: url(/img/front/bull-rayon.png) no-repeat 6px -4px; } #cntRayons .cntSsrayons .lnkrayon.currayon { color: #6a9d2e; background: url(/img/front/bull-rayonc.png) no-repeat 6px -8px; } /* Blocs articles au hasard */ #cntRayons .cntArthaz { margin-top: 24px; margin-left: 36px; box-shadow: 0 0 1px rgba(0,0,0,0.3); border-radius: 0 15px 15px 0; } #cntRayons .cntArthaz .icoContour { position: absolute; left: -36px; top: -12px; display: inline-block; background: #fff; padding: 5px; height: 52px; width: 52px; line-height: 50px; border-radius: 50%; vertical-align: middle; border: 1px solid #888888; text-align: middle; } #cntRayons .cntArthaz .icoImage { display: inline-block; border-radius: 50%; background: #888; /* #d97700; */ padding: 10px; height: 30px; width: 30px; line-height: 28px; vertical-align: middle; border: 1px solid #888888; box-shadow: 0 0 8px rgba(0,0,0,0.3) inset; } #cntRayons .cntArthaz:hover .icoImage { background: #d97700; } #cntRayons .cntArthaz .icoImage > img { width: 32px; height: 32px; } #cntRayons .cntArthaz > h4 { background-color: #fff; background-image: linear-gradient(to top, rgba(0,0,0,0.3), rgba(0,0,0,0)); margin: 0; height: 42px; line-height: 42px; text-align: left; padding-left: 44px; box-shadow: 0 0 1px rgba(0,0,0,0.3); border-radius: 0 15px 0 0; } #cntRayons .cntArthaz > h4 > a { color: #3f3f3f; font-family: 'chopinscriptmedium', cursive; font-size: 32px; font-weight: normal; text-transform: none; } #cntRayons .cntArthaz > a { display: block; padding: 6px 8px; background: #e7e7e7; border-top: 1px solid #d7d7d7; border-radius: 0 0 15px 0; } #cntRayons .cntArthaz > a > img { width: 90px; height: 90px; float: left; margin-right: 12px; } #cntRayons .cntArthaz > a > .nomart { display: block; text-transform: uppercase; font-weight: bold; color: #555555; height: 56px; word-wrap: break-word; overflow: hidden; } #cntRayons .cntArthaz > a > .prxart { position: absolute; bottom: 8px; right: 8px; color: #d97700; font: bold 25px/1 Tahoma,Geneva,sans-serif; } #cntRayons .cntArthaz:hover { box-shadow: 0 0 4px rgba(0,0,0,0.3); } #cntRayons .cntArthaz > h4:hover { background-color: #888; color: #fff; } #cntRayons .cntArthaz > h4:hover > a { color: #fff; } #cntRayons .cntArthaz > a:hover { background: #fff; } #cntRayons .cntArthaz > a:hover > .nomart { color: #6a9d2e; } #cntRayons .cntArthaz.noart { border-radius: 0 15px 15px 0; } #cntRayons .cntArthaz.noart > h4 { border-radius: 0 15px 15px 0; } /* Contenu de la page */ #cntPage { float: right; width: 820px; position: relative; } #cntPage .lnkaccart { display: block; float: left; background: #fff; text-align: center; border: 1px solid #c7c7c7; border-radius: 2px; height: 260px; width: 140px; padding: 6px 8px; margin: 3px; position: relative; } #cntPage .lnkaccart:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } #cntPage .lnkaccart > .nomart { display: block; font-size: 12px; line-height: 16px; text-transform: uppercase; font-weight: bold; margin-top: 6px; color: #555555; word-wrap: break-word; max-height: 48px; overflow: hidden; } #cntPage .lnkaccart:hover > .nomart { color: #6a9d2e; } #cntPage .lnkaccart > .refart { display: block; font-size: 9px; line-height: 16px; color: #555555; } #cntPage .lnkaccart > .basdiv { display: block; position: absolute; top: 220px; left: 4px; width: 140px; text-align: center; } #cntPage .lnkaccart > .basdiv .prxart { display: block; color: #d97700; font: bold 25px/1 Tahoma,Geneva,sans-serif; } /* Fiche article */ #cntPage #frmAddpan { display: block; padding: 12px 0; box-shadow: 0 0 2px rgba(0,0,0,0.1); background: #fff; border-radius: 3px; margin-bottom: 12px; } #cntPage #frmAddpan .lpromo { display: block; font-weight: bold; color: #d97700; border-radius: 4px; line-height: 1em; margin-bottom: 3px; } #cntPage #frmAddpan .prxori { font: bold 16px/1 Tahoma,Geneva,sans-serif; color: #4c4c4e; text-decoration: line-through; } #cntPage #frmAddpan .prix { font: bold 22px/1 Tahoma,Geneva,sans-serif; color: #d97700; } #cntPage #frmAddpan .cntUnit { float: left; padding: 0 12px; border-right: 1px dotted #d7d7d7; font-size: 12px; line-height: 16px; } #cntPage #frmAddpan .cntUnit .unit { display: block; } #cntPage #frmAddpan .cntUnit .prix { display: block; margin-top: -4px; } #cntPage #frmAddpan .cntUnit .prixkg { display: block; font: bold 11px/1 Tahoma,Geneva,sans-serif; color: #999; float: right; } #cntPage #frmAddpan #btnCde { display: block; float: right; color: #fff; text-align: center; font-size: 16px; font-weight: bold; line-height: 1em; border-radius: 3px; background: #d97700; box-shadow: 0 26px rgba(0, 0, 0, 0.1) inset; padding: 12px 12px; margin: 0px 12px; } #cntPage #frmAddpan #btnCde > img { width: 32px; height: 32px; } #cntPage #frmAddpan #btnCde:hover { background: #6a9d2e; } #cntPage #frmAddpan #btnDemstk { display: block; float: right; color: #fff; text-align: center; font-size: 16px; font-weight: bold; line-height: 1em; border-radius: 3px; background: #d97700; box-shadow: 0 26px rgba(0, 0, 0, 0.1) inset; padding: 10px 12px; margin: 0px 12px; line-height: 32px; } #cntPage #frmAddpan #btnDemstk > img { width: 32px; height: 32px; margin-right: 8px; } #cntPage #frmAddpan #btnDemstk:hover { background: #6a9d2e; } #cntPage #frmAddpan #cntCde { float: right; margin: 8px 20px; margin-right: 8px; line-height: 15px; text-align: center; } #cntPage #frmAddpan #cntCde #chxUnit { /* margin-left: 10px; */ } #cntPage #frmAddpan #cntCde #qteUnit { display: none; /*inline-block;*/ margin-top: 6px; white-space: nowrap; font-size: 12px; } #cntPage #frmAddpan #cntFicart { margin-top: 16px; line-height: 16px; font-size: 13px; vertical-align: middle; } #cntPage #frmAddpan #cntFicart a { color: #555555; } #cntPage #frmAddpan #cntFicart a:hover { color: #d97700; } #cntPage #cntImgart { display: block; float: left; width: 300px; height: 300px; padding: 3px 4px; margin: 0; background-color: #fff; border: 1px solid #c7c7c7; border-radius: 3px; } #cntPage #lstImgart { float: left; width: 310px; margin: 0; } #cntPage #lstImgart #cntImgart { float: none; margin-bottom: 4px; } #cntPage #lstImgart > .imgars { display: inline-block; margin-left: 4.5px; width: 74px; padding: 3px 4px; background-color: #fff; border: 1px solid #c7c7c7; border-radius: 3px; box-sizing: border-box; } #cntPage #lstImgart > .imgars:nth-child(2) { margin-left: 0; } #cntPage #lstImgart > .imgars > img { width: 100%; } #cntPage #cntDesart { display: block; float: right; width: 480px; } #cntPage #cntDesart .stitre { font-size: 11px; font-style: italic; border-bottom: 1px solid #b7b7b7; margin-bottom: 6px; } #cntPage #cntDetart tr > td:first-child { font-style: italic; width: 110px; } #cntPage #cntDetart tr > td > .icone { width: 12px; height: 12px; margin-top: 3px; } #cntPage .encombrant { padding: 6px 12px 6px 120px; height: 56px; border-right: 1px dotted #d7d7d7; line-height: 56px; background: url(/img/front/encombrant.png) no-repeat 12px center; } #cntPage .encombrant > .cntTexte { display: inline-block; font-size: 15px; font-weight: bold; color: #666; line-height: 1em; vertical-align: middle; } #cntPage .encombrant > .cntTexte > em { display: block; font-size: 11px; font-weight: normal; color: #999; } #cntPage .encombrant > .cntTexte > em.rouge { color: #d97700; } a.tagart, a.tagart:link, a.tagart:visited { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 12px; text-transform: uppercase; font-weight: bold; color: #fff; background-color: #d97700; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)); margin-bottom: 3px; } a.tagart:hover { background-color: #6a9d2e; } a.tagart > sup { display: none; } /* Liste articles en bas de fiche article */ .listeMinart > a { display: inline-block; position: relative; height: 96px; overflow: hidden; margin: 0px; } .listeMinart > a:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } .listeMinart > a > img { width: 90px; height: 90px; padding: 3px 3px; background-color: #fff; border: 1px solid #d7d7d7; } .listeMinart > a > .legende { position: absolute; top: 64px; left: 1px; width: 90px; padding: 3px 4px; background-color: rgba(255,255,255,0.7); font-size: 11px; line-height: 14px; color: #555; text-transform: uppercase; font-weight: bold; min-height: 90px; transition: top .3s ease-in-out; text-align: center; letter-spacing: -0.5px; } .listeMinart > a > .legende > .prix { position: absolute; top: 72px; left: 3px; width: 90px; text-align: center; font: bold 14px/1 Tahoma,Geneva,sans-serif; color: #d97700; } /* Slideshow accueil */ #slideProduits { position: relative; height: 314px; width: auto; } #slideProduits #cntSlide { height: 314px; width: auto; overflow: hidden; border-radius: 5px; } #slideProduits #cntSlide:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } #slideProduits #cntSlide > a { display: block; box-sizing: border-box; width: 100%; height: 314px; border: 1px solid #c7c7c7; border-radius: 5px; color: #555555; background: #fff no-repeat 6px center; background-size: auto; } #slideProduits #cntSlide > a:hover { color: #6a9d2e; } /*#slideProduits #cntSlide > a > img { position: absolute; height: 300px; width: 300px; left: 0px; top: 0px; padding: 6px; } #slideProduits #cntSlide > a > div { position: absolute; height: 300px; width: 500px; left: 310px; top: 0px; padding: 6px 0; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 100%); }*/ #slideProduits #cntSlide > a > div { height: 300px; padding: 6px; margin-left: 304px; border-radius: 5px; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 100%); } #slideProduits #cntSlide > a > div .padding { padding: 20px; } #slideProduits #cntSlide > a > div .titart { font-size: 28px; line-height: 24px; text-transform: uppercase; font-weight: bold; } #slideProduits #cntSlide > a > div .famart { font-size: 14px; line-height: 16px; padding-top: 6px; text-transform: capitalize; color: #555555; } #slideProduits #cntSlide > a > div .refart { font-size: 11px; line-height: 14px; padding-top: 10px; color: #555555; } #slideProduits #cntSlide > a > div .basdiv { position: absolute; top: 160px; right: 10px; text-align: right; } #slideProduits #cntSlide > a > div .prxart { color: #d97700; display: block; font: bold 40px/1 Tahoma,Geneva,sans-serif; margin-bottom: 15px; } #slideProduits #cntSlide > a > div .bouton { display: inline-block; background-color: #d97700; background-image: linear-gradient(to top, #505050, #606060); border-radius: 4px; color: white; box-shadow: 0 17px rgba(255, 255, 255, 0.1) inset; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); font-size: 17px; line-height: 33px; padding: 0 20px; } #slideProduits #cntSlide > a:hover > div .bouton { background-color: #6a9d2e; background-image: linear-gradient(to top, #6a9d2e, #60ad25); } #slideProduits #ctlSlide { width: auto; text-align: right; margin-top: -28px; margin-right: 16px; z-index: 10; } #slideProduits #ctlSlide > a { display: inline-block; text-align: center; border-radius: 50%; background: #dcdcdc; color: #fff; font-size: 8px; font-weight: normal; line-height: 16px; width: 16px; margin-left: 3px; transition: background .3s ease-in-out; } #slideProduits #ctlSlide > a.actif { background: #d97700; } #slideProduits #ctlSlide > a:hover { background: #6a9d2e; } /* Listes d'articles */ #cntListe { border-radius: 12px 12px 0 0; box-shadow: 0 0 6px rgba(0,0,0,0.2); } #cntListe .cntCrits { margin: 0; padding: 8px 12px; background: #fff; border-radius: 12px 12px 0 0; background-image: linear-gradient(to top left, rgba(0,0,0,0.1), rgba(0,0,0,0)); } #cntListe .cntCrits .titCrits { font-size: 10px; color: #555; margin: 0 20px 0 0; padding: 0; display: inline-block; } #cntListe .cntCrits .critCheck { display: inline-block; margin-right: 16px; padding-left: 23px; color: #555555; font-size: 12px; line-height: 14px; background-image: url(/img/front/crit-check_off.png); background-position: 5px center; background-repeat: no-repeat; } #cntListe .cntCrits .critCheck:hover { color: #d97700; } #cntListe .cntCrits .critCheck.on { background-image: url(/img/front/crit-check_on.png); } #cntListe .cntCrits #critSup > select { margin: 0 5px; } .cntNavig { padding: 6px; color: #fff; font-size: 12px; line-height: 18px; background-color: #d97700; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)); box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.11), 0 3px 3px rgba(255, 255, 255, 0.1) inset; } .cntNavig #chxaff { float: left; margin-right: 30px; } .cntNavig #chxaff .btnChxaff { float: left; width: 16px; height: 16px; padding: 2px; border-left: 1px solid #888; background-position: center center; background-repeat: no-repeat; background-color: #fff; } .cntNavig #chxaff .btnChxaff.off { background-color: #bbb; } #cntNavig #chxaff .btnChxaff:first-child { border-left: none; } .cntNavig #chxtri { float: left; margin-right: 30px; } .cntNavig #cntChxnbr { float: left; } .cntNavig .cntTotres { float: right; margin-right: 6px; margin-top: 1px; } .cntNavig .btnPage { background: #fff; color: #555555; padding: 2px 4px; line-height: 14px; font-weight: bold; min-width: 20px; } .cntNavig .btnPage.actif { color: #d97700; } .cntNavig .btnPage:hover { color: #6a9d2e; } #cntArts { background: #fff; } #cntArts .noresult { color: #a7a7a7; font-size: 30px; text-align: center; padding: 170px 0; font-weight: bold; } .art-liste { background: #fff; border-bottom: 1px dotted #d7d7d7; width: 100%; } .art-liste:hover, .art-liste:hover > a > .art-prix { background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1)); } .art-liste > a { display: table; width: 100%; } .art-liste > a > .imgart { display: table-cell; padding: 6px 8px; width: 90px; height: 90px; vertical-align: top; } .art-liste > a > .imgart > .art-image { width: 90px; height: 90px; } .art-liste > a > .art-descr { display: table-cell; padding: 6px 12px; vertical-align: top; } .art-liste > a > .art-descr > .masque { display: block; height: 82px; overflow: hidden; text-overflow: ellipsis; } .art-liste > a > .art-descr > .masque > .nomart { display: inline-block; font-weight: bold; text-transform: uppercase; font-size: 14px; } .art-liste:hover > a > .art-descr > .masque > .nomart { color: #6a9d2e; } .art-liste > a > .art-descr > .masque > .refart { display: block; float: right; color: #999; font-size: 9px; } .art-liste > a > .art-descr > .masque > .desart { color: #555555; word-wrap: break-word; } .art-liste > a > .art-descr > .masque > .icone { width: 12px; height: 12px; margin-left: 4px; margin-top: 3px; } .art-liste > a > .art-prix { display: table-cell; position: relative; width: 130px; font: bold 24px/1 Tahoma,Geneva,sans-serif; color: #d97700; padding: 6px 8px; padding-bottom: 32px; vertical-align: middle; text-align: right; background: #f4f4f4; } .art-liste > a > .art-prix > .cntapd { position: absolute; display: block; top: 8px; left: 10px; right: 10px; text-align: right; color: #888; font-size: 11px; font-weight: normal; font-style: italic; } .art-liste > a > .art-prix > .cntcde { position: absolute; display: block; top: 78px; left: 10px; right: 10px; text-align: right; color: #555; font-size: 11px; font-weight: normal; } .art-liste > a > .art-prix > .cntcde > .btnCommander { color: #d97700; cursor: pointer; display: inline-block; padding: 1px 0; padding-left: 20px; background: url(/img/front/add-panier-mini.png) no-repeat left center; } .art-liste > a > .art-prix > .cntcde > .btnCommander:hover { color: #6a9d2e; } #cntAparim { position: absolute; width: 300px; height: 300px; padding: 3px 4px; background-color: #fff; background-position: center; background-repeat: no-repeat; box-shadow: 0 0 8px rgba(0,0,0,0.5); z-index: 9; } #cntAparim > .legende { padding: 3px 5px; color: #fff; background: #000; text-transform: uppercase; font-weight: bold; } /* Pages aide / conseils */ .faqElement { padding: 20px; border-bottom: 1px solid #c7c7c7; } .faqElement:hover { background-color: #fff; background-image: linear-gradient(to top, rgba(0,0,0,0.05), rgba(255,255,255,0.03)); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .faqElement > .faqQuestion { color: #d97700; font-size: 16px; padding-left: 16px; padding-bottom: 3px; margin-bottom: 10px; border-bottom: 1px dotted #d97700; background: url(/img/front/bull-rayonh.png) no-repeat -8px -6px; } .faqElement > .faqReponse { margin-left: 12px; } /* Page frais de port */ .tabFrport { margin: 0; padding: 0; border-spacing: 0; border-collapse: collapse; } .tabFrport tr { margin: 0; padding: 0; } .tabFrport td { border: 0.5px solid #a7a7a7; background: #fff; margin: 0; padding: 5px 10px; text-align: left; vertical-align: middle; } .tabFrport td.col1 { width: 220px; } .tabFrport td.col2 { width: 220px; } .tabFrport td.titFrport { background: #c7c7c7; text-align: center; font-weight: bold; } .tabFrport td.monFrport { background: #e7e7e7; text-align: center; } #coldFrport { float: right; padding: 6px 16px; } /* Page liens */ .lienBloc { display: table; width: 100%; border-bottom: 1px solid #c7c7c7; } .lienBloc > .lienImage { display: table-cell; width: 100px; padding: 20px; vertical-align: top; } .lienBloc > .lienImage > img { width: 100px; height: 75px; } .lienBloc > .lienTexte { display: table-cell; padding: 20px; color: #555555; vertical-align: top; } .lienBloc > .lienTexte > .lienTitre { display: block; margin-bottom: 8px; color: #d97700; font-weight: bold; text-transform: uppercase; } .lienBloc:hover { background-color: #fff; background-image: linear-gradient(to top, rgba(0,0,0,0.05), rgba(255,255,255,0.03)); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .lienBloc:hover > .lienTexte > .lienTitre { color: #6a9d2e; } /* Page contact */ #cntPage #cntContact { float: left; width: 480px; } #cntPage #cntCoords { float: right; width: 320px; } #cntPage #cntCoords .padding { padding: 0 20px; font-size: 16px; } /* Erreurs */ #bigErreur { color: #f7f7f7; font-size: 300px; font-weight: bold; text-align: center; text-shadow: 0px 0px 32px rgba(0,0,0,0.17); } /* Pieds de page */ #pied_infos { background: #dddddd; padding: 10px 0; border-top: 1px dotted #a7a7a7; } #pied_infos #cntPaiement { height: 120px; padding: 0 40px; width: 320px; background: url(/img/front/pied-securise.png) no-repeat 270px bottom; } #pied_infos #cntPaiement img { width: 200px; height: auto; } #pied_infos #cntLivraison { background: url(/img/front/pied-livraison.png) no-repeat 270px bottom; height: 120px; padding: 0 40px; border-left: 1px solid #ebebeb; width: 320px; } #pied_infos #cntLivraison img { display: block; height: auto; width: 150px; margin: 0 20px; margin-top: -10px; } #pied_infos #cntContact { background: url(/img/front/pied-contact.png) no-repeat 270px bottom; height: 120px; padding: 0 40px; border-left: 1px solid #ebebeb; width: 320px; } #pied_liens { background: #888888; border-top: 6px solid #3f3f3f; padding: 0; text-align: center; background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); box-shadow: 0 0 4px #000, 1px 0 1px #000 inset; font-size: 0px; } #pied_liens a { display: inline-block; padding: 8px 24px; border-right: 1px solid #444; color: #fff; text-transform: uppercase; font-weight: 600; font-size: 16px; } #pied_liens a:first-child { border-left: 1px solid #444; } #pied_liens a:hover { color: #6a9d2e; } #pied_finp { background-color: #3f3f3f; color: #999; padding: 12px 0; text-align: center; } #pied_finp a { color: #999; } /* ============================================================================================================= GESTION DU PANIER ============================================================================================================= */ /* Ajout au panier / demande de stock */ #divFadpan { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); } #divAddpan { position: absolute; top: 50%; left: 50%; width: 600px; height: 100px; padding: 8px; margin-top: -58px; margin-left: -308px; border-radius: 5px; background-color: #d97700; color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.6); line-height: 1.1em; } #divAddpan .nomart { font-size: 18px; text-transform: uppercase; font-weight: bold; text-shadow: 2px 2px 2px rgba(0,0,0,0.3); margin-bottom: 6px; } #divAddpan #cntBtnpan { text-align: right; } #divAddpan #cntBtnpan > a { display: inline-block; width: 295px; text-align: center; padding: 6px 0; border-radius: 5px; text-transform: uppercase; } #divAddpan #cntBtnpan > a:hover { box-shadow: 0 0 5px rgba(0,0,0,0.6); } #divAddpan #cntBtnpan > #btnValpan { background: #555 url(/img/admin/tick.png) no-repeat 10px center; color: #fff; margin-right: 4px; } #divAddpan #cntBtnpan > #btnFerpan { background: #fff url(/img/admin/suppr.png) no-repeat 10px center; color: #555; } #divAddpan #demEmail { width: 580px; } #divAddpan #pwdEmail { width: 580px; } /* Validation panier */ #warning { background: #c33; color: #fff; padding: 4px 8px; margin: 0 0 8px 0; } #cntPage .etapeLien { float: left; height: 0; font-size: 0; width: 40px; border-bottom: 2px solid #d97700; margin-top: 13px; } #cntPage .etapeLien.inactive { border-bottom: 2px dotted #aaaaaa; } #cntPage .etapeCont { float: left; border: 1px solid #aaaaaa; color: #aaaaaa; text-transform: uppercase; font-size: 12px; line-height: 22px; vertical-align: middle; width: 216px; } #cntPage .etapeCont.active { border: 1px solid #d97700; color: #555; font-weight: bold; } #cntPage .etapeCont span { height: 22px; padding-bottom: 2px; padding-top: 1px; vertical-align: middle; } #cntPage .etapeCont .etapeNum { display: inline-block; width: 30px; text-align: center; font-size: 22px; font-weight: bold; color: #fff; background: #aaaaaa; margin-right: 12px; } #cntPage .etapeCont > a { display: block; color: #aaaaaa; } #cntPage .etapeCont > a:hover { color: #629526; background: #fff; } #cntPage .etapeCont > a:hover .etapeNum { background: #629526; } #cntPage .etapeCont.active > .etapeNum { background: #d97700; } #cntPage #panierVide { padding: 40px 0 420px 0; text-align: center; color: #c7c7c7; font-size: 42px; font-weight: bold; text-transform: uppercase; border-radius: 8px; background-image: url(/img/front/panier-vide.png); background-color: #fff; background-position: center center; background-repeat: no-repeat; box-shadow: 0 0 2px rgba(0,0,0,0.3); } #cntPage #panierListe { width: 100%; margin: 0; padding: 0; border: none; border-spacing: 0; border-collapse: separate; } #cntPage #panierListe th { padding: 6px; color: #fff; font-weight: bold; border-right: 1px solid #764100; border-bottom: 1px solid #764100; background-color: #d97700; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)); box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.11), 0 3px 3px rgba(255, 255, 255, 0.1) inset; } #cntPage #panierListe td { background: #fff; } #cntPage #panierListe .detart { height: 60px; padding: 4px; font-size: 11px; border: 1px solid #d7d7d7; border-top: none; } #cntPage #panierListe .detart > img { float: left; width: 60px; margin-right: 8px; } #cntPage #panierListe .detart > a { display: inline-block; margin-bottom: 3px; font-size: 15px; text-transform: uppercase; } #cntPage #panierListe .detart > a:hover { color: #486922; } #cntPage #panierListe .detart > .refart { margin-right: 12px; } #cntPage #panierListe .detart > .priart { } #cntPage #panierListe .qteart { width: 80px; padding: 0 10px; vertical-align: middle; text-align: center; border-bottom: 1px solid #d7d7d7; line-height: 1.1em; } #cntPage #panierListe .prxart { width: 126px; padding: 10px 8px; background: #f4f4f4; font: bold 20px/1 Tahoma,Geneva,sans-serif; color: #555555; text-align: right; border: 1px solid #d7d7d7; border-top: none; } #cntPage #panierListe .prxart > a { background: url(/img/front/panier-suppr.png) no-repeat left 2px; color: #919191; font-size: 9px; line-height: 1; font-weight: normal; padding-left: 15px; } #cntPage #panierListe .prxart > a:hover { text-decoration: underline; } #cntPage #panierListe .prxart.prxeur { padding: 20px 8px; } #cntPage #panierListe .panierTotcol { padding: 10px 32px; font-size: 13px; border: 1px solid #d7d7d7; border-top: none; border-right: none; } #cntPage #panierListe .panierTotcol.panierTottit { padding: 18px 32px; } #cntPage #panierListe .panierTotcol h1 { font-size: 22px; } #cntPage #panierListe .panierTottit { color: #919191; text-transform: uppercase; text-align: right; font-weight: bold; } #cntPage #panierListe #panierTotprx { color: #6a9d2e; } #cntPage #panierListe .nohlin { border-bottom: none; } #cntPage #panierListe .norlin { border-right: none; } #cntPage #panierListe #cntLivpay { margin-left: 40px; } #cntPage #panierListe #panierLibgen { background: none; border-top: 1px solid #8eb95d; padding: 10px 20px; text-align: right; font-size: 24px; font-weight: bold; color: #555; text-transform: uppercase; } #cntPage #panierListe #panierTotgen { background: none; font: bold 20px/1 Tahoma,Geneva,sans-serif; color: #6a9d2e; border-top: 1px solid #8eb95d; padding: 10px; text-align: right; } #cntPage #cntSavpan { float: left; height: 34px; padding: 16px; padding-left: 70px; border: 1px solid #d7d7d7; border-radius: 8px; line-height: 1.1em; background: #fff url(/img/front/compte-panier.png) no-repeat 10px center; } /* Compte client */ #cntPage .cntCoords { padding: 12px 16px; background: #fff; border-radius: 10px; border: 1px solid #d7d7d7; } #cntPage .cntCoords form { text-align: center; } #cntPage .cntCoords form > .inline { text-align: left; } #cntPage .cntCoords form > .inline > table { width: 600px; } #cntPage .rowliv { display: none; } /* Récapitulatif commande + code remise */ #cntPage #coordsRecap { float: right; width: 280px; font-size: 12px; } #cntPage #panierRecap { float: left; width: 520px; margin: 0; padding: 0; border: none; border-spacing: 0; border-collapse: separate; } #cntPage #panierRecap th { padding: 6px; color: #fff; font-weight: bold; border-right: 1px solid #764100; border-bottom: 1px solid #764100; background-color: #d97700; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)); box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.11), 0 3px 3px rgba(255, 255, 255, 0.1) inset; } #cntPage #panierRecap td { background: #fff; } #cntPage #panierRecap .libart { padding: 10px; text-align: left; text-transform: uppercase; border: 1px solid #d7d7d7; border-top: none; } #cntPage #panierRecap .libart > em { color: #a7a7a7; text-transform: none; font-size: 11px; } #cntPage #panierRecap .qteart { width: 60px; padding: 10px; text-align: center; border-bottom: 1px solid #d7d7d7; } #cntPage #panierRecap .prxart { width: 126px; padding: 2px 8px; background: #f4f4f4; font: bold 20px/1 Tahoma,Geneva,sans-serif; color: #555555; text-align: right; border: 1px solid #d7d7d7; border-top: none; } #cntPage #panierRecap .msgrem { padding: 10px; font-size: 12px; text-transform: none; text-align: left; font-weight: normal; } #cntPage #panierRecap #cntAffcba { margin: 0 0 6px 0; padding: 6px 8px; background: #f7f7f7; } #cntPage #panierRecap #codrem { text-transform: uppercase; } #cntPage #panierRecap #panierTotrem { vertical-align: bottom; padding-bottom: 4px; } #cntPage #panierRecap .libtot { padding: 10px; text-align: right; font-weight: bold; text-transform: uppercase; border: 1px solid #d7d7d7; border-right: none; font-size: 14px; } #cntPage #panierRecap .libtot > em { color: #a7a7a7; font-weight: normal; text-transform: none; font-size: 11px; } #cntPage #panierRecap .prxtot { width: 126px; padding: 4px 8px; background: #f4f4f4; font: bold 20px/1 Tahoma,Geneva,sans-serif; color: #555555; text-align: right; border: 1px solid #d7d7d7; } #cntPage #panierRecap .prxtot .rouge { color: #6a9d2e; } #cntPage #panierRecap .prxtot .vert { color: #629526; } #cntPage #panierRecap #libgen { background: none; border-top: 1px solid #8eb95d; padding: 10px 20px; text-align: right; font-size: 24px; font-weight: bold; color: #555; text-transform: uppercase; } #cntPage #panierRecap #totgen { background: none; font: bold 20px/1 Tahoma,Geneva,sans-serif; color: #6a9d2e; border-top: 1px solid #8eb95d; padding: 10px; text-align: right; } #cntPage #panierModreg { float: left; width: 520px; } #cntPage #panierModreg > .padding { padding: 10px; } #cntPage #panierModreg .cntModreg { padding: 6px 10px; font-size: 14px; margin-bottom: 8px; border-radius: 15px 0 0 15px; vertical-align: middle; height: 50px; line-height: 50px; background: #fff; background: linear-gradient(to right, #fff, #fff 50%, rgba(255,255,255,0)); box-shadow: -2px 0 2px rgba(0,0,0,0.2); } #cntPage #panierModreg .cntModreg.actif { background-color: #6a9d2e; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)); color: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.2); border-radius: 15px; } #cntPage #panierModreg .cntModreg input { display: inline-block; margin: 10px; vertical-align: middle; } #cntPage #panierModreg .cntModreg img { display: inline-block; width: 100px; height: 50px; } #cntPage #panierModreg .cntModreg .libModreg { display: inline-block; margin: 0 10px; line-height: 1; font-size: 18px; vertical-align: middle; } #cntPage #panierModreg .cntModreg .libModreg > span { font-size: 11px; color: #d97700; } #cntPage #panierModreg #chkcgv { margin-left: 20px; } /* ============================================================================================================= GESTION ESPACE CLIENT ============================================================================================================= */ #cntPage .btnCompte { display: block; padding: 6px 20px; font-size: 18px; color: #555; margin-bottom: 8px; border-radius: 15px 0 0 15px; vertical-align: middle; height: 50px; line-height: 50px; background: #fff; background: linear-gradient(to right, #fff, #fff 50%, rgba(255,255,255,0)); box-shadow: -2px 0 2px rgba(0,0,0,0.2); } #cntPage .btnCompte:hover { background-color: #6a9d2e; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)); color: #fff; box-shadow: 0 0 4px rgba(0,0,0,0.2); border-radius: 15px; } #cntPage .btnCompte img { float: left; height: 48px; width: 48px; margin-right: 20px; } #btnRespsa, #btnSavpsa { margin-left: 16px; } .seladr { float: left; display: block; background: #e7e7e7; border: 1px solid #d7d7d7; color: #333; font-size: 10px; margin: 1px; border-radius: 2px; width: 194px; height: 106px; } .seladr:nth-child(3n+1) { clear: both; } .seladr > input[type=radio] { display: block; float: left; margin-left: 4px; margin-top: 4px; width: 16px; } .seladr > .txtadr { display: block; float: left; padding: 4px 4px; width: 140px; height: 96px; overflow: hidden; } .seladr > .btnSupadr { display: block; float: right; padding: 4px 3px 4px 0px; width: 16px; } /* Compte client : visu des commandes */ #cntPage .cptCommande { display: table; background: #fff; margin-bottom: 2px; border: 1px solid #d7d7d7; width: 100%; } #cntPage .cptCommande .outils { display: table-cell; width: 100px; background: #e7e7e7; padding: 2px 10px; text-align: left; vertical-align: middle; } #cntPage .cptCommande .outils > a { display: inline-block; margin-right: 4px; margin-top: 4px; } #cntPage .cptCommande .datcde { display: table-cell; width: 64px; padding: 5px 10px; font-size: 12px; font-style: italic; color: #888; vertical-align: middle; } #cntPage .cptCommande .libcde { display: table-cell; padding: 4px 10px; font-size: 14px; color: #333; vertical-align: middle; } #cntPage .cptCommande .libcde .btnAffcde { display: inline-block; font-size: 12px; color: #333; background: url(/img/front/invoice.png) no-repeat left center; padding-left: 20px; margin-right: 10px; } #cntPage .cptCommande .libcde .btnAffcde:hover { color: #d97700; } #cntPage .cptCommande .moncde { display: table-cell; width: 100px; background: #f7f7f7; font: bold 14px/1 Tahoma,Geneva,sans-serif; color: #d97700; padding: 1px 10px; text-align: right; vertical-align: middle; } #chxModreg { position: absolute; background: #fff; color: #000; padding: 6px 8px; border: 1px solid #e7e7e7; border-radius: 5px; } #chxModreg a { color: #555; } #chxModreg a:hover { color: #888; } #btnSavdoc { margin: 0 20px; } #cntPiece { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #4d4d4f; background-color: #555555; margin: 0; text-align: center; overflow: auto; box-shadow: 0 0 8px rgba(0,0,0,0.3) inset; } #cntPiece #divPiece { display: block; width: 700px; background-color: #FFFFFF; padding: 20px; margin: 20px 0; left: 50%; margin-left: -370px; box-shadow: 0 0 8px rgba(0,0,0,0.3); } #cntPiece #divPiece a { font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; color: #d97700; } #cntPiece #divPiece a:hover { font-family: arial; font-size: 11px; text-decoration: none; color: #344249; } #cntPiece #divPiece h1, #cntPiece #divPiece h2, #cntPiece #divPiece h3, #cntPiece #divPiece h4, #cntPiece #divPiece h5 { font-family: Arial, Helvetica, sans-serif; margin:0; } #cntPiece #divPiece table { border-spacing: 0; margin: 0; padding: 0; border-collapse: collapse; } #cntPiece #divPiece th { font-weight: normal; vertical-align: middle; margin: 0; padding: 2px 4px; text-align: center; } #cntPiece #divPiece td { font-weight: normal; vertical-align: top; margin: 0; padding: 2px 4px; text-align: left; } #cntPiece #divPiece h3 { font-size: 14px; color: #d97700; } #cntPiece #divPiece h5 { font-size: 14px; color: #d97700; } #cntPiece #divPiece h5 a { font-size: 14px; color: #d97700; } #cntPiece #divPiece h5 a:hover { font-size: 14px; color: #344249; } #cntPiece #divPiece .aright, #cntPiece #divPiece .montant { text-align: right; } #cntPiece #divPiece .fiche_titre h1 { font-size: 20px; font-weight: bold; color: #4d4d4f; text-align: center; margin-top: 20px; padding: 4px 0 3px 0; border: 1px #cccccc solid; border-right: 3px #cccccc solid; border-bottom: 3px #cccccc solid; } #cntPiece #divPiece .fiche_titre h2 { font-size: 14px; font-weight: bold; color: #4d4d4f; text-align: center; margin-bottom: 0px; border-bottom: 1px solid #cccccc; padding: 2px 0 3px 0; } #cntPiece #divPiece .fiche_liste td { border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } #cntPiece #divPiece .fiche_liste td.gauche { border-left: 1px solid #cccccc; } #cntPiece #divPiece table.titre_liste { border-right: 1px solid #cccccc; } #cntPiece #divPiece table.titre_liste th { font-size: 12px; font-weight: bold; color: #4d4d4f; border: 1px solid #cccccc; border-right: none; } #cntPiece #divPiece table.total_liste td.tva { border-bottom:1px solid #CCCCCC; border-left:1px solid #CCCCCC; } #cntPiece #divPiece table.total_liste th { color: #4d4d4f; border: 1px solid #cccccc; border-top: none; } #cntPiece #divPiece table.total_liste th strong { font-size: 12px; color: #000; } #cntPiece #divPiece .contour { vertical-align: top; border: 1px solid #cccccc; font-size: 12px; line-height: 16px; } #cntPiece #divPiece .adresse { padding: 5px 20px 5px 20px; font-size: 14px; line-height: 18px; } #cntPiece #divPiece .adresse td { font-size: 10px; line-height: 14px; } #cntPiece #divPiece .dateRef { padding-left: 50px; } #cntPiece #divPiece .logo_etat { float: left; margin-right: 12px; } #cntPiece #divPiece .commentaire_fiche { border: 1px solid #cccccc; } #cntPiece #divPiece .commentaire_fiche h2 { font-size: 14px; font-weight: bold; color: #4d4d4f; margin-bottom: 5px; } #cntPiece #divPiece .mentions { font-size: 8px; color: #999999; text-align: center; } #cntPiece #divPiece table.tabletva { border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; position: absolute; margin-left: -5px; } #cntPiece #divPiece table.tabletva td { border-right: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; } /* Popup */ #cnt-popup { position: fixed; top: 50%; left: 50%; margin-left: -320px; width: 640px; height: auto; max-width: 100%; background: #fff; color: #333; z-index: 99999; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); transition: all 0.5s ease-in-out; box-shadow: 0 0 8px #000; } #cnt-popup > img { border: 0; margin: 0; padding: 0; width: 100%; height: auto; display: block; } #cnt-popup #txt-popup { border: 0; margin: 0; padding: 20px; width: auto; height: auto; overflow: hidden; transition: all 0.5s ease-in-out; font-size: 20px !important; } #cnt-popup #txt-popup h3, #cnt-popup #txt-popup h5 { font-size: 24px; line-height: 26px; } #cnt-popup #btn-close { position: absolute; top: 6px; right: 6px; height: 16px; width: 16px; cursor: pointer; } /* ======================================================= Media queries ======================================================= */ #irmax { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: block; } #ir1340 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; } #ir1120 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; } #ir900 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; } #ir600 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; } #ir400 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; } #ir320 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; } /* ------------------------------------------------ */ /* Format PC/tablettes < 1340px */ @media handheld, only screen and (max-width: 1340px), only screen and (max-device-width: 1340px) { #irmax { display: none; } #ir1340 { display: block; } .contenu { width: 1080px; margin-left: -540px; } #at4-share { display: none !important; } .at4-show { display: none !important; } #entete #cntClient { margin-left: 40px; } #entete #titsit { left: 60px; font-size: 88px; } #slideProduits { width: 760px; } #slideProduits #cntSlide { width: 760px; } /*#slideProduits #cntSlide > a { width: 742px; } #slideProduits #ctlSlide { width: 742px; }*/ #cntRayons { width: 280px; } #cntRayons .cntArthaz > h4 > a { font-size: 28px; } #cntPage { width: 760px; } #cntPage .lnkaccart { width: 166px; } /* #cntPage .lnkaccart:nth-child(9), #cntPage .lnkaccart:nth-child(10) { display: none; } */ #cntPage .lnkaccart > .basdiv { width: 166px; } #cntPage #cntImgart { width: 240px; height: auto; } #cntPage #cntImgart > img { width: 100%; } #cntPage #lstImgart { width: 250px; } #cntPage #lstImgart > .imgars { width: 59px; } .listeMinart { height: 96px; overflow: hidden; } .listeMinart > a { margin: 2px 3px; } #cntPage #cntContact { width: 420px; } #cntTitre > #txtTitre > h1 { margin-bottom: 6px; } .art-vignette { margin: 1px; } .art-vignette:hover { z-index: 2; } #cntPage .cntCrits .titCrits { margin: 0 10px 0 0; } #cntPage .cntCrits .critCheck { margin-right: 10px; } #cntPage .etapeLien { width: 30px; } #cntPage .etapeCont { font-size: 12px; width: 210px; } #cntPage #coordsRecap { width: 240px; } #cntPage #panierRecap { width: 500px; } #cntPage #panierModreg { width: 500px; } #cntPage .cptCommande .libcde .btnAffcde { display: block; } #pied_infos h2.pied { font-size: 18px; } #pied_infos #cntPaiement { padding: 0 10px; background-position: 220px bottom; } #pied_infos #cntLivraison { padding: 0 10px; padding-left: 20px; background-position: 240px bottom; } #pied_infos #cntContact { padding-left: 20px; background-position: 240px bottom; } #pied_liens a { font-size: 13px; } } /* ------------------------------------------------ */ /* Format PC/tablettes < 1120px */ @media handheld, only screen and (max-width: 1120px), only screen and (max-device-width: 1120px) { #ir1340 { display: none; } #ir1120 { display: block; } .contenu { width: 100%; left: auto; margin-left: 0px; } .contenu > .padding { padding: 0 10px; } pre { margin: 0; padding: 0; width: auto; white-space: pre-wrap; } h1 { font-size: 36px; } h4 { font-size: 18px; } #cntPage .cntCoords form > .inline > table { width: 100%; } form table td { font-size: 11px; } form table input, form table select { max-width: 220px; } form table textarea { max-width: 98%; } #btnSendid { display: block; margin-top: 6px; } #entete #titsit { left: 60px; font-size: 88px; } #entete #cntClient { left: auto; margin-left: 0px; right: 10px; width: 400px; } #entete #cntClient #compte, #entete #cntClient #panier { min-width: auto; padding: 0 15px; padding-left: 56px; background-position: 12px center; } #entete #cntClient #compte a > strong, #entete #cntClient #panier a > strong { font-size: 16px; } #entete #cntRech { right: 10px; } #entete #cntRech #recherche { width: 200px; } #entete #cntRech #chxPortee { width: 160px; } #entete #cntRech #chxPortee #portee { width: 180px; background: url(/img/front/pop-down.png) no-repeat 140px center; } #entete #menu a { font-size: 22px; } #cntColsrp { display: table; width: 100%; box-sizing: border-box; } #cntColsrp #cntRayons { display: table-cell; float: none; vertical-align: top; } #cntColsrp #cntPage { display: table-cell; float: none; width: auto; padding-left: 24px; vertical-align: top; } #pied_infos #cntPaiement { background-position: right bottom; } #pied_infos #cntLivraison { background-position: right bottom; } #pied_infos #cntContact { background-position: right bottom; } #pied_liens { height: auto; } #pied_liens a:nth-of-type(8n+8) { border: none; } .newline:nth-of-type(n+2) { display: block; font-size: 0px; height: 0px; } #slideProduits { width: 100%; } #slideProduits #cntSlide { width: 100%; } #slideProduits #cntSlide > a { } #slideProduits #cntSlide > a > div .titart { font-size: 16px; line-height: 18px; } #slideProduits #cntSlide > a > div .basdiv .prxart { font: bold 22px/1 Tahoma,Geneva,sans-serif; } #slideProduits #cntSlide > a > div .basdiv .bouton { font-size: 14px; } #slideProduits #ctlSlide { width: 97%; margin-top: -38px; } #cntPage #cntAccart { text-align: center; line-height: normal; vertical-align: top; display: block; position: relative; } #cntPage .lnkaccart { display: inline-block; float: none; margin: 2px; width: 140px; line-height: normal; position: relative; overflow: hidden; } #cntPage .lnkaccart > .basdiv { width: 100%; } /* #cntPage .lnkaccart:nth-child(2n) { display: none; }*/ #cntListe .cntCrits #critSup { display: block; text-align: right; margin-top: 6px; } .art-liste > a > .art-prix { font: bold 15px/1 Tahoma,Geneva,sans-serif; width: 82px; } .art-liste > a > .art-prix > .cntcde { top: 70px; } .art-liste > a > .art-descr > .masque > .nomart { font-size: 13px; } .art-liste > a > .art-descr > .masque > .desart { font-size: 12px; line-height: 14px; } .art-liste > a > .art-descr > .masque > .refart { display: none; } #cntPage #frmAddpan { width: auto; } #cntPage #cntArticle { display: table; } #cntPage #cntImgart { display: table-cell; width: 30%; height: auto; } #cntPage #cntImgart > img { width: 100%; } #cntPage #lstImgart { display: table-cell; width: 30%; } #cntPage #lstImgart #cntImgart { display: block; width: 100%; box-sizing: border-box; } #cntPage #lstImgart > .imgars { width: 23%; margin-left: 2%; } #cntPage #cntDesart { display: table-cell; width: 65%; } .listeMinart > a { margin: 0; } #cntPage #cntContact { float: none; width: auto; margin-bottom: 12px; } #cntPage #cntCoords { float: none; width: auto; } #cntPage #cntCoords .padding { max-width: 260px; } #btnRespsa, #btnSavpsa { display: block; margin-top: 6px; margin-left: 0; } #divAddpan { left: 50%; top: 50%; max-width: 92%; margin: 0; height: auto; transform: translate(-50%, -50%); } #divAddpan .nomart { font-size: 13px; } #divAddpan #cntBtnpan > a { width: auto; font-size: 11px; padding: 6px; padding-left: 32px; } #divAddpan #demEmail { max-width: 92%; } #divAddpan #pwdEmail { max-width: 92%; } .seladr:nth-child(3n+1) { clear: none; } #cntPiece #divPiece { left: auto; margin: 20px; } #cntPage .etapeLien { display: none; } #cntPage .etapeCont { font-size: 12px; float: none; width: auto; } #cntPage #panierListe .detart > img { display: none; } #cntPage #panierListe .prxart { font: bold 12px/1 Tahoma,Geneva,sans-serif; width: 70px; } #cntPage #panierListe .qteart { padding: 0 4px; padding-top: 12px; } #cntPage #panierListe #livpay { width: 80px; } #cntPage #panierListe .panierTotcol { padding: 6px 12px; } #cntPage #panierListe .panierTotcol.panierTottit { padding: 10px 12px; } #cntPage #panierListe #cntLibser { background: none; padding-right: 0; } #cntPage #panierListe #panierLibgen { font-size: 14px; } #cntPage #panierListe #panierTotgen { font: bold 12px/1 Tahoma,Geneva,sans-serif; } #cntPage #cntSavpan { display: none; } #cntPage #coordsRecap { float: none; width: auto; } #cntPage #panierRecap { float: none; width: 100%; } #cntPage #panierRecap #cntCodrem { display: block; margin-top: 4px; } #cntPage #panierRecap #codrem { width: 100px; } #cntPage #panierRecap .libtot { font-size: 11px; } #cntPage #panierRecap .qteart { width: 40px; } #cntPage #panierRecap .prxart { font: bold 12px/1 Tahoma,Geneva,sans-serif; width: 70px; padding: 6px 8px; } #cntPage #panierRecap .prxtot { font: bold 12px/1 Tahoma,Geneva,sans-serif; width: 70px; } #cntPage #panierRecap #totgen { font: bold 12px/1 Tahoma,Geneva,sans-serif; width: 70px; } #cntPage #panierRecap #libgen { font-size: 14px; } #cntPage #panierModreg { float: none; width: auto; } #coldFrport { display: none; } #pied_infos #cntPaiement img { width: 160px; } #pied_infos #cntLivraison img { width: 160px; } #pied_infos #cntLivraison { font-size: 13px; } #pied_infos #cntContact { font-size: 13px; } } /* ------------------------------------------------ */ /* Format < 900px */ @media handheld, only screen and (max-width: 900px), only screen and (max-device-width: 900px) { #ir1120 { display: none; } #ir900 { display: block; } #entete { height: 162px; } #entete #titsit { left: 20px; font-size: 64px; line-height: 64px; top: 6px; } #entete #cntClient { width: 172px; } #entete #cntClient #compte { float: none; position: absolute; left: 0px; width: 0px; height: 40px; padding-right: 0px; } #entete #cntClient #compte a { display: none; } #entete #cntClient #panier { float: none; position: absolute; left: 58px; width: 0px; height: 40px; padding-right: 0px; } #entete #cntClient #panier a { display: none; } #entete #cntClient #chxlangue { display: inline-block; padding-right: 20px; } #entete #menu { height: 37px; } #entete #menu > .contenu > .padding { display: table; width: 100%; padding: 0; } #entete #menu a { display: table-cell; float: none; padding: 0px 4px; text-align: center; font-size: 18px; margin-top: 0px; border-radius: 0; } #entete #menu a.actif { display: table-cell; float: none; padding: 0px 4px 1px 0px; text-align: center; font-size: 18px; margin-top: 0px; border-radius: 0; } #cntColsrp { display: block; } #cntColsrp #cntRayons { display: none; } #cntColsrp #cntPage { display: block; float: none; width: auto; padding-left: 0px; } #cntRaysel { display: block; margin-bottom: 15px; } #divRaysel { overflow: hidden; } #divRaysel > select { width: 100%; font-size: 18px; } #divRaysel { height: 32px; overflow: hidden; border-radius: 4px; margin-bottom: 28px; background-color: #999; box-shadow: 0 3px 3px rgba(255, 255, 255, 0.1) inset; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0)); } #divRaysel > select { width: 100%; color: #fff; background-color: #999; border: none; padding: 6px 4px; text-align: center; color: #fff; font-weight: bold; font-size: 14px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: url(/img/front/pop-down-padr.png) no-repeat right center; } #divRaysel > select option { background: #999; color: #fff; text-align: left; } #cntFrlmob { display: block; } #cntPage #cntAccart { height: 560px; overflow: hidden; } #cntPage #panierListe .detart > .refart { display: block; } #cntPage #panierListe .detart > .priart { display: block; } #cntPage #panierModreg .cntModreg .libModreg { font-size: 13px; } #pied_infos .contenu > .padding { padding: 0; } #pied_infos #cntPaiement { background: none; padding: 0 10px; width: 30%; } #pied_infos #cntLivraison { background: none; padding: 0 10px; width: 30%; } #pied_infos #cntContact { background: none; padding: 0 10px; width: 30%; } #pied_liens a { font-size: 12px; padding: 6px 14px; } #pied_finp { font-size: 11px; } #cnt-popup { left: 20px; margin-left: 0px; width: auto; right: 20px; } #cnt-popup #txt-popup { font-size: 16px !important; } #cnt-popup #txt-popup h3, #cnt-popup #txt-popup h5 { font-size: 20px; } } /* ------------------------------------------------ */ /* Format mobiles < 600px */ @media handheld, only screen and (max-width: 600px), only screen and (max-device-width: 600px) { #ir900 { display: none; } #ir600 { display: block; } body { font-size: 13px; } h1 { font-size: 24px; line-height: 1.2em; } h4 { font-size: 16px; } h6 { font-size: 18px; line-height: 22px; } #entete #titsit { font-size: 42px; line-height: 42px; top: 14px; } #entete #cntClient { width: 138px; } #entete #cntClient #compte { border-right: none; padding: 0 10px 0 40px; background-position: center; } #entete #cntClient #panier { border-right: none; padding: 0 0 0 40px; background-position: left center; left: 50px; margin: 0; } #entete #cntClient #chxlangue { padding-right: 12px; } #entete #cntRech { left: 10px; right: 10px; top: 75px; } #entete #cntRech #frmRech { display: table; table-layout: fixed; width: 100%; } #entete #cntRech #frmRech > div { display: table-cell; float: none; } #entete #cntRech #frmRech > div.clear { display: none; } #entete #cntRech #frmRech > div:nth-child(1) { width: 160px; } #entete #cntRech #frmRech > div:nth-child(2) { width: auto; } #entete #cntRech #frmRech > div:nth-child(3) { width: 32px; } #entete #cntRech #chxPortee #portee { font-size: 10px; } #entete #cntRech #recherche { width: 100%; height: 30px; font-size: 10px; } #entete #menu a, #entete #menu a.actif { font-size: 12px; } #slideProduits { height: 192px; } #slideProduits #cntSlide { height: 192px; } #slideProduits #cntSlide > a { height: 192px; background-size: 150px; } #slideProduits #cntSlide > a > div { height: 150px; margin-left: 154px; } #slideProduits #cntSlide > a > div > .padding { padding: 6px 10px; } #slideProduits #cntSlide > a > div .titart { font-size: 14px; } #slideProduits #cntSlide > a > div .famart { font-size: 13px; padding-top: 2px; } #slideProduits #cntSlide > a > div .refart { font-size: 10px; padding-top: 4px; } #slideProduits #cntSlide > a > div .basdiv { top: 106px; line-height: 33px; vertical-align: middle; } #slideProduits #cntSlide > a > div .basdiv > .prxart { display: inline-block; margin: 0; margin-bottom: 6px; vertical-align: middle; font: bold 18px/1 Tahoma,Geneva,sans-serif; } #slideProduits #cntSlide > a > div .basdiv > .bouton { display: inline-block; margin-left: 12px; padding: 0 10px; vertical-align: middle; } #slideProduits #ctlSlide { margin-top: -32px; } .faqElement { padding: 12px; } .faqElement > .faqReponse { margin-left: 4px; } .newline { display: block; font-size: 0px; height: 0px; } .tabFrport { font-size: 11px; } #divAddpan #cntBtnpan > #btnValpan { margin: 0; } #divAddpan #cntBtnpan > a { display: block; margin-top: 6px; } .cntNavig #chxtri { margin-bottom: 6px; } .cntNavig .cntTotres { clear: both; } #cntPage .cntCrits .titCrits { display: block; margin: 0 0 6px 0; } #cntPage #frmAddpan .cntUnit { font-size: 10px; padding: 0 8px; } #cntPage #frmAddpan .prix { font: bold 13px/1 Tahoma,Geneva,sans-serif; } #cntPage #frmAddpan .cntUnit .prixkg { font: bold 10px/1 Tahoma,Geneva,sans-serif; } #cntPage #frmAddpan #cntCde { margin: 4px; } #cntPage #frmAddpan #btnCde { padding: 8px; margin: 0 8px; } #cntPage .encombrant { background: none; padding: 0 12px 0 12px; } #cntPage .btnCompte { font-size: 13px; padding: 6px 8px; } #cntPage .btnCompte img { margin-right: 12px; } #cntPage .cptCommande .outils { width: 42px; } #cntPage .cptCommande .datcde { font-size: 10px; width: 46px; } #cntPage .cptCommande .libcde .btnAffcde { font-size: 11px; } #cntPage .cptCommande .moncde { font: bold 12px/1 Tahoma,Geneva,sans-serif; width: 70px; } #btnSavdoc { display: block; margin: 6px 0; } #cntPage #panierVide { font-size: 28px; } #cntPage #panierListe #cntLivpay { display: block; margin-left: 20px; margin-top: 8px; } #cntPage #panierModreg .cntModreg img { display: none; } #pied_infos #cntPaiement { display: block; width: auto; height: auto; padding-bottom: 10px; border-bottom: 1px solid #fff; text-align: center; } #pied_infos #cntLivraison { display: block; width: auto; height: auto; padding: 10px; border-bottom: 1px solid #fff; text-align: center; } #pied_infos #cntLivraison img { display: inline-block; } #pied_infos #cntContact { display: block; width: auto; height: auto; padding: 10px; text-align: center; } #pied_liens a { font-size: 10px; padding: 4px; } #pied_finp .spacer { display: block; visibility: hidden; height: 0px; } } /* ------------------------------------------------ */ /* Format mobiles < 400px */ @media handheld, only screen and (max-width: 400px), only screen and (max-device-width: 400px) { #ir600 { display: none; } #ir400 { display: block; } body { font-size: 12px; } img { max-width: 100%; } ul, ol { padding-left: 20px; } .contenu > .padding { padding: 0 6px; } a.btnStyle { font-size: 13px; height: 30px; line-height: 30px; } #cntPage .encombrant { font-size: 13px; width: 180px; background: none; } form table input, form table select { max-width: 160px; } #entete #titsit { font-size: 34px; line-height: 30px; top: 6px; left: 16px; width: 128px; } #entete #menu a, #entete #menu a.actif { font-size: 9px; } #menu a { font-size: 11px; height: 28px; line-height: 28px; padding-top: 4px; } #entete #lnkentacc { display: none; } #slideProduits #cntSlide > a { background-size: 60px 60px; background-position: 6px 6px; } #slideProduits #cntSlide > a > div { margin-left: 60px; background: none; } #cntPage #cntAccart { height: 840px; } #cntPage .lnkaccart { display: block; float: none; width: auto; margin: 0px; margin-bottom: 6px; } #cntPage .cntCrits .critCheck { display: block; width: auto; } .cntNavig .cntTotres .nbrTotres { display: none; } #cntPage .cntCrits .critCheck { width: 120px; } .art-liste > a > .imgart { display: none; } .art-liste > a > .art-descr > .masque { height: 76px; } .art-liste > a > .art-prix > .cntcde { top: 60px; } #cntPage #cntArticle { display: block; } #cntPage #cntImgart { display: block; width: 100%; box-sizing: border-box; margin-bottom: 12px; } #cntPage #lstImgart { display: block; width: auto; margin-bottom: 12px; } #cntPage #lstImgart #cntImgart { margin-bottom: 4px; } #cntPage #lstImgart > .imgars { width: 23%; margin-left: 2%; } #cntPage #cntDesart { display: block; width: auto; float: none; } a.tagart, a.tagart:link, a.tagart:visited { font-size: 10px; } #cntPage #frmAddpan { padding: 10px; font-size: 11px; } #cntPage #frmAddpan .btnStyle { padding-right: 10px; margin-right: -10px; } .sepLowres { display: block; clear: both; border-bottom: 1px dotted #d7d7d7; padding-top: 10px; margin-bottom: 10px; } #cntPage #panierVide { font-size: 22px; background-size: contain; } #cntPage #panierModreg > .padding { padding: 10px 0; } #cntPage #panierModreg .cntModreg .libModreg { font-size: 12px; margin: 0; } #cntPage #panierModreg #chkcgv { margin-left: 0px; } #cntPage .cptCommande { display: block; } #cntPage .cptCommande .outils { display: block; width: auto; } #cntPage .cptCommande .datcde { display: block; width: auto; border-bottom: 1px dotted #ddd; } #cntPage .cptCommande .libcde { display: block; width: auto; } #cntPage .cptCommande .moncde { display: block; width: auto; padding: 6px 10px; border-top: 1px dotted #ddd; } #pied_liens { border-top: 1px solid #3f3f3f; } #pied_liens .contenu > .padding { padding: 0; } #pied_liens a { display: block; font-size: 11px; padding: 4px; border: none; border-top: 1px solid #3f3f3f; text-align: center; } #pied_liens a:first-child { border-top: none; } } /* ------------------------------------------------ */ /* Format mobiles < 320px */ @media handheld, only screen and (max-width: 320px), only screen and (max-device-width: 320px) { #ir400 { display: none; } #ir320 { display: block; } .art-liste > a > .art-descr > .masque > .desart { display: none; } #cntPage #panierListe .detart > .refart { display: none; } #cntPage #panierListe .detart > .priart { display: none; } } /* ======================================================= Animations CSS3 ======================================================= */ /* Animation slide */ .slideElt { position: absolute; left: 0px; top: 0px; -o-transform: translateX(0deg) rotateY(0deg) scale(1); -o-transform-style: preserve-3d; -o-backface-visibility: hidden; -ms-transform: translateX(0deg) rotateY(0deg) scale(1); -ms-transform-style: preserve-3d; -ms-backface-visibility: hidden; -webkit-transform: translateX(0deg) rotateY(0deg) scale(1); -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-transform: translateX(0deg) rotateY(0deg) scale(1); -moz-transform-style: preserve-3d; -moz-backface-visibility: hidden; transform: translateX(0deg) rotateY(0deg) scale(1); transform-style: preserve-3d; backface-visibility: hidden; -o-transition: transform .8s ease-in-out, opacity .8s ease-in-out; -ms-transition: transform .8s ease-in-out, opacity .8s ease-in-out; -moz-transition: transform .8s ease-in-out, opacity .8s ease-in-out; -webkit-transition: transform .8s ease-in-out, opacity .8s ease-in-out; transition: transform .8s ease-in-out, opacity .8s ease-in-out; } .slideElt.inactive { z-index: 2; opacity: 0; -webkit-transform: translateX(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -moz-transform: translateX(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -o-transform: translateX(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); transform: translateX(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -o-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } .slideElt.desactive { z-index: 2; opacity: 0; -webkit-transform: translateX(-1000px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -moz-transform: translateX(-1000px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -o-transform: translateX(-1000px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); transform: translateX(-1000px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); } .slideElt.active { z-index: 10; opacity: 1; -webkit-transform: translateX(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -moz-transform: translateX(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); -o-transform: translateX(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); transform: translateX(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); }