/* Elements de base */
html { width: 100%; height: 100%; }
body { margin: 0px; padding: 0px; font-family: sans-serif; font-size: 16px; line-height: 1.3em; color: #4c4c4e; height: 100%; width: 100%; box-sizing: border-box; background: #fff; }
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: 8px; height: auto; }
ul, ol { margin: 12px 0px; padding: 0; padding-left: 24px; }
li { margin-top: 0px; margin-bottom: 0px; list-style-image: url(/img/front/bull-li.png); line-height: 1.3em; }
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; font-optical-sizing: auto; }
iframe { max-width: 100%; }
/* Liens et classes associées */
a, a:link, a:visited { text-decoration: none; color: #5f7275; transition: all .3s ease-in-out; }
a:hover { text-decoration: none; }
a.actif { font-weight: bold; }
li a { text-decoration: none; color: #313b48; }
.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: #fd925e; } .btnbg.gris { background-color: #828282; } .btnbg:hover { background-color: #313b48; }
.btnbg > .btncnt { height: 39px; padding: 3px 12px; color: #fff; font-family: sans-serif; 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: #fd925e; 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: sans-serif; font-size: 36px; line-height: 38px; font-weight: 900; color: #3f3f3f; margin: 5px 0 0 0; padding: 5px 0 0 0; }
h1.souligne { border-bottom: 1px dotted #3f3f3f; }
h2 { font-size: 26px; line-height: 28px; font-weight: 700; color: #333; margin: 0 0 20px 0; padding: 0px; }
h2 > a, h2 > a:link, h2 > a:visited { color: #333; } h2 > a:hover { color: #fd925e; text-decoration: none; }
h2.souligne { border-bottom: 1px dotted #3f3f3f; padding: 0 0 10px 0; margin: 0 0 6px 0; }
h2.surligne { border-top: solid 1px #eee; padding-top: 16px; margin-top: 8px; }
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: #fd925e; text-decoration: none; }
h3 { color: #313b48; font-size: 16px; padding: 0; margin: 5px 0; line-height: normal; word-break: break-word; }
h4 { background-color: #313b48; /* 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: sans-serif; font-size: 26px; line-height: 30px; font-weight: normal; color: #333; margin: 0px; margin-bottom: 5px; padding: 0px;
border-bottom: 1px dotted #888; }
/* Classes de style */
.nodisp { display: none; }
.clear { display: block; clear: both; }
body .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; }
.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: 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)); }
.txtref { border-top: solid 1px #eee; margin-top: 20px; padding-top: 20px; }
.txtref p { color: #606060; }
.txtref h2 { color: #606060; }
.moocboqte { text-align: right; width: 24px; }
.labelCheck.inactive { color: #a7a7a7; }
input.montant, input.entier { text-align: right; }
.btnCommander { cursor: pointer; }
.sepLowres { display: none; }
.br900 { display: none; }
div.mooTooltip { background-color: #111 !important; font-size: 12px; line-height: 16px; }
div.mooTooltip p:last-child { margin-bottom: 0; }
a.btnRouge { background: #313b48; color: #fff; font-weight: bold; padding: 3px 5px; border-radius: 3px; vertical-align: middle; line-height: 15px; display: inline-block; }
a.btnStyle { background-color: #313b48; box-shadow: 0 17px rgba(0, 0, 0, 0.1) inset; color: white; display: inline-block; padding: 0 20px; font-size: 15px; font-weight: bold;
line-height: 33px; height: 33px; border-radius: 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: -14px 0px 0 -8px; transition: all .2s ease-in-out; }
a.btnStyle:hover > img { transform: rotateZ(-8deg); }
/* Chargement dynamique des images */
.bpreload { background-position: center; background-repeat: no-repeat; background-size: auto; background-image: url(/img/front/loading.gif); background-color: #1a1a1a; }
.ipreload { background-position: center; background-repeat: no-repeat; background-size: auto; background-image: url(/img/front/loading.gif); background-color: #1a1a1a; height: 300px; width: 100%; }
.spreload { background-position: center; background-repeat: no-repeat; background-size: auto; background-image: url(/img/front/loading.gif); background-color: #1a1a1a; }
/* 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; }
/* Elements de la page */
body { padding: 180px 0 0 0; }
#btop-test { position: fixed; bottom: 20px; left: 0; right: auto; padding: 8px 16px; background: #f00; color: #fff; text-align: center; z-index: 100004;
font-size: 15px; opacity: .7; border-radius: 0 24px 24px 0; }
#content { padding: 25px 0 25px 0; z-index: 1; }
#btnHaut { position: fixed; bottom: 8px; right: 12px; background: #5f7275 url(/img/front/btn-haut.png) no-repeat center; border-radius: 3px; height: 48px; width: 48px;
display: none; opacity: 0; transition: all 0.3s ease-in-out; z-index: 9; }
#btnHaut.actif { display: block; opacity: 0.5; cursor: pointer; }
#btnHaut.actif:hover { opacity: 1; }
/* Entête */
#entete { position: absolute; top: 0; left: 0; height: 120px; width: 100%; overflow: hidden; background-color: #fff; color: #000; z-index: 99; box-shadow: 0 0 4px rgba(0,0,0,0.3); }
#entete > .contenu { position: relative; height: 100%; }
#entete #cntLogo { position: absolute; top: 10px; left: 10px; padding: 26px 0 24px 120px; color: #000 !important; }
#entete #cntLogo > img { position: absolute; top: 0; left: 0; width: 100px; transition: all .3s ease-in-out; }
#entete #cntLogo:hover > img { transform: rotateZ(5deg); }
#entete #cntLogo > #titsit { font-size: 16px; }
#entete #cntLogo > #titsit > strong { display: block; font-size: 22.5px; font-weight: 900; margin-bottom: 6px; }
#entete #cntClient { position: absolute; top: 15px; right: 0px; padding: 8px 0; color: #111; }
#entete #cntClient a { color: #111; } #entete #cntClient a:hover { color: #111; }
#entete #cntClient .displr { display: none; }
#entete #cntClient #compte { float: left; padding: 0 20px 0 44px; border-right: 1px dotted #888; background: url("/img/front/mdp-client.png") no-repeat left center; }
#entete #cntClient #compte a { display: block; line-height: 16px; }
#entete #cntClient #compte a > strong { font-size: 14px; }
#entete #cntClient #compte a > span { font-size: 11px; line-height: 12px; }
#entete #cntClient #panier { float: left; padding: 0 20px 0 44px; background: url("/img/front/mdp-panier.png") no-repeat left center; margin-left: 20px; }
#entete #cntClient #panier a { display: block; line-height: 16px; }
#entete #cntClient #panier a > strong { font-size: 14px; }
#entete #cntClient #panier a > span { font-size: 11px; }
#entete #cntRech { position: absolute; top: 70px; right: 12px; font-size: 12px; width: auto; border: 1px solid #000; border-radius: 16px; }
#entete #cntRech #frmRech { border-radius: 15px; height: 29px; overflow: hidden; margin: 0; }
#entete #cntRech #frmRech > div { float: left; }
#entete #cntRech #frmRech > div.clear { float: none; }
#entete #cntRech #recherche { height: 29px; width: 258px; line-height: 29px; margin: 0; padding: 0 8px; border: none; font-size: 12px; color: #111; border-radius: 15px 0 0 15px; }
#entete #cntRech #recherche::-webkit-input-placeholder { color: #aaa; }
#entete #cntRech #recherche::-moz-placeholder { color: #aaa; }
#entete #cntRech #btnValrec { background: #fff url(/img/front/picto-loupe-noir.png) no-repeat center; border-radius: 0 15px 15px 0; cursor: pointer;
height: 31px; line-height: 29px; padding: 0 5px; width: 30px; border: none; }
/* Menu */
#btnmob { display: none; } #menmob { display: none; }
#menu { position: absolute; top: 120px; width: 100%; height: 60px; font-size: 14px; font-weight: 300; background: #111; color: #fff;
box-shadow: 0 0 .5rem 0 rgba(0,0,0,.2); z-index: 98; }
#menu.scrolled { position: fixed; top: 0px; }
#menu a { color: #fff; float: left; height: 14px; line-height: 14px; padding: 23px 20px 23px 20px; text-decoration: none; transition: all .2s ease-in-out; }
#menu a.actif { color: #FFF000; }
#menu a.lmenud { background: url(/img/front/mdp-menu-off.png) no-repeat right 12px top 26px; padding-right: 30px; }
#menu a.lmenud.ouvert { background-image: url(/img/front/mdp-menu-on.png); }
#menu a:hover { background-color: rgba(255,255,255,0.1); }
.smenu { position: absolute; height: auto; width: auto; opacity: 0; transform: translateY(-100px); transform-origin: top; transition: all .3s ease-in-out; background: #111; color: #fff; z-index: -1;
box-shadow: 0 0 8px rgba(0,0,0,0.3); }
.smenu.ouvert { opacity: 1; transform: translateY(0); z-index: 95; }
.smenu a { display: block; color: #fff; font-size: 14px; font-weight: 300; line-height: 20px; padding: 10px 20px; text-decoration: none; transition: all .2s ease-in-out; }
.smenu a.currayon { /* color: #fd925e; */ }
.smenu a:hover { text-decoration: none; background: #fff; color: #111; }
/* Titre du site / des pages */
#cnttit { text-align: center; padding: 24px 24px; color: #fff; font-size: 18px; text-shadow: 0 0 4px #000;
background: url("/img/front/bg-titre-paille-marqueterie.jpg") no-repeat right center; background-size: auto 60px; }
#cnttit #fadtit { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #000; opacity: .2; box-shadow: 0 0 8px #000 inset; }
#cnttit.accueil { padding: 48px 24px; background: url("/img/front/canva-paille.jpg") repeat center; background-size: auto 400px; }
#cnttit h1 { color: #fff; margin: 0; padding: 0; font-size: 25px; line-height: 28px; }
#cnttit.accueil h1 { margin: 0 0 48px 0; }
/* Liste des rayons */
#lstray a { color: #666; display: block; padding: 3px 0; }
#lstray a:hover { text-decoration: underline; }
#lstray > a { font-size: 18px; margin-top: 12px; }
#lstray > a:first-of-type { margin-top: 0; }
#lstray .lstsray { padding: 6px 0 6px 12px; border-left: 1px dotted #ccc; }
#lstray .lstsray > a { font-size: 15px; }
#lstray .lstssray { padding: 6px 0 6px 12px; border-left: 1px dotted #ccc; }
#lstray .lstssray > a { font-size: 13px; }
/* Barre de navigation */
#cntNavig { height: 16px; line-height: 16px; padding: 15px 0 15px 0; background: #fff; vertical-align: top; overflow: hidden; font-size: 11px;
border-top: 1px dotted #ccc; white-space: nowrap; }
#cntNavig > .contenu > .padding { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cntNavig a { display: inline; 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: #fd925e; }
#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; }
/* Fiche article */
#frmAddpan { display: block; padding: 12px 0; background: #f4f4f4; margin-bottom: 16px; }
#frmAddpan .lpromo { display: block; font-weight: bold; color: #313b48; border-radius: 4px; line-height: 1em; margin-bottom: 3px; }
#frmAddpan .prxori { font: bold 16px/1 Tahoma,Geneva,sans-serif; color: #4c4c4e; text-decoration: line-through; }
#frmAddpan .prix { font: bold 22px/1 Tahoma,Geneva,sans-serif; color: #313b48; }
#frmAddpan .cntUnit { float: left; padding: 0 12px; border-right: 1px dotted #d7d7d7; font-size: 12px; line-height: 16px; }
#frmAddpan .cntUnit .unit { display: block; }
#frmAddpan .cntUnit .prix { display: block; margin-top: -4px; }
#frmAddpan .cntUnit .prixkg { display: block; font: bold 11px/18px Tahoma,Geneva,sans-serif; color: #999; float: right; }
#frmAddpan #btnCde { display: block; float: right; color: #fff; text-align: center; font-size: 16px; font-weight: bold; line-height: 1em; box-shadow: 0 0 12px rgba(0,0,0,0.3) inset;
border-radius: 3px; background: #313b48; padding: 13px; margin: 0px 12px; transition: all .2s ease-in-out; }
#frmAddpan #btnCde > img { width: 32px; height: 32px; }
#frmAddpan #btnCde:hover { box-shadow: 0 0 12px rgba(0,0,0,0.3) inset, 2px 2px 4px rgba(0,0,0,0.3); transform: translate(0, -2px); }
#frmAddpan #btnDemstk { display: block; float: right; color: #fff; text-align: center; font-size: 16px; font-weight: bold; box-shadow: 0 0 12px rgba(0,0,0,0.3) inset;
border-radius: 3px; background: #313b48; padding: 10px 12px; margin: 0px 12px; line-height: 32px; transition: all .2s ease-in-out; }
#frmAddpan #btnDemstk > img { width: 32px; height: 32px; margin-right: 8px; }
#frmAddpan #btnDemstk:hover { box-shadow: 0 0 12px rgba(0,0,0,0.3) inset, 2px 2px 4px rgba(0,0,0,0.3); transform: translate(0, -2px); }
#frmAddpan #cntCde { float: right; margin: 5px 20px; margin-right: 8px; line-height: 15px; text-align: center; }
#frmAddpan #cntCde > span { display: block; font-size: 12px; margin-bottom: 4px; }
#frmAddpan #cntCde #chxUnit { max-width: 96px; }
#frmAddpan #cntCde #qteUnit { display: none; /*inline-block;*/ margin-top: 6px; white-space: nowrap; font-size: 12px; }
#frmAddpan #cntCde > .petit { display: inline-block; width: 120px; line-height: 12px; font-style: italic; }
#frmAddpan #cntFicart { margin-top: 16px; line-height: 16px; font-size: 13px; vertical-align: middle; }
#frmAddpan #cntFicart a { color: #555555; } #frmAddpan #cntFicart a:hover { color: #313b48; }
#cntImgart { display: block; width: auto; height: auto; padding: 0 32px 0 0; background-color: #fff; cursor: zoom-in; }
#cntImgart > img { width: 100%; transition: all .3s ease-in-out; box-sizing: border-box; border-radius: 20px; }
#cntImgart:hover > img { box-shadow: 0 0 4px rgba(0,0,0,0.3); }
#lstImgart { float: left; width: 50%; margin: 0; }
#lstImgart #cntImgart { float: none; margin-bottom: 12px; }
#lstImgart > .imgars { display: inline-block; margin-left: 8px; width: 136px; padding: 0; background-color: #fff; box-sizing: border-box; }
#lstImgart > .imgars:nth-child(2) { margin-left: 0; }
#lstImgart > .imgars > img { width: 100%; border-radius: 20px; }
#lstImgart.noars > .imgars { display: none !important; }
#cntDesart { display: block; float: right; width: 50%; }
#cntDesart .stitre { font-size: 11px; font-style: italic; border-bottom: solid 1px #eee; margin-bottom: 6px; }
#cntDetart { margin-bottom: 20px; }
#cntDetart tr > td { font-size: 14px; line-height: 16px; }
#cntDetart tr > td:first-child { font-style: italic; width: 110px; font-size: 12px; padding-top: 2px; }
#cntDetart tr > td > .icone { width: 12px; height: 12px; margin-top: 3px; }
.encombrant { display: block; padding: 8px 12px 0px 120px; height: 36px; line-height: 36px; background: url(/img/front/encombrant.png) no-repeat left 12px bottom;
margin-top: 12px; border-top: 1px dotted #d7d7d7; }
.encombrant > .cntTexte { display: inline-block; font-size: 15px; font-weight: bold; color: #666; line-height: 1em; vertical-align: middle; }
.encombrant > .cntTexte > em { font-size: 11px; font-weight: normal; color: #999; }
.encombrant > .cntTexte > em.rouge { color: #313b48; }
body.formations #frmAddpan #cntCde #qteUnit { display: inline-block; }
a.tagart, a.tagart:link, a.tagart:visited { display: inline-block; font-size: 12px; text-transform: uppercase; font-weight: bold; color: #313b48; margin: 0 3px 0 0; line-height: 16px; }
a.tagart:hover { text-decoration: underline; }
a.tagart > sup { display: none; }
/* Liste articles en bas de fiche article */
.listeMinart { height: 150px; overflow: hidden; }
.listeMinart > a { display: inline-block; position: relative; height: 148px; overflow: hidden; margin: 0px 1px; box-sizing: border-box; border: 1px solid #d7d7d7; }
.listeMinart > a:hover { -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
.listeMinart > a > img { width: 140px; height: 140px; padding: 3px 3px; background-color: #fff; }
.listeMinart > a > .legende { position: absolute; top: 112px; left: 1px; width: 138px; padding: 3px 4px; background-color: rgba(255,255,255,0.7);
font-size: 11px; line-height: 15px; color: #555; text-transform: uppercase; font-weight: bold; min-height: 140px; transition: top .3s ease-in-out;
text-align: center; letter-spacing: -0.5px; }
.listeMinart > a > .legende.hover { top: 1px; }
.listeMinart > a > .legende > .prix { position: absolute; top: 122px; left: 3px; width: 140px; text-align: center; font: bold 14px/1 Tahoma,Geneva,sans-serif; color: #313b48; }
/* Page d'accueil */
#titacc { text-align: center; margin: 40px 0; font-size: 28px; line-height: 28px; }
a.lnk-rayacc { color: #fd925e; font-weight: 900; display: block; margin-bottom: 20px; }
#cnt3rayons { font-size: 0; border-bottom: solid 1px #eee; margin-bottom: 40px; padding-bottom: 20px; }
#cnt3rayons .btn-accray { display: inline-block; width: 33%; box-sizing: border-box; font-size: 16px; padding: 20px; color: #555; vertical-align: top; }
#cnt3rayons .btn-accray > .titre { font-size: 16px; font-weight: 900; color: #222; text-align: center; }
#cnt3rayons .btn-accray > img { display: block; margin: 10px 0; width: 100%; }
#cntPdsacc { background: #DEECEC; margin: 32px 0; padding: 10px 0; }
#cntPdsacc > .contenu { display: table; table-layout: fixed; }
#cntPdsacc > .contenu > div { display: table-cell; vertical-align: middle; width: 820px; padding: 0 32px; box-sizing: border-box; }
#cntPdsacc > .contenu > div > a { display: block; padding: 16px 20px; background: #fd925e; color: #fff; width: 380px; margin: 30px auto; text-align: center; font-size: 23px; }
#cntPdsacc > .contenu > img { display: table-cell; width: 380px; }
/* Pages d'info / erreurs */
body.infos p, body.infos h2 { color: #606060; }
body.infos #content a:hover { text-decoration: underline !important; }
body.erreur #content { color: #606060; }
#bigErreur { color: #f7f7f7; font-size: 300px; line-height: 300px; font-weight: bold; text-align: center; text-shadow: 0px 0px 32px rgba(0,0,0,0.17); }
/* Billets de blog */
.cnt-billet { height: 212px; padding: 16px 16px 16px 196px; box-sizing: border-box; margin: 0 0 12px 0; background: #fff; border-bottom: 1px dotted #ccc; transition: all .2s ease-in-out; }
.cnt-billet:last-of-type { border-bottom: none; }
.cnt-billet .image { position: absolute; left: 0; top: 16px; height: 180px; width: 180px; background-position: center; background-repeat: no-repeat; background-size: cover; }
.cnt-billet .titre { font-weight: 700; font-size: 20px; height: 27px; line-height: 27px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnt-billet .date { color: #999; font-style: italic; margin-bottom: 8px; font-size: 12px; }
.cnt-billet .texte { line-height: 20px; height: 80px; overflow: hidden; font-style: italic; }
.cnt-billet .lien { position: absolute; right: 16px; bottom: 12px; color: #fff; padding: 5px 30px 5px 10px; border-radius: 5px; font-weight: 700; font-size: 13px;
background: #5f7275 url(/img/front/mdp-bsuiv.png) no-repeat right 10px center; transition: all .3s ease-in-out;}
.cnt-billet:hover .lien { background-color: #4b5e61; background-position: right 6px center; }
.imgBillet { text-align: center; }
.imgBillet > img { max-width: 100%; max-height: 400px; }
.txtBillet { margin: 24px 0; }
#infBillet { font-size: 12px; color: #666; font-style: italic; margin: 12px 0 16px 0; padding: 6px 12px; background: #f7f7f7; }
#infBillet > a { font-weight: 700; }
#autBillet { background: url(/img/front/mdp-avatar.png) no-repeat left top; background-size: 75px auto; padding: 0 0 0 100px; min-height: 75px; }
#autBillet > a { font-weight: 700; font-size: 18px; color: #111; }
#autBillet > div { font-size: 12px; line-height: 18px; margin: 6px 0 0 0; }
#navBillet { padding: 30px 0; margin: 30px 0 0 0; border-top: 1px dotted #ccc; }
#navBillet #btn-bilpre { float: left; padding: 10px 15px 10px 35px; background: #5f7275 url(/img/front/mdp-bprec.png) no-repeat left 8px center; border-radius: 5px; }
#navBillet #btn-bilsui { float: right; padding: 10px 35px 10px 15px; background: #5f7275 url(/img/front/mdp-bsuiv.png) no-repeat right 8px center; border-radius: 5px; }
#navBillet a { max-width: 42%; color: #fff; font-size: 14px; line-height: 18px; font-weight: 400; transition: all .3s ease-in-out; vertical-align: top;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#navBillet #btn-bilpre:hover { background-color: #4b5e61; background-position: left 4px center; }
#navBillet #btn-bilsui:hover { background-color: #4b5e61; background-position: right 4px center; }
/* Listes d'articles */
#cnt-catray { font-size: 0; text-align: center; margin-bottom: 20px; }
#cnt-catray > a { position: relative; display: inline-block; width: 32%; height: 70px; padding: 10px 10px 10px 70px; background: #eee; margin: 0 0.5% 12px 0.5%; color: #fd925e;
font-size: 16px; font-weight: 900; line-height: 50px; border-radius: 10px; box-sizing: border-box; transition: all .3s ease-in-out; vertical-align: top; }
#cnt-catray > a > img { position: absolute; left: 10px; right: 10px; top: 10px; height: 50px; }
#cnt-catray > a > span { display: inline-block; vertical-align: middle; line-height: 25px; }
#cnt-catray > a:hover { transform: translateY(-4px); box-shadow: 0 0 6px rgba(0,0,0,0.3); }
.cntNavig { padding: 6px; color: #111; font-size: 12px; line-height: 18px; background-color: #eee; border-radius: 5px; margin-bottom: 20px; }
.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: 6px; padding: 1px 4px 1px 4px; background: #fff; font-size: 14px; }
.cntNavig #chxnba { float: left; margin-right: 30px; padding: 1px 4px 1px 4px; background: #fff; width: 52px; font-size: 14px; }
.cntNavig .cntTotres { float: right; margin-right: 6px; margin-top: 1px; font-size: 14px; }
.cntNavig .btnPage { background: #fff; color: #555555; padding: 2px 4px; line-height: 16px; font-weight: bold; min-width: 20px; }
.cntNavig .btnPage.actif { background-color: #313b48; color: #fff; } .cntNavig .btnPage:hover { color: #fd925e; }
.lstart { background: #fff; margin: 0; }
.lstart .noresult { color: #a7a7a7; background: #f7f7f7; font-size: 30px; line-height: 34px; text-align: center; padding: 170px 0; font-weight: bold; }
.art-liste { float: left; color: #333; width: 280px; height: auto; margin: 10px 10px 32px 10px; box-sizing: border-box; }
.art-liste.lig6v { width: 15%; }
.art-liste > a { display: block; width: 100%; height: 100%; color: #333; transition: all .3s ease-in-out; }
.art-liste > a > .art-image { border-radius: 20px; box-shadow: 0 0.5em 10px 0 rgba(0, 0, 0, 0.2); border: solid 1px #fff; width: 100%; transition: all .3s ease-in-out; }
.art-liste > a:hover > .art-image { transform: translateY(-4px); box-shadow: 0 0.3em 10px 0 rgba(0, 0, 0, 0.5); }
.art-liste > a > .art-titre { height: 45px; line-height: 45px; margin: 12px 0; text-align: center; overflow: hidden; }
.art-liste > a > .art-titre > h2 { display: inline-block; font-weight: 700; font-size: 18px; line-height: 22px; vertical-align: middle; margin: 0; }
.art-liste > a > .art-prix { display: block; font-weight: 900; font-size: 18px; line-height: 18px; color: #5f7275; text-align: center; }
.art-liste > a > .art-prix > .cntapd { color: #888; font-size: 11px; font-weight: normal; font-style: italic; }
.art-liste > a > .cntcde { display: block; text-align: center; color: #888; font-size: 14px; font-weight: normal; margin-top: 12px; }
.art-liste > a > .cntcde > span { color: #fff; cursor: pointer; display: inline-block; padding: 5px 10px 5px 30px; border-radius: 5px; font-weight: 700;
background: #5f7275 url(/img/front/mdp-voir-fiche.png) no-repeat left 10px center; transition: all .3s ease-in-out; }
.art-liste > a > .cntcde > span:hover { background-color: #4b5e61; }
.art-liste > a > .cntcde > .btnCommander { background-image: url(/img/front/add-panier-mini-nb.png); }
.art-liste > a > .imgart { display: block; margin-bottom: 12px; }
.art-liste > a > .imgart > img { width: 100%; }
.art-liste > a > .nomart { display: block; height: 44px; margin: 12px 0 8px 0; text-align: center; overflow: hidden; font-weight: 700; font-size: 18px; line-height: 22px; }
.art-liste > a > .nomfor { display: block; height: 18px; margin: 0 0 6px 0; font-size: 14px; line-height: 18px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.art-liste > a > .refart { display: block; font-size: 12px; font-style: italic; }
.cntFormations { font-size: 0; text-align: center; margin-bottom: 20px; }
.art-liste.formapre { float: none; display: inline-block; vertical-align: top; }
.art-liste.formadis { float: none; display: inline-block; vertical-align: top; }
#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; }
/* 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; }
/* 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: #313b48; 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: #fd925e; }
/* Encart partager */
#cntShare { padding: 40px 0; background: #f3f3f3; border-top: 1px dotted #ccc; }
#cntShare > div > span { display: block; padding-bottom: 4px; border-bottom: 1px dotted #888; margin-bottom: 6px; font-size: 13px; font-style: italic; }
#cntShare #st-1 { z-index: 97 !important; }
#at-expanded-menu-host { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: none; }
#at-expanded-menu-host .at-expanded-menu { top: 10% !important; }
.at-expanded-menu-noscroll #at-expanded-menu-host { display: block; z-index: 9999999; }
.at-share-btn.at-svc-sms { display: none !important; }
/* Pieds de page */
#pied_infos { background: #313b48; color: #fff; padding: 40px 0; text-align: center; font-size: 15px; }
#pied_infos a { color: #fff; }
#pied_infos .lnk-infos { display: inline-block; width: 30%; margin: 0 1.5%; text-align: center; color: #fff; vertical-align: top; }
#pied_infos #cnt-marque strong { display: block; margin: 8px 0 4px 0; font-size: 20px; font-weight: 900; }
#pied_infos #cnt-marque a > img { transition: all .3s ease-in-out; }
#pied_infos #cnt-marque a:hover > img { transform: rotateZ(5deg); }
#pied_infos #cnt-marque #lnk-rsoc { text-align: center; }
#pied_infos #cnt-marque #lnk-rsoc > a { display: inline-block; margin: 4px; }
#pied_infos #cnt-marque #lnk-rsoc > a > img { width: 30px; height: 30px; }
#pied_infos #cnt-liens > div { display: inline-block; text-align: left; font-size: 15px; line-height: 18px; margin-top: 20px; }
#pied_infos #cnt-liens a { display: block; padding: 0 0 0 18px; background: url(/img/front/rm-li.png) no-repeat left center; color: #fff; margin-bottom: 5px; }
#pied_infos #cnt-contact > img { width: 48px; }
#pied_infos #cnt-contact > em { display: block; margin: 4px 0; font-size: 13px; }
#pied_infos #cnt-contact > span { display: block; margin: 8px 0 4px 0; font-size: 20px; font-weight: 900; }
#pied_copy { background: #28313d; color: #fff; padding: 24px 0; text-align: left; font-size: 13px; }
#pied_copy a { color: #bcbaba; display: inline-block; margin: 0 20px; }
#pied_copy a:first-of-type { margin: 0; }
#pied_copy a:hover { color: #30afb8; }
/* =============================================================================================================
GESTION DU PANIER
============================================================================================================= */
/* Affichage du panier au survol du bouton panier */
#cntAffpan { position: absolute; background: #f4f4f4; padding: 0px; box-shadow: 0 0 6px rgba(0,0,0,0.5); max-height: 80vh; max-width: 95%; min-width: 240px; z-index: 999; }
#cntAffpan .ligpan { font-size: 11px; line-height: 15px; color: #333; padding: 4px 6px; border-bottom: 1px solid #d7d7d7; }
#cntAffpan .ligpan > span { display: inline-block; width: 32px; text-align: right; vertical-align: top; }
#cntAffpan .ligpan > div { display: inline-block; width: calc(100% - 36px); vertical-align: top; height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cntAffpan .totpan { font-size: 13px; line-height: 18px; color: #333; padding: 8px; background: #fff; font-weight: 700; }
#cntAffpan .totpan > strong { display: block; float: right; margin-left: 12px; font-size: 15px; line-height: 1em; font-weight: 900; color: #fd925e; }
#cntAffpan #panvid { font-size: 13px; line-height: 18px; color: #999; text-align: center; padding: 8px; background: #ffffdf; font-style: italic; }
/* Ajout au panier / demande de stock */
#divFadpan { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 101; }
#divAddpan { position: absolute; top: 50%; left: 50%; width: 600px; height: 100px; padding: 16px 12px; margin-top: -58px; margin-left: -308px; border-radius: 5px;
background-color: #f4f4f4; color: #111; box-shadow: 0 0 5px rgba(0,0,0,0.6); line-height: 1.1em; font-size: 14px; }
#divAddpan .nomart { font-size: 18px; line-height: 15px; text-transform: uppercase; font-weight: bold; margin-bottom: 6px; height: 15px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#divAddpan #cntBtnpan { text-align: right; }
#divAddpan #cntBtnpan > a { display: inline-block; width: 293px; text-align: center; padding: 6px 0; border-radius: 5px; border: 1px solid #5f7275; }
#divAddpan #cntBtnpan > a:hover { box-shadow: 0 0 5px rgba(0,0,0,0.6); }
#divAddpan #cntBtnpan > #btnValpan { background: #5f7275 url(/img/admin/tick.png) no-repeat 10px center; color: #fff; margin-right: 4px; }
#divAddpan #cntBtnpan > #btnFerpan { background: #fff url(/img/admin/undo.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; }
#warning p { margin: 0; font-size: 11px; line-height: 15px; }
.etapeLien { float: left; height: 0; font-size: 0; width: 32px; border-bottom: 2px solid #313b48; margin-top: 13px; }
.etapeLien.inactive { border-bottom: 2px dotted #aaaaaa; }
.etapeCont { float: left; border: 1px solid #aaaaaa; color: #aaaaaa; text-transform: uppercase; font-size: 12px; line-height: 22px; vertical-align: middle;
width: 162px; text-align: left; }
.etapeCont.active { border: 1px solid #313b48; color: #555; font-weight: bold; }
.etapeCont span { height: 22px; padding-bottom: 2px; padding-top: 3px; vertical-align: middle; }
.etapeCont .etapeNum { display: inline-block; width: 30px; text-align: center; font-size: 22px; font-weight: bold; color: #fff; background: #aaaaaa; margin-right: 12px; }
.etapeCont > a { display: block; color: #aaaaaa; }
.etapeCont > a:hover { color: #fd925e; background: #fff; } .etapeCont > a:hover .etapeNum { background: #fd925e; }
.etapeCont.active > .etapeNum { background: #313b48; }
#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); }
#panierListe { width: 100%; margin: 0; padding: 0; border: none; border-spacing: 0; border-collapse: separate; }
#panierListe th { padding: 6px; color: #fff; font-weight: bold; border-right: 1px solid #111; border-bottom: 1px solid #111; font-size: 13px;
background-color: #313b48; 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; }
#panierListe td { background: #fff; }
#panierListe .detart { height: 60px; padding: 4px; font-size: 11px; border: 1px solid #d7d7d7; border-top: none; }
#panierListe .detart > img { float: left; width: 60px; margin-right: 8px; }
#panierListe .detart > a { display: inline-block; margin-bottom: 3px; font-size: 15px; text-transform: uppercase; }
#panierListe .detart > a:hover { color: #486922; }
#panierListe .detart > .refart { margin-right: 12px; }
#panierListe .detart > .priart { }
#panierListe .qteart { width: 80px; padding: 0 10px; vertical-align: middle; text-align: center; border-bottom: 1px solid #d7d7d7; line-height: 1.1em; }
#panierListe .qteart > div > img { transition: filter .3s ease-in-out; filter: grayscale(100%); }
#panierListe .qteart > div > img:hover { filter: none; }
#panierListe .qteart .qtefdi { text-align: right; width: 24px; background: #f4f4f4; }
#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; }
#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; }
#panierListe .prxart > a:hover { text-decoration: underline; }
#panierListe .prxart.prxeur { padding: 20px 8px; }
#panierListe .panierTotcol { padding: 10px 32px; font-size: 13px; border: 1px solid #d7d7d7; border-top: none; border-right: none; }
#panierListe .panierTotcol.panierTottit { padding: 18px 32px; }
#panierListe .panierTotcol h1 { font-size: 22px; }
#panierListe .panierTottit { color: #919191; text-transform: uppercase; text-align: right; font-weight: bold; }
#panierListe #panierTotprx { color: #fd925e; }
#panierListe .nohlin { border-bottom: none; }
#panierListe .norlin { border-right: none; }
#panierListe #cntLivpay { margin-left: 40px; }
#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; }
#panierListe #panierTotgen { background: none; font: bold 20px/1 Tahoma,Geneva,sans-serif; color: #fd925e; border-top: 1px solid #8eb95d; padding: 10px; text-align: right; }
#cntPage #panierListe #estliv { text-align: center; background: #e7e7e7; border: 1px solid #ccc; border-top: none; font-size: 15px; padding: 10px 8px; }
#estprx { float: right; }
#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 */
.cntCoords { padding: 12px 16px; background: #fff; border-radius: 10px; border: 1px solid #d7d7d7; }
.cntCoords form { text-align: center; }
.cntCoords form > .inline { text-align: left; }
.cntCoords form > .inline > table { width: 600px; }
.rowliv { display: none; }
/* Récapitulatif commande + code remise */
#coordsRecap { float: right; width: 280px; font-size: 12px; }
#panierRecap { float: left; width: 880px; margin: 0; padding: 0; border: none; border-spacing: 0; border-collapse: separate; }
#panierRecap th { padding: 6px; color: #fff; font-weight: bold; border-right: 1px solid #111; border-bottom: 1px solid #111;
background-color: #313b48; 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; }
#panierRecap td { background: #fff; }
#panierRecap .libart { padding: 10px; text-align: left; text-transform: uppercase; border: 1px solid #d7d7d7; border-top: none; }
#panierRecap .libart > em { color: #a7a7a7; text-transform: none; font-size: 11px; }
#panierRecap .qteart { width: 60px; padding: 10px; text-align: center; border-bottom: 1px solid #d7d7d7; }
#panierRecap .prxart { width: 126px; padding: 6px 8px 2px 8px; background: #f4f4f4; font: bold 20px/1 Tahoma,Geneva,sans-serif; color: #555555; text-align: right;
border: 1px solid #d7d7d7; border-top: none; }
#panierRecap .msgrem { padding: 10px; font-size: 12px; text-transform: none; text-align: left; font-weight: normal; }
#panierRecap #cntAffcba { margin: 0 0 6px 0; padding: 6px 8px; background: #fcc; }
#panierRecap #cntAffcba a { font-weight: 700; }
#panierRecap #codrem { text-transform: uppercase; }
#panierRecap #panierTotrem { vertical-align: bottom; padding-bottom: 4px; }
#panierRecap .libtot { padding: 10px; text-align: right; font-weight: bold; text-transform: uppercase; border: 1px solid #d7d7d7; border-right: none; font-size: 14px; }
#panierRecap .libtot > em { color: #a7a7a7; font-weight: normal; text-transform: none; font-size: 11px; }
#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; }
#panierRecap .prxtot .rouge { color: #fd925e; }
#panierRecap .prxtot .vert { color: #313b48; }
#panierRecap #libgen { background: none; border-top: 1px solid #111; padding: 10px 20px; text-align: right; font-size: 24px; font-weight: bold;
color: #555; text-transform: uppercase; }
#panierRecap #totgen { background: none; font: bold 20px/1 Tahoma,Geneva,sans-serif; color: #fd925e; border-top: 1px solid #111; padding: 10px; text-align: right; }
#panierModreg { float: left; width: 880px; } #panierModreg > .padding { padding: 10px; }
#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); }
#panierModreg .cntModreg.actif { background-color: #313b48; 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; }
#panierModreg .cntModreg input { display: inline-block; margin: 10px; vertical-align: middle; }
#panierModreg .cntModreg img { display: inline-block; width: 100px; height: 50px; }
#panierModreg .cntModreg .libModreg { display: inline-block; margin: 0 10px; line-height: 1; font-size: 18px; vertical-align: middle; }
#panierModreg .cntModreg .libModreg > span { font-size: 11px; color: #313b48; }
#panierModreg #chkcgv { margin-left: 20px; }
#cntPage #panierModreg #chknwl { margin-left: 20px; }
#btnAfffcc { color: #fff; text-align: center; font-size: 16px; font-weight: 700; border-radius: 3px; background: #313b48; box-shadow: 0 26px rgba(0, 0, 0, 0.1) inset;
padding: 10px 12px; margin: 0px auto 12px auto; line-height: 32px; width: 600px; max-width: 100%; box-sizing: border-box; }
#btnAfffcc:hover { box-shadow: 0 -26px rgba(0, 0, 0, 0.1) inset, 2px 2px 4px #666; }
.chx_modliv { padding: 6px 10px; font-size: 14px; margin-bottom: 8px; border-radius: 15px 0 0 15px; vertical-align: middle;
background: #fff linear-gradient(to right, #efefef, #f7f7f7 50%, rgba(240,240,240,0)); box-shadow: -2px 0 2px rgba(0,0,0,0.2); box-sizing: border-box; }
.chx_modliv.inactif { filter: grayscale(100%); opacity: 0.7; }
.chx_modliv.select { background-color: #313b48; 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; }
.chx_modliv > .cnttab { display: table; width: 100%; }
.chx_modliv .cntchk { display: table-cell; height: 48px; width: 66px; margin-right: 6px; vertical-align: top; }
.chx_modliv .cntchk input[type=radio] { margin-top: 16px; }
#chx_modliv0 .cntchk { background: url(/img/front/liv_surplace.png) no-repeat right top; }
#chx_modliv1 .cntchk { background: url(/img/front/liv_transport.png) no-repeat right top; }
#chx_modliv2 .cntchk { background: url(/img/front/liv_laposte.png) no-repeat right top; }
#chx_modliv3 .cntchk { background: url(/img/front/liv_mrelay.png) no-repeat right top; }
.chx_modliv .cntlib { display: table-cell; vertical-align: top; padding-left: 6px; }
.chx_modliv .cntlib > .titliv { display: inline-block; font-size: 18px; font-weight: 700; }
.chx_modliv .cntlib > .prxliv { float: right; font-weight: 700; font-size: 16px; }
.chx_modliv .cntlib > .errliv { font-style: italic; color: #666; padding: 2px 0 0 0; }
.chx_modliv .cntlib > .infliv { font-style: italic; color: #669; padding: 2px 0 0 0; }
.chx_modliv.select .cntlib > .infliv { color: #ccf; }
#cnt-txtlsp { background: #fff; color: #333; padding: 6px 10px; margin: 4px 0; }
/* =============================================================================================================
GESTION ESPACE CLIENT
============================================================================================================= */
form table td { font-size: 12px; }
.btnCompte { display: block; padding: 6px 20px; font-size: 18px; color: #555; border-radius: 15px; vertical-align: middle; height: 50px; line-height: 50px; width: 300px; margin: 0 auto 8px auto;
background: #fff; background: linear-gradient(to right, #fafafa, #f5f7f7 50%, rgba(255,255,255,0)); box-shadow: 0 0 4px rgba(0,0,0,0.2); max-width: 100%; transition: all .1s ease-in-out; }
.btnCompte:hover { background-color: #313b48; 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); }
.btnCompte img { float: left; height: 48px; width: 48px; margin-right: 20px; transition: all .1s ease-in-out; }
.btnCompte:hover img { filter: invert(100%); }
#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; line-height: 16px; }
.seladr > .btnSupadr { display: block; float: right; padding: 4px 3px 4px 0px; width: 16px; }
/* Compte client : visu des commandes/formations */
.cptCommande { display: table; background: #fff; margin-bottom: 2px; border: 1px solid #d7d7d7; width: 100%; }
.cptCommande .outils { display: table-cell; width: 100px; background: #e7e7e7; padding: 2px 10px; text-align: left; vertical-align: middle; }
.cptCommande .outils > a { display: inline-block; margin-right: 4px; margin-top: 4px; }
.cptCommande .datcde { display: table-cell; width: 64px; padding: 5px 10px; font-size: 12px; font-style: italic; color: #888; vertical-align: middle; }
.cptCommande .libcde { display: table-cell; padding: 4px 10px; font-size: 14px; color: #333; vertical-align: middle; }
.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; }
.cptCommande .libcde .btnAffcde:hover { color: #313b48; }
.cptCommande .moncde { display: table-cell; width: 100px; background: #f7f7f7; font: bold 14px/1 Tahoma,Geneva,sans-serif; color: #313b48; padding: 1px 10px;
text-align: right; vertical-align: middle; }
.cptCommande .qtecde { display: table-cell; width: 80px; padding: 5px 10px; font-size: 12px; font-style: italic; color: #888; vertical-align: middle; }
.cptCommande .numcde { display: table-cell; width: 166px; padding: 5px 10px; font-size: 12px; color: #888; vertical-align: middle; }
.cptCommande .numcde > span { display: inline-block; margin-left: 10px; }
.cptCommande .lnkvid { display: table-cell; width: 80px; padding: 5px 10px; font-size: 12px; vertical-align: middle; background: url(/img/front/ico-play.png) no-repeat left center; padding-left: 20px; }
#divFadpan #fervid { position: absolute; top: 10px; right: 16px; }
#divFadpan #cnt-video { width: 100%; height: 480px; }
#divFadpan #cnt-video iframe, #divFadpan #cnt-video object { width: 100% !important; height: 100% !important; }
#chxModreg { position: absolute; background: #fff; color: #000; padding: 6px 8px; border: 1px solid #e7e7e7; border-radius: 5px; z-index: 99; }
#chxModreg a { color: #555; } #chxModreg a:hover { color: #888; }
#btnSavdoc { margin: 0 20px; }
#cntPiece { font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: normal; color: #4d4d4f; background-color: #555555; margin: 0; text-align: center; overflow: auto;
box-shadow: 0 0 8px rgba(0,0,0,0.3) inset; border: 1px solid #ddd; box-sizing: border-box; }
#cntPiece #divPiece { display: block; width: 700px; background-color: #FFFFFF; padding: 20px; margin: 20px auto; 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: #313b48; }
#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: #313b48; }
#cntPiece #divPiece h5 { font-size: 14px; color: #313b48; }
#cntPiece #divPiece h5 a { font-size: 14px; color: #313b48; }
#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-top: 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; z-index: 9999; }
#ir1340 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; z-index: 9999; }
#ir1120 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; z-index: 9999; }
#ir900 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; z-index: 9999; }
#ir600 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; z-index: 9999; }
#ir400 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; z-index: 9999; }
#ir320 { position: fixed; bottom: 0px; left: 0; padding: 4px 6px; background: #000; color: #fff; font-weight: 700; display: none; z-index: 9999; }
/* ------------------------------------------------ */
/* 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; }
#cnt-catray > a { font-size: 15px; }
#cntPdsacc > .contenu > div { width: 700px; }
.art-liste.lig6v { width: 14.8%; }
.art-liste.lig6v > a > .cntcde { font-size: 12px; }
.art-liste { width: 250px; }
#lstImgart > .imgars { width: 121px; }
.listeMinart > a { margin: 0px 3px; }
#cntTitre > #txtTitre > h1 { margin-bottom: 6px; }
.art-vignette { margin: 1px; }
.art-vignette:hover { z-index: 2; }
.cntCrits .titCrits { margin: 0 10px 0 0; }
.cntCrits .critCheck { margin-right: 10px; }
.etapeLien { width: 30px; }
.etapeCont { font-size: 12px; width: 148px; }
#coordsRecap { width: 240px; }
#panierRecap { width: 800px; }
#panierModreg { width: 800px; }
.cptCommande .libcde .btnAffcde { display: block; }
}
/* ------------------------------------------------ */
/* 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; }
body { font-size: 15px; }
pre { margin: 0; padding: 0; width: auto; white-space: pre-wrap; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h4 { font-size: 18px; }
.contenu { width: 100%; left: auto; margin-left: 0px; }
.contenu > .padding { padding: 0 10px; }
.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; }
a.btnRouge { margin-top: -1px; }
#entete #cntLogo { left: 12px; }
#entete #cntClient { right: 12px; }
#entete #cntRech { right: 20px; }
#menu { font-size: 12px; }
#menu a { padding: 23px 12px 23px 12px; }
#menu a.lmenud { background-position: right 6px top 26px; padding-right: 22px; }
#cntPdsacc > .contenu { display: block; width: auto; padding-right: 320px; }
#cntPdsacc > .contenu > div { display: block; width: auto; padding-bottom: 20px; }
#cntPdsacc > .contenu > div > a { font-size: 20px; margin: 20px auto 0 auto; }
#cntPdsacc > .contenu > img { width: auto; height: 100%; display: block; position: absolute; top: 0; right: 32px; }
#cnt-catray > a { font-size: 15px; line-height: 18px; text-align: left; padding: 15px 10px 15px 70px; }
#cntListe .cntCrits #critSup { float: right; }
#cntArts { width: 810px; margin: 0 auto; }
.art-liste { width: 23%; margin: 10px 1% 32px 1%; }
.art-liste > a > .nomart { font-size: 16px; }
.art-liste > a > .art-prix { font-size: 16px; }
.art-liste > a > .art-titre > h2 { font-size: 16px; }
.art-liste.lig6v { width: 14.3%; }
.art-liste.lig6v > a > .cntcde { font-size: 10px; }
.art-liste.lig6v > a > .art-titre > h2 { font-size: 15px; }
frmAddpan { width: auto; }
#cntArticle { display: table; }
#cntImgart > img { width: 100%; }
#lstImgart { display: table-cell; width: 35%; }
#lstImgart #cntImgart { display: block; width: 100%; box-sizing: border-box; height: auto; }
#lstImgart > .imgars { width: 21%; margin-left: 2%; }
#cntDesart { display: table-cell; width: 65%; }
.listeMinart { height: 100px; }
.listeMinart > a { height: 98px; }
.listeMinart > a:hover { -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); }
.listeMinart > a > img { width: 90px; height: 90px; }
.listeMinart > a > .legende { top: 62px; width: 88px; font-size: 10px; line-height: 13px; padding: 5px 4px; min-height: 86px; }
.listeMinart > a > .legende > .prix { top: 72px; width: 90px; font: bold 13px/1 Tahoma,Geneva,sans-serif; }
#cntCoords { float: none; width: auto; }
#cntCoords .padding { max-width: 260px; }
#cntSavpan { padding: 8px; font-size: 0; padding-left: 70px; }
#btnRespsa, #btnSavpsa { display: block; margin: 0; font-size: 11px; line-height: 1.1em; }
#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; }
.etapeLien { display: none; }
.etapeCont { font-size: 12px; float: none; display: inline-block; width: auto; }
.etapeCont span { margin-right: 12px; }
#panierListe .detart > img { display: none; }
#panierListe .prxart { font: bold 12px/1 Tahoma,Geneva,sans-serif; width: 70px; }
#panierListe .qteart { padding: 0 4px; padding-top: 12px; }
#panierListe #livpay { width: 80px; }
#panierListe .panierTotcol { padding: 6px 12px; }
#panierListe .panierTotcol.panierTottit { padding: 10px 12px; }
#panierListe #cntLibser { background: none; padding-right: 0; }
#panierListe #panierLibgen { font-size: 14px; }
#panierListe #panierTotgen { font: bold 12px/1 Tahoma,Geneva,sans-serif; }
#coordsRecap { float: none; width: auto; }
#panierRecap { float: none; width: 100%; }
#panierRecap #cntCodrem { display: block; margin-top: 4px; }
#panierRecap #codrem { width: 100px; }
#panierRecap .libtot { font-size: 11px; }
#panierRecap .qteart { width: 40px; }
#panierRecap .prxart { font: bold 12px/1 Tahoma,Geneva,sans-serif; width: 70px; padding: 6px 8px; }
#panierRecap .prxtot { font: bold 12px/1 Tahoma,Geneva,sans-serif; width: 70px; }
#panierRecap #totgen { font: bold 12px/1 Tahoma,Geneva,sans-serif; width: 70px; }
#panierRecap #libgen { font-size: 14px; }
#panierModreg { float: none; width: auto; }
#pied_infos { font-size: 14px; }
#pied_infos #cnt-liens > div { font-size: 13px; }
#pied_infos #cnt-contact > span { font-size: 16px; }
}
/* ------------------------------------------------ */
/* Format < 900px */
@media handheld, only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
#ir1120 { display: none; }
#ir900 { display: block; }
body { padding: 80px 0 0 0; font-size: 14px; }
h2 { font-size: 22px; }
.br900 { display: block; height: 0; font-size: 0; }
#entete { height: 80px; box-shadow: 0 0 6px rgba(0,0,0,0.5); }
#entete #cntLogo { padding: 10px 0 10px 68px; }
#entete #cntLogo > img { height: 60px; width: auto; }
#entete #cntLogo > #titsit { font-size: 13px; }
#entete #cntLogo > #titsit > strong { font-size: 18px; margin-bottom: 3px; }
#entete #cntClient { float: right; width: auto; top: auto; position: relative; white-space: nowrap; right: 66px; }
#entete #cntClient #compte { display: inline-block; float: none; width: auto; height: auto; padding: 0 0 0 24px; border-right: none; background-size: 16px; }
#entete #cntClient #compte a { display: none; }
#entete #cntClient #compte a:first-child { display: inline-block; font-size: 12px; line-height: 20px; }
#entete #cntClient #panier { display: inline-block; float: none; width: auto; height: auto; padding: 0 0 0 24px; margin-left: 12px; background-size: 16px; }
#entete #cntClient #panier a { display: none; }
#entete #cntClient #panier a:first-child { display: inline-block; line-height: 20px; }
#entete #cntClient #compte a > strong, #entete #cntClient #panier a > strong { font-size: 12px; white-space: nowrap; }
#entete #cntRech { top: 39px; right: 70px; }
#entete #cntRech #recherche { width: 160px; }
#btnmob { position: absolute; display: block; height: 32px; width: 32px; background: url(/img/front/mdp-menmob.png) no-repeat center; padding: 6px; right: 12px; top: 32px; }
#menmob { display: none; opacity: 0; position: absolute; top: 80px; left: 0; right: 0; background: #111; transition: all .3s ease-in-out; z-index: 98; padding: 4px 0;
box-shadow: 0 0 8px rgba(0,0,0,0.7), 0 0 32px rgba(0,0,0,0.2) inset; border-top: 1px dotted #333; overflow: auto; }
#menmob.actif { display: block; opacity: 1; }
#menmob a { display: block; padding: 8px 12px; color: #fff; text-align: center; transition: all .3s ease-in-out; border-top: 1px solid #333; position: relative; }
#menmob a:first-child { border-top: none; }
#menmob a.mobbar .mbossm { position: absolute; right: 12px; top: 2px; height: 32px; width: 32px; background: url(/img/front/mdp-menu-off.png) no-repeat center; }
#menmob a.mobbar .mbossm.ouvert { background-image: url(/img/front/mdp-menu-on.png); }
#menmob a:hover { background-color: #fff !important; color: #333; }
#menmob .mobssm { display: none; background-color: #333; }
#menmob .mobssm.ouvert { display: block; }
#menmob .mobssm a { border-top: none; padding: 4px 12px; }
#menu { display: none; }
#cntSmenu { display: none !important; }
.cntSsmenu { display: none !important; }
#content { padding: 12px 0 12px 0; }
#cnttit { font-size: 16px; }
#cnttit h1 { font-size: 20px; line-height: 23px; }
#titacc { font-size: 24px; }
#cnt3rayons .btn-accray > .titre { font-size: 14px; }
#cnt3rayons .btn-accray { font-size: 13px; padding: 12px; }
#cntPdsacc > .contenu { padding: 0; }
#cntPdsacc > .contenu > div { padding: 0 20px 20px 20px; }
#cntPdsacc > .contenu > div > a { font-size: 18px; }
#cntPdsacc > .contenu > img { display: none; }
#cnt-catray > a { font-size: 13px; line-height: 16px; padding: 10px 10px 10px 70px; }
#cntListe .cntCrits #critSup { display: block; text-align: right; margin-top: 6px; }
#cntArts { width: auto; }
.art-liste { width: 31%; margin: 8px 1% 24px 1%; }
.art-liste > a > .art-titre > h2 { font-size: 13px; }
.art-liste.lig6v { width: 31%; margin: 8px 1% 24px 1%; }
.art-liste.lig6v > a > .art-titre > h2 { font-size: 13px; }
#cntImgart { padding: 0 20px 0 0; }
#lstImgart > .imgars > img { border-radius: 10px; }
#frmAddpan #cntCde { margin: 5px 0; }
#frmAddpan .cntUnit { font-size: 11px; }
#frmAddpan .prix { font: bold 18px/1 Tahoma,Geneva,sans-serif; }
#frmAddpan .cntUnit .prixkg { font: bold 10px/18px Tahoma,Geneva,sans-serif; }
#cntDetart { font-size: 12px; }
.cnt-billet .titre { font-size: 18px; }
.cnt-billet .date { font-size: 11px; }
.cnt-billet .texte { font-size: 12px; line-height: 16px; }
#imgBillet { width: 30%; }
#txtBillet { width: 67%; }
#navBillet a { max-width: 40%; }
#panierListe .detart > .refart { display: block; }
#panierListe .detart > .priart { display: block; }
.chx_modliv { font-size: 13px; }
.chx_modliv .cntlib > .titliv { font-size: 16px; }
.chx_modliv .cntlib > .prxliv { font-size: 15px; }
#panierModreg .cntModreg .libModreg { font-size: 13px; }
#cntPiece #divPiece { margin: 20px; }
#pied_infos .contenu > .padding { padding: 0; }
#pied_infos #cnt-marque { width: 47%; margin: 0 1%; }
#pied_infos #cnt-marque strong { font-size: 16px; }
#pied_infos #cnt-liens { width: 47%; margin: 0 1%; }
#pied_infos .br900 { margin-top: 32px; border-bottom: 1px solid #28313d; }
#pied_infos #cnt-contact { width: auto; display: block; margin-top: 32px; }
#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; padding: 100px 0 0 0; }
h1 { font-size: 24px; line-height: 1.2em; }
h2 { font-size: 20px; line-height: 22px; }
h4 { font-size: 16px; }
h6 { font-size: 18px; line-height: 22px; }
#entete { height: 100px; }
#entete #cntLogo { top: 2px; left: 50%; transform: translateX(-50%); margin-left: -4px; white-space: nowrap; }
#entete #cntClient { right: auto; float: none; position: absolute; left: 8px; top: 60px; }
#entete #cntClient #compte, #entete #cntClient #panier { padding-left: 24px; background-position: 4px center; }
#entete #cntClient #compte a > strong, #entete #cntClient #panier a > strong { display: none; }
#entete #cntClient .displr { display: inline !important; }
#entete #cntRech { top: 64px; left: 180px; }
#entete #cntRech #frmRech { height: 28px; }
#entete #cntRech #frmRech > div:first-child { width: calc(100% - 30px); }
#entete #cntRech #recherche { width: 100%; }
#btnmob { top: 57px; }
#menmob { top: 100px; }
#cntPdsacc > .contenu > div > a { width: auto; }
#cnt3rayons .btn-accray { display: block; width: auto; }
#cnt-catray > a { width: 49%; }
.cnt-billet { padding: 12px 12px 12px 132px; height: 180px; }
.cnt-billet .image { height: 150px; width: 120px; }
.cnt-billet .texte { height: 64px; }
#autBillet { background: none; padding: 0; min-height: auto; }
#navBillet #btn-bilpre { float: none; max-width: none; display: block; text-align: center; margin-bottom: 8px; }
#navBillet #btn-bilsui { float: none; max-width: none; display: block; text-align: center; }
.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; }
#cntListe .cntCrits { text-align: center; }
#cntListe .cntCrits .titCrits { display: block; text-align: center; margin-bottom: 4px; }
#cntListe .cntCrits .critCheck { margin-right: 8px; }
#cntListe .cntCrits #critSup { float: none; text-align: center; }
.cntNavig { text-align: center; }
.cntNavig #chxtri, .cntNavig #chxnba { margin: 0 4px 6px 4px; float: none; display: inline-block; }
.cntNavig .cntTotres { clear: both; margin-right: 0; float: none; text-align: center; }
.cntNavig .cntTotres .nbrTotres { display: none; }
.art-liste { width: 48%; margin: 8px 1% 24px 1%; }
.art-liste > a > .art-titre > h2 { font-size: 12px; }
.art-liste > a > .cntcde { font-size: 10px; }
.art-liste.lig6v { width: 48%; margin: 8px 1% 24px 1%; }
.art-liste.lig6v > a > .art-titre > h2 { font-size: 12px; }
#lstImgart { float: none; display: block; width: auto; margin-bottom: 8px; }
#lstImgart > .imgars { width: 23.5%; margin-left: 2%; }
#cntImgart { padding: 0; }
#cntDesart { float: none; display: block; width: auto; }
.listeMinart { height: auto; max-height: 200px; }
#frmAddpan .cntUnit { font-size: 10px; padding: 0 8px; }
#frmAddpan .prix { font: bold 13px/1 Tahoma,Geneva,sans-serif; }
#frmAddpan .cntUnit .prixkg { font: bold 10px/18px Tahoma,Geneva,sans-serif; }
#frmAddpan #cntCde { margin: 4px; }
#frmAddpan #btnCde { padding: 8px; margin: 0 8px; }
.encombrant { background: none; padding: 0 12px 0 12px; }
#cntDetart tr > td { font-size: 13px; }
.btnCompte { font-size: 13px; padding: 6px 8px; }
.btnCompte img { margin-right: 12px; }
.cptCommande .outils { width: 42px; }
.cptCommande .datcde { font-size: 10px; width: 46px; }
.cptCommande .libcde .btnAffcde { font-size: 11px; }
.cptCommande .moncde { font: bold 12px/1 Tahoma,Geneva,sans-serif; width: 70px; }
#btnSavdoc { display: block; margin: 6px 0; }
.etapeCont { display: block; width: 100%; }
#panierVide { font-size: 28px; }
#panierListe #cntLivpay { display: block; margin-left: 20px; margin-top: 8px; }
#panierListe .detart > a { font-size: 13px; line-height: 15px; }
#cntPage #panierListe #estliv { font-size: 13px; }
#panierModreg .cntModreg { height: 25px; line-height: 20px; }
#panierModreg .cntModreg input { margin: 0 8px 0 0; }
#panierModreg .cntModreg img { width: 50px; height: 25px; }
.chx_modliv { font-size: 12px; }
.chx_modliv .cntlib > .titliv { font-size: 15px; }
.chx_modliv .cntlib > .prxliv { font-size: 14px; }
#panierRecap .libart { font-size: 12px; line-height: 15px; }
#cntSavpan { display: none; }
#pied_infos .lnk-infos > img { width: 80px; }
#pied_infos #cnt-marque { width: auto; display: block; margin: 0 10px; padding-bottom: 32px; border-bottom: 1px solid #28313d; }
#pied_infos #cnt-liens { width: auto; display: block; margin: 32px 10px 0 10px; }
#pied_infos #cnt-liens > div { margin-top: 0; }
#pied_infos #cnt-contact { margin: 32px 10px 0 10px; }
#pied_copy { font-size: 12px; }
}
/* ------------------------------------------------ */
/* 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; }
.encombrant { font-size: 13px; width: 180px; background: none; }
form table input, form table select { max-width: 160px; }
.cntCoords { padding: 6px 0; border: none; border-bottom: 1px solid #ccc; border-radius: 0; }
.cntCoords:last-of-type { border-bottom: none; }
#entete #cntRech { left: 158px; }
#entete #cntClient { left: 6px; }
#entete #cntClient #panier { margin-left: 8px; }
#entete #cntClient #compte a > strong, #entete #cntClient #panier a > strong { font-size: 11px; }
#cnt-catray > a { width: auto; display: block; padding: 16px 10px 16px 52px; height: 48px; font-size: 12px; margin: 0 0 6px 0; }
#cnt-catray > a > img { height: 32px; top: 8px; left: 8px; }
.cntCrits .critCheck { display: block; width: auto; }
.cntNavig .cntTotres .nbrTotres { display: none; }
.cntCrits .critCheck { width: 120px; }
.art-liste { float: left; width: 48%; margin: 8px 1% 24px 1%; }
.art-liste > a > .art-titre > h2 { font-size: 12px; }
.art-liste.lig6v { float: left; }
.art-liste > a > .art-prix { font-size: 14px; }
.art-liste > a > .art-prix > .cntapd { font-size: 10px; }
#cntArticle { display: block; }
#cntImgart { display: block; width: 100%; box-sizing: border-box; margin-bottom: 12px; }
#cntDesart { display: block; width: auto; float: none; }
a.tagart, a.tagart:link, a.tagart:visited { font-size: 10px; }
.listeMinart { max-height: 300px; }
.listeMinart > a { margin: 0px 1px; }
#frmAddpan { padding: 10px; font-size: 11px; text-align: center; }
#frmAddpan .cntUnit { float: none; display: inline-block; }
#frmAddpan .cntUnit:first-of-type { border-left: 1px dotted #d7d7d7; }
#frmAddpan #cntCde { float: none; display: inline-block; margin: 3px 8px; }
#frmAddpan .btnStyle { padding-right: 10px; margin-right: -10px; }
.sepLowres { display: block; clear: both; border-bottom: 1px dotted #d7d7d7; padding-top: 10px; margin-bottom: 10px; }
#cntDetart tr > td { font-size: 12px; }
#cntDetart tr > td:first-child { font-size: 11px; width: 96px; }
.art-liste.formapre { display: block; width: auto; }
.art-liste.formadis { display: block; width: auto; }
.cnt-billet { height: auto; padding: 8px 12px 42px 12px; }
.cnt-billet .image { position: relative; left: auto; top: auto; height: 180px; width: 100%; margin-bottom: 8px; }
.cnt-billet .titre { height: auto; white-space: normal; line-height: 18px; font-size: 15px; margin-bottom: 3px; }
.cnt-billet .texte { height: auto; }
#panierVide { font-size: 22px; background-size: contain; }
#panierModreg > .padding { padding: 10px 0; }
#panierModreg .cntModreg .libModreg { font-size: 12px; margin: 0; }
#panierModreg #chkcgv { margin-left: 0px; }
#cntPage #panierModreg #chknwl { margin-left: 0px; }
form > .inline { max-width: 100%; }
form table { display: block !important; width: auto !important; }
form table > tbody, form table tr, form table tr > td { display: block; }
form table tr > td { margin-bottom: 2px; }
.cntCoords { padding: 4px 6px; }
.cptCommande { display: block; }
.cptCommande .outils { display: block; width: auto; }
.cptCommande .datcde { display: block; width: auto; border-bottom: 1px dotted #ddd; }
.cptCommande .libcde { display: block; width: auto; }
.cptCommande .moncde { display: block; width: auto; padding: 6px 10px; border-top: 1px dotted #ddd; }
.cptCommande .lnkvid { display: block; margin: 0 auto; }
#pied_infos { font-size: 12px; }
#pied_infos .lnk-infos { width: 60px; }
#pied_infos .lnk-infos > img { width: 60px; }
#pied_copy { font-size: 11px; }
}
/* ------------------------------------------------ */
/* Format mobiles < 320px */
@media handheld, only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
#ir400 { display: none; }
#ir320 { display: block; }
#entete #cntLogo > #titsit { font-size: 12px; }
#entete #cntLogo > #titsit > strong { font-size: 17px; }
#panierListe .detart > .refart { display: none; }
#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);
}