/* > ARTICLES & BOUTIQUE
------------------------------------------------------------------------------------------------------- */
/* >>> articles commons -------------------- */
.article {
position:relative;
border:transparent 1px solid;
font-family: 'Montserrat', sans-serif;
-webkit-transition:border-color .3s;
-o-transition:border-color .3s;
transition:border-color .3s;
}
.article:hover {
border-color:#b6b6b6;
}
.article .article-content {
z-index: 0;
height: 100%;
display:block;
position: relative;
padding: 5% 5% 70px;
-webkit-transition:background-color .5s;
-o-transition:background-color .5s;
transition:background-color .5s;
}
.article .article-thumb {
margin-bottom: 20px;
overflow: hidden;
}
.article .article-thumb img {
display:block;
width:130%;
margin:-15%;
-webkit-transition:opacity .3s, -webkit-transform .7s;
transition:opacity .3s, -webkit-transform .7s;
-o-transition:opacity .3s, transform .7s;
transition:opacity .3s, transform .7s;
transition:opacity .3s, transform .7s, -webkit-transform .7s;
}
.article .article-thumb.th_loading img { visibility:hidden }
.article-thumb.th_loading { background:#fff url(../../images/common/th_preloader.gif) center no-repeat; background-size:auto; }
.article:hover .thumbnails-article img {
opacity:.6,;
-webkit-transform:scale(0.8);
-ms-transform:scale(0.8);
transform:scale(0.8);
}
.article:hover .thumbnails-article-alt img {
opacity:0;
}
/* --- */
.article .article-promotions {
position:absolute;
top:10px; left:10px;
}
.article-promotions .promo,
.article-promotions .nouveau {
display:block;
text-transform:uppercase;
font-weight:700;
color:#fff;
line-height: 10px;
font-size:9px;
padding:5px;
text-align:center;
margin-right:5px;
z-index:1;
float:left;
}
.article-promotions .promo { background-color:#e66f57; }
.article-promotions .nouveau { background-color:#39404a; }
.article .article-labels {
position:absolute;
right:10px; top:10px;
}
.article-labels div[class^="label-"] {
display: inline-block;
padding-top: 40px;
background-position: center 0;
background-repeat: no-repeat;
background-size: 40px auto;
min-width: 40px;
margin: 0 5px;
color: #444;
font-weight: 700;
font-size: 10px;
}
.article-labels .label-couleurs { background-image: url(../../images/shop/label_couleurs.png) }
.article-labels .label-ref { background-image: url(../../images/shop/label_ref.png) }
.article .article-labels > img,
.article .article-promotions > img {
float:right;
display:block;
margin-bottom:5px;
max-width:80px;
width:100%;
}
.article .article-infos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.article .article-infos h3 {
height: 70px;
padding-right: 15px;
font-weight: 400;
font-size: 12px;
color: #000;
margin: 0;
}
.article .article-infos .article-prix {
border-left: #ccc 1px solid;
min-width: 80px;
padding-left: 10px;
}
.article .article-infos .article-prix.disconnect {
min-width: 70px;
max-width: 70px;
}
.article-prix {
font-size:16px;
font-weight:700;
color:#39404a;
}
.article-prix em {
display:block;
font-style: normal;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.2em;
font-size:10px;
color: #8f8f8f;
}
.article-prix .prix-barre {
display:block;
margin-left:5px;
text-decoration: line-through;
font-weight: 300;
font-size:13px;
color:#8f8f8f;
}
.prix-ht {
font-weight:300;
font-size:10px;
color:#39404a;
}
/* --- */
.article-actions {
background:#fff;
left:0;
bottom:0;
position:absolute;
width:100%;
height:70px;
padding: 15px 20px;
text-align:center;
display:none;
}
.article-bouton {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
background: #39404a;
height: 34px;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
.article-bouton > span {
padding: 0 15px;
text-transform: uppercase;
line-height: 1.2em;
text-align: center;
font-weight: 700;
font-size: 12px;
color: #fff;
}
.article-bouton .ico-article-bouton {
display: block;
position: relative;
width: 34px; height: 34px;
overflow: visible;
margin: 0;
}
.article-bouton .ico-article-bouton::before {
content: "";
z-index: 1;
opacity: .5;
position: absolute;
width: 15px; height: 34px;
left: -15px; top: 0; /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.46) 100%); /* Chrome10-25,Safari5.1-6 */
background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)),to(rgba(0,0,0,0.46)));
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.46) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.46) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#75000000',GradientType=1 ); /* IE6-9 */
}
.article-bouton .ico-article-bouton svg {
display: block;
width: 28px;
height: 28px;
margin: 3px;
fill:#fff;
}
.article-bouton.bt-arrow svg {
width: 20px;
height: 20px;
margin: 7px;
}
.article-bouton.bt-disconnected > span { text-transform: none }
.article-bouton:hover {
background-color: #e66f57
}
.article:hover .article-actions {
display:block;
}
/* >>> articles slider ---------------------- */
.article-slider {
position: relative;
padding: 0 40px;
}
.article-slider .slider-nav {
position:absolute;
margin-top:-10px;
cursor:pointer;
display:block;
height:20px;
width:20px;
z-index:2;
top:50%;
-webkit-transition:opacity .3s linear;
-o-transition:opacity .3s linear;
transition:opacity .3s linear;
opacity:0;
}
.article-slider .slider-nav svg {
display: block;
width: 20px;
height: 20px;
fill: #b6b6b6;
-webkit-transition: fill .3s;
-o-transition: fill .3s;
transition: fill .3s;
}
.article-slider .slider-nav:hover svg { fill: #39404a; }
.article-slider .slider-prev { left:10px; }
.article-slider .slider-next { right:10px; }
.article-slider:hover .slider-nav { opacity:1 }
.article-slider .slider-nav.swiper-button-disabled,
.article-slider:hover .slider-nav.swiper-button-disabled { opacity:0 }
.article-slider .article {
width:25%;
margin-bottom: 1px;
}
@media screen and (max-width: 1200px) { .article-slider .article { width:33.33%; } }
@media screen and (max-width: 800px) { .article-slider .article { width:50%; } }
@media screen and (max-width: 480px) { .article-slider .article { width:100%; } }
/* >>> articles listes ---------------------- */
.article_list {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
width: 100%;
}
#categorie-list.article_list {
margin:0 -10px;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
.article_list .article { width:33.33%; }
.wp100 .article_list .article { width: 25%; }
/* >>> articles commandes -------------------- */
.article-commande {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100px;
margin: 20px 0;
}
.article-commande .article-bouton .ico-article-bouton::before {
display: none;
}
.article .article-commande { margin-left: 20px; }
.article .article-commande .quantite { width: 40px; }
.article .article-commande .quantite input[type='text'] { padding: 5px; }
.article .article-commande .quantite .bouton_plus,
.article .article-commande .quantite .bouton_minus { width: 15px; }
.coloris-ajout {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.quantite > label {
position: relative;
max-width: 60px;
padding: 0;
}
.quantite .champs_quantite {
height: 34px;
margin-bottom: 0;
}
.quantite .bouton_plus,
.quantite .bouton_minus {
position: absolute;
right: 0;
z-index: 2;
background-repeat: no-repeat;
background-size: 8px 6px;
display: block;
width: 20px;
height: 17px;
}
.quantite .bouton_plus {
top: 0;
background-image: url('data:image/svg+xml,');
background-position: left 50% top 70%;
}
.quantite .bouton_minus {
bottom: 0;
background-image: url('data:image/svg+xml,');
background-position: left 50% bottom 70%;
}
.quantite .bouton_plus:hover { background-image: url('data:image/svg+xml,'); }
.quantite .bouton_minus:hover { background-image: url('data:image/svg+xml,'); }
/* >>> articles coloris ---------------------- */
.article-prix .personnalisation strong {
display:inline-block;
margin-bottom:5px;
}
.article-prix .personnalisation p {
color: #444;
font-weight: 300;
font-size: .750em;
}
.article-prix .personnalisation input[type='text'] {
display: block;
font-size: 14px;
border: #ccc 1px solid;
height: 33px;
width: 100%;
padding: 5px 10px;
margin-bottom:30px;
}
/* >>> articles coloris ---------------------- */
.article_list .article.article--coloris { width:25%; }
.article_list .article.article--coloris:hover { border-color: #ebeae8 }
/**** (si on afiche pas les prix) ****/
.article.article--coloris .article-infos { display: block; }
.article.article--coloris .article-infos h3 {
text-align: left;
height: auto;
padding: 0;
}
/*************************************/
.article.article--coloris .article-commande--infos {
position: absolute;
left: 0; bottom: 0;
height: 60px; width: 100%;
padding: 0 20px 20px;
display: flex;
align-items: center;
justify-content: center;
}
.article.article--coloris .article-commande--infos .article-prix {
border-left: none;
padding-left: 0;
border-right: #ccc 1px solid;
text-align: right;
padding-right: 10px;
margin: 0;
}
.article.article--coloris .article-commande--infos .article-commande { margin: 0 0 0 10px; }
.article.article--coloris .article-infos .article-prix.disconnect {
max-width: 100%;
width: 100%;
border: none;
padding: 0;
border-top: #ccc 1px solid;
text-align: center;
padding-top: 10px;
margin: 10px 0 0;
}
/* >>> articles ouvrages ---------------------- */
.article_list .article.article--ouvrage { width:25%; }
.article.article--ouvrage .article-infos { display: block; }
.article.article--ouvrage .article-infos h3 {
text-align: center;
padding: 0;
}
/* >>> filtres recherches ------------------- */
.filter-container {
position:relative;
padding:10px 0;
z-index:1;
}
.filter-container .filter-header {
max-width:990px;
padding:0 20px;
margin:0 auto;
}
.filter-container .filter-options {
max-width:990px;
padding:0 10px;
margin:0 auto;
}
.bouton-filter-alt, .bouton-filter-close {
display:none
}
.article-bestseller-content {
padding:20px 0;
margin:0 auto 20px;
/*border:#e3e3e3 1px solid;*/
background-color:#f2f2f2;
}
.article-bestseller-content .article {
border-color:#f2f2f2;
}
.article-bestseller-content .article:hover .article-actions {
background-color:#f2f2f2;
}
/* >>> article listes ----------------------- */
.filter-categories {
text-align:center;
margin:10px auto 0;
max-width:990px;
}
.filter-categories li {
display:inline;
}
.filter-categories li a {
font-size:13px;
display:inline-block;
border:#1b1b1b 1px solid;
padding:5px;
margin:5px;
-webkit-transition:background-color .2s ease-out, color .2s ease-out;
-o-transition:background-color .2s ease-out, color .2s ease-out;
transition:background-color .2s ease-out, color .2s ease-out;
}
.filter-categories li a:hover, .filter-categories li.active a {
color:#fff;
background-color:#1b1b1b;
}
.filter-category__titre {
font-family: 'Sail', cursive;
font-size: 2.308em;
color: #39404a;
margin-bottom: 30px;
}
#filter-category h4 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 0.846em;
text-transform: uppercase;
color: #e66f57;
margin: 15px 0 5px;
}
#filter-category label {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 0.846em;
cursor: pointer;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#filter-category label:hover,
#filter-category label:focus {
color: #e66f57;
}
#filter-category label:hover input,
#filter-category input:focus {
border-color: #e66f57;
-webkit-box-shadow: #e66f57 0 0 5px;
box-shadow: #e66f57 0 0 5px;
}
#filter-category fieldset:not(:last-child) label:last-child {
/*margin-bottom: 40px;*/
}
#filter-category fieldset:last-child label:last-child {
margin-bottom: 0;
}
.filter-container .bt_filter {
display: none;
}
/* >>> article filtres ---------------------- */
.filter-header select::-ms-expand { /* for IE 11 */
display: none;
}
.filter-header select {
padding-right:40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='%23e66f57'%3E%3Cpath d='M1,11.6C1,11,1.2,10.5,1.7,10C2.5,9.2,4,9.2,4.8,10L20,25.2L35.2,10c0.9-0.9,2.3-0.9,3.2,0c0.9,0.9,0.9,2.3,0,3.2L21.6,30c-0.4,0.4-1,0.7-1.6,0.7c-0.6,0-1.2-0.2-1.6-0.7L1.7,13.2C1.2,12.8,1,12.2,1,11.6z'/%3E%3C/svg%3E") right center no-repeat;
background-size: 20px 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.filter-header p.right {
text-transform:uppercase;
font-size:16px;
font-weight:700;
float:right;
line-height:30px;
margin:0
}
.bouton-filter-alt {
display:none;
text-transform:uppercase;
font-family: 'Raleway', sans-serif;
text-align:center;
color: #fff;
padding:0 20px;
font-size:13px;
font-weight:700;
line-height:30px;
background-color:#eb7176;
-webkit-transition:border-color .3s linear, background-color .3s linear, color .3s linear;
-o-transition:border-color .3s linear, background-color .3s linear, color .3s linear;
transition:border-color .3s linear, background-color .3s linear, color .3s linear;
}
.bouton-filter-alt .icon-list {
display: inline-block;
margin: 8px 0;
vertical-align: middle;
}
.bouton-filter-alt:hover {
background-color:#99042f;
}
.bouton-filter-close {
width:30%;
float: right;
text-align:right;
padding:10px 20px 0;
height:30px;
}
.bouton-filter-close .icon-close {
color:#949494;
}
.bouton-filter-close .icon-close:hover {
color:#99042f;
}
.filter-options {
height:50px;
}
.filter-options .filter-content {
border-spacing:10px;
display:table;
width:100%;
}
.filter-options .option-filter {
display:table-cell;
width:30%;
}
.filter-options .filter-title {
font-family: 'Raleway', sans-serif;
text-transform:uppercase;
display:table-cell;
width:120px;
}
.filter-options .option-filter .option-group {
display:none
}
.filter-options .option-filter:hover .option-group {
display:block
}
.filter-options .option-filter .filter-label {
display:block;
background:#fff;
border:#e3e3e3 1px solid;
font-family: 'Raleway', sans-serif;
padding:10px 15px;
font-size:14px;
}
.filter-options .option-filter:hover .filter-label {
border-bottom:none
}
.filter-options .option-filter .filter-label:after {
font-family:'icomoon';
line-height:16px;
content: "\e905";
font-size:16px;
color:#e3e3e3;
float:right;
}
.filter-options .option-group {
padding:10px 0 0;
background:#fff;
border:#e3e3e3 1px solid;
border-top:none;
}
.filter-options .option-group label, .filter-options .option-group a {
display: block;
font-family: 'Raleway', sans-serif;
font-size:14px;
color:#82746a;
padding:5px 15px;
line-height:20px;
}
.filter-options .option-group a:hover, .filter-options .option-group label:hover {
background-color:#f2f2f2;
color:#eb7176
}
.filter-options .option-group a.active, .filter-options .option-group label.active {
font-weight:700;
color:#99042f
}
.filter-options .option-group input {
/*-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align:middle;
border:#dadada 1px solid;
width:17px; height:17px;
margin-right:20px;*/
display:none;
}
.filter-options .option-group input:checked {
/*background:url(../images/icones/form_checkbox_icon.png) center no-repeat;
border-color:#99042f;*/
}
.filter-options .option-group img {
vertical-align:middle;
margin-right:5px;
}
/* > fixed */
.filter-container.fixed {
position:-webkit-sticky;
position:sticky;
left:0;
top:60px;
width:100%;
height: calc(100vh - 60px);
overflow: auto;
z-index:2;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
.hidden_head .filter-container.fixed {
height: 100vh; top: 0;
}
/* > Article full */
#article-infos .article-choix {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
/*padding-right: 50px;
max-width: calc(100% - 140px);*/
width: 240px;
max-width: 100%;
}
#article-infos .article-tarifs {
width: 50%;
font-size: 24px;
}
#article-infos .article-tarifs-disconected {
width: 50%;
color: #444444;
font-size: 11px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
}
#article-infos .article-dispos,
#article-infos .article-non-dispos {
width: 50%;
border-left: 1px solid #c9c9c9;
}
#article-infos .article-dispo__inner {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 15px 0;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#article-infos .article-dispo__inner svg { margin-right: 5px; margin-left: 10px; }
#article-infos .article-dispos .svg-check { width: 16px; height: 13px; }
#article-infos .article-non-dispos .svg-error { width: 16px; height: 16px; }
#article-infos .article-dispos span {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 13px;
color:#444444;
}
#article-infos .article-non-dispos span {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
font-size: 13px;
color:#d50a05;
}
#article-infos .article-bouton {
width: 100%;
max-width: 220px;
}
#article-infos .article-bouton.bt-disconnected {
margin-top: 30px;
}
#article-infos .article-remises {
border: 1px solid #c9c9c9;
-ms-flex-negative: 0;
flex-shrink: 0;
min-width: 140px;
}
#article-infos .article-remises > .inner {
padding: 16px;
}
#article-infos .article-remises h4 {
font-size: 13px;
font-weight: 700;
}
#article-infos .article-remises li {
padding: 6px 4px;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
#article-infos .article-remises li:last-child {
padding-bottom: 0;
}
#article-infos .article-remises li:not(:last-child) {
border-bottom: 1px solid #c9c9c9;
}
#article-infos .article-remises li span {
font-size: 12px;
font-weight: 300;
}
#article-infos .article-remises li strong {
font-size: 12px;
font-weight: 700;
min-width: 30px;
}
#article-infos #options {
width: calc(50% + 1px);
}
#article-infos .article-quantite {
width: calc(50% + 1px);
}
/* 2025-08-04 - Trop d'options ...*/
/*#article-commande_fiche {
width: 100%;
max-width: inherit;
}*/
#article-commande_fiche {
display: flex;
flex-wrap: wrap;
gap: 1rem;
max-width:none !important;
}
#article-commande_fiche .option-group {
flex: 1 1 calc(25% - 1rem); /* 4 par ligne avec un petit écart */
box-sizing: border-box;
}
#article-commande_fiche .quantite,
#article-commande_fiche .list-options {
padding: 0 10px 10px 0;
}
#article-commande_fiche .quantite h4,
#article-commande_fiche .option-group h4 {
font-size: 12px;
margin: 0 0 5px;
}
/* >>> fancybox ajout panier / commande ----------------- */
.fancy-commande .fancybox-slide--iframe .fancybox-close-small,
.fancy-commande .fancybox-slide--image .fancybox-close-small,
.fancy-panier .fancybox-slide--iframe .fancybox-close-small,
.fancy-panier .fancybox-slide--image .fancybox-close-small {
right: 0;
}
/* >>> article fancybox ---------------------- */
main[id^="fancy_"] .titre-2 {
color: #5c636d;
}
main[id^="fancy_"] .article-slider .article {
max-width: 250px;
margin: 0 auto;
}
main[id^="fancy_"] .article .article-infos h3 { font-size: 10px; }
main[id^="fancy_"] .article .article-infos .article-prix { font-size: 12px; }
.ajout_success__resume {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;-ms-flex-align: center;align-items: center;
-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}
.ajout_success__titre {
font-weight: 400;
font-size: 17px;
font-family: 'Montserrat', sans-serif;
margin-bottom: 10px;
}
.ajout_success__details {
color: #4d4a47;
font-size: 12px;
font-weight: 400;
font-style: italic;
}
.ajout_success__details span {
display: inline-block;
min-width: 150px;
}
.ajout_success__resultat .article-prix {
font-size: 20px;
}
.ajout_success__resultat em {
margin-top: 10px;
display: block;
font-size: 12px;
font-weight: 400;
font-style: italic;
}
body.fixed_head.hidden_head .filter-container.fixed {
top: 0;
}
.filter-container.fixed .filter-options {
height:60px;
}
@media screen and (max-width: 990px) {
/* .article-slider .article, */
/* .article_list .article { width:33.33%; } */
/*.article_list .article { width:50%; }
.wp100 .article_list .article { width: 33.33%; }*/
.article_list .article.article--ouvrage,
.article_list .article.article--coloris { width:33.33333%; }
}
@media screen and (max-width: 840px) {
/* > listing sous-categories --------------------------------------------------- */
.article_list .article { width: 50% }
.wp100 .article_list .article { width: 33.33% }
}
@media screen and (max-width: 780px) {
/* .article-slider .article, */
.article_list .article,
.article_list .article.article--ouvrage,
.article_list .article.article--coloris { width:50%; }
/* > listing sous-categories --------------------------------------------------- */
.article_list .article,
.wp100 .article_list .article { width: 33.33% }
/* >>> filtres */
.filter-container {
padding: 0 !important;
height: 50px; top: 0;
border: #d4d4d4 1px solid;
background: #fff;
overflow: hidden;
}
.filter-container fieldset {
display: none;
overflow: hidden;
padding: 2%;
margin: 2%;
width: 29.33%;
background: #fff;
border: 1px solid #c1cee1;
}
.filter-container .bt_filter {
margin: 0;
padding: 10px 20px;
font-family: 'Sail', cursive;
font-size: 2.308em;
width: 100%; height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.filter-container .bt_filter::after {
content:'';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2339404a'%3E%3Cpath d='M4 22h-4v-4h4v4zm0-12h-4v4h4v-4zm0-8h-4v4h4v-4zm3 0v4h17v-4h-17zm0 12h17v-4h-17v4zm0 8h17v-4h-17v4z'/%3E%3C/svg%3E");
background-size: 18px 18px;
background-repeat: no-repeat;
background-position: center;
width: 18px;
height: 18px;
display: block;
background-size: cover;
-webkit-transition: all .3s linear;
-o-transition: all .3s linear;
transition: all .3s linear;
}
/* --- filtres fixé --- */
.filter-container.fixed {
position: fixed;
top: 59px; left: 0;
width: 100%; height: 50px;
border: none;
border-bottom: #d4d4d4 1px solid;
}
body.fixed_head .filter-container.fixed { top: 59px; }
body.hidden_head .filter-container.fixed { height: auto }
body.fixed_head.hidden_head .filter-container.fixed { top: 0 }
/* --- ouvert --- */
.filter-container.filter-open {
top: 0;
border: none;
z-index: 1005;
position: fixed;
height: auto; width: 100%;
bottom: 0; left: 0; right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
padding: 60px 2% 20px !important;
}
body.fixed_head .filter-container.filter-open { top: 60px; }
body.fixed_head.hidden_head .filter-container.filter-open { top: 0 }
.filter-container.filter-open .bt_filter {
position: absolute;
top: 0; left: 0;
}
.filter-container.filter-open .bt_filter::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2339404a'%3E%3Cpath d='M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z'/%3E%3C/svg%3E");
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.filter-container .filter-category__titre { display: none; }
.filter-container.filter-open fieldset { display: block; }
/* >>> article fancybox ---------------------- */
main[id^="fancy_"] .ajout_success__resume {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
main[id^="fancy_"] .ajout_success__actions > * {
margin-bottom: 10px;
}
}
@media screen and (max-width: 640px) {
.article_list .article,
.wp100 .article_list .article {
width: 50%;
}
/* filtres */
.filter-container fieldset { width: 46% }
}
@media screen and (max-width: 540px) {
.article .article-promotions .promo,
.article .article-promotions .nouveau {
font-size: 8px;
padding: 2px 5px 0;
line-height: 2.2em;
}
.article figure {
max-width: 140px;
margin: 0 auto;
}
/* >>> fancybox ajout panier / commande details */
.fancy-commande .fancybox-slide--iframe .fancybox-content,
.fancy-panier .fancybox-slide--iframe .fancybox-content {
margin: 10px;
width: 100%;
height: 100%;
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
}
}
@media screen and (max-width: 480px) {
/* >>> articles */
/* .article-slider .article, */
.article_list .article,
.wp100 .article_list .article,
.article_list .article.article--ouvrage,
.article_list .article.article--coloris { width:100%; }
.article_list,
#categorie-list.article_list {
max-width:300px;
margin: 0 auto;
}
}
@media screen and (max-width: 360px) {
/* filtres */
.filter-container fieldset { width: 96% }
}
/* > ACCUEIL > MODULE BOUTIQUE
- -------------------------------------------------------- */
#product-home {
padding: 20px 0;
}
.product_home__nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 20px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.product_home__nav li {
position: relative;
background: url(../../images/small_shadow_bottom.png) center bottom no-repeat;
text-align: center;
min-width: 160px;
}
.product_home__nav li.active::before{
content: "";
position: absolute;
width: 24px; height: 11px;
left: 50%; bottom: 0;
margin-left: -12px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='11px'%3E%3Cpath fill-rule='evenodd' fill='rgb(57, 64, 74)' d='M12.000,10.835 L0.233,0.883 L23.767,0.883 L12.000,10.835 Z'/%3E%3C/svg%3E");
}
.product_home__nav li a {
display: block;
padding: 20px 40px 30px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-size: 13px;
-webkit-transition: color .3s;
-o-transition: color .3s;
transition: color .3s;
}
.product_home__nav li a:hover { color: #e66f57; }
.product_home__nav li.active a { font-weight: 700; }
.product_home__slider {
overflow: hidden;
max-width: 1280px;
margin: 0 auto;
}
.product_home__slider .product_home__container {
-webkit-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.product_home__slider.product-1 .product_home__container { margin-left: 0; }
.product_home__slider.product-2 .product_home__container { margin-left: -100%; }
.product_home__slider.product-3 .product_home__container { margin-left: -200%; }
.product_home__container {
width: 300%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.product_home__content {
position: relative;
padding: 20px 0;
width: 33.33%;
}
.product_home__content h2 {
display: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
margin: 0 0 20px;
font-size: 14px;
}
@media screen and (max-width: 990px) {
.article-slider .slider-nav { opacity: 1 }
}
@media screen and (max-width: 540px) {
.product_home__nav { display: none }
.product_home__content h2 {
background: url(../../images/small_shadow_bottom.png) center bottom no-repeat;
padding-bottom: 20px;
display: block
}
.product_home__slider.product-1 .product_home__container,
.product_home__slider.product-2 .product_home__container,
.product_home__slider.product-3 .product_home__container {
margin: 0;
display: block;
width: 100%;
}
.product_home__content { width: 100%; }
}
/* > LISTING ARTICLES
- -------------------------------------------------------- */
/* >>> article recherche ---------------------- */
#list-recherche h1 strong {
font-size: 0.6em;
color: #99042f;
}
#list-recherche p.right {
text-transform: uppercase;
margin-top: 20px;
font-weight: 700;
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 360px) {
.article_list .article {
width:100%;
}
#article-coupcoeur .article-prix {
float: none;
text-align: center
}
#article-coupcoeur .link_plus {
display:block;
float: none;
margin:0 auto;
width: 150px;
}
#heading-fiche .article-promotions .promo,
#heading-fiche .article-promotions .nouveau { font-size:10px; }
}
/* > FICHE ARTICLE
- -------------------------------------------------------- */
/* >>> article fiche -------------------------- */
#heading-shop {
padding-top:40vh;
background:url(../../images/heading_shop.jpg) center no-repeat;
background-size:cover;
}
#heading-shop.flexslider { position: relative; }
#heading-shop.flexslider.loading .slides { opacity: 0 }
#heading-shop.flexslider #breadcrumb { position: relative }
#heading-shop.flexslider .slides,
#heading-shop.flexslider .slides li {
position: absolute;
z-index: 0;
top: 0; left: 0;
width: 100%; height: 100%;
}
#heading-shop.flexslider .slides li {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#heading-shop.flexslider .slides li:nth-child(1) { background-image: url(../../images/heading_fiche_1.jpg); }
#heading-shop.flexslider .slides li:nth-child(2) { background-image: url(../../images/heading_fiche_2.jpg); }
#heading-shop.flexslider .slides li:nth-child(3) { background-image: url(../../images/heading_fiche_3.jpg); }
#heading-shop.flexslider .slides li:nth-child(4) { background-image: url(../../images/heading_fiche_4.jpg); }
#heading-shop.flexslider .slides li:nth-child(5) { background-image: url(../../images/heading_fiche_5.jpg); }
#article-fiche {
background: #fff url(../../images/bg-decoration.png) 0 bottom repeat-x;
padding-bottom:200px;
}
#heading-fiche h1 {
text-transform: none;
margin-bottom:10px;
line-height:1.2em;
font-weight: 700;
font-size:20px;
}
#heading-fiche > .content_flex {
max-width: 1095px;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
#article-infos {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
.article-main {
position: relative;
}
.article-main .article-labels {
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
/* Zoom image ---- */
a.zoomable {
display: block;
background-position: 50% 50%;
position: relative;
overflow: hidden;
cursor: -webkit-zoom-in;
cursor: zoom-in;
border: #fff 1px solid;
-webkit-transition: border-color .3s;
-o-transition: border-color .3s;
transition: border-color .3s
}
a.zoomable:hover { border-color: #d4d4d4 }
a.zoomable img:hover { opacity: 0; }
a.zoomable img {
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
display: block;
/*width: 100%;*/
/* >>> plus grand >>> */
width: 130%;
margin: -15%;
}
/* Slider image ---- */
.heading_fiche__left {
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
}
.heading_fiche__fig {
width: 100%;
overflow: hidden;
}
.heading_fiche__fig > img {
display: block;
max-width: 100%;
margin: 0 auto;
}
.heading_fiche__left .gallery-thumbs {
width: 60px;
-webkit-box-flex: 0;-ms-flex: 0 0 60px;flex: 0 0 60px;
-webkit-align-self: end;-ms-flex-item-align: end;-ms-grid-row-align: end;align-self: end;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-self: stretch;
-ms-flex-item-align: stretch;
align-self: stretch;
}
.heading_fiche__left .gallery-thumbs.swiper-container-vertical > .swiper-wrapper {
-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
}
.heading_fiche__left .gallery-thumbs .swiper-slide {
margin-top: 16px;
max-height: 40px;
}
.heading_fiche__left .gallery-thumbs .swiper-slide img {
border: 1px solid transparent;
display: block;
width: 38px;
height: 38px;
}
.heading_fiche__left .gallery-thumbs .swiper-slide-thumb-active img {
border-color: #39404a;
}
.heading_fiche__left .gallery-thumbs .swiper-slide img {
display: block;
}
.heading_fiche__left .gallery-top .swiper-slide a {
display: block;
}
.heading_fiche__left .gallery-top .swiper-slide img {
width: 100%;
height: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
font-family: 'object-fit: cover; object-position: center;';
}
#article-description-full .content_block {
width: 80%;
}
.article-description-full .documents_list {
display: flex;
flex-wrap: wrap;
margin: 80px auto 30px;
justify-content: center;
}
#article-description-full .content_document {
position: relative;
display: flex;
justify-content: space-between;
width: 80%;
margin: 10px auto;
border: 1px solid #cecece;
border-radius: 0;
}
#article-description-full .content_document > a {
display: block;
width: 100%;
text-align: left;
font-weight: 700;
padding: 10px 40px 10px 15px;
transition: background-color .3s;
}
#article-description-full .content_document:hover > a { background-color: #f2f2f2; }
#article-description-full .content_document .bouton_1 {
position: absolute;
width: 32px;
height: 32px;
padding: 4px;
border: none;
border-radius: 50%;
background-position: center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23cecece' viewBox='0 0 24 24'%3E%3Cpath d='M12 21l-8-9h6v-12h4v12h6l-8 9zm9-1v2h-18v-2h-2v4h22v-4h-2z'/%3E%3C/svg%3E");
background-color: transparent;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;
top: 50%; right: 10px;
margin-top: -16px;
overflow: hidden;
text-indent: 99px;
}
#article-description-full .content_document:hover .bouton_1 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%2339404a' viewBox='0 0 24 24'%3E%3Cpath d='M12 21l-8-9h6v-12h4v12h6l-8 9zm9-1v2h-18v-2h-2v4h22v-4h-2z'/%3E%3C/svg%3E"); }
#heading-fiche .article-ref {
display: block;
font-size: 12px;
font-weight: 300;
font-family: 'Montserrat', sans-serif;
margin-bottom: 38px;
color: #444;
}
#heading-fiche .article-description {
color: #444444;
font-weight: 300;
margin-bottom: 44px;
font-size: 1em;
}
#heading-fiche .article-description-full h3 {
font-weight: 700;
font-size: 14px;
color: #828282;
margin-top: 0;
margin-bottom: 40px;
}
#heading-fiche .article-description-full p {
font-size: 12px;
color: #636363;
}
#heading-fiche .wp40 { padding-right:30px; }
#heading-fiche .article_photo { margin-top:-30vh; }
#heading-fiche .img-fiche { width:100%; overflow:hidden; }
#heading-fiche .article_photo .img-fiche > img {
display:block;
max-width:150%;
margin-left:-25%;
width:150%;
}
#cart-options { padding:0; margin:0 -10px; }
#cart-options .content_table { padding:0; }
#cart-options .content_table .conditionnement-col {
display:table-cell;
vertical-align:top;
padding:10px;
}
#cart-options .article-contenance {
margin:0;
display:block;
color:#7d8892;
font-size:13px;
}
#cart-options .article-prix {
margin:0;
line-height:1.2em;
min-height:40px;
display:block;
font-weight:700;
color:#2b343d;
}
#cart-options fieldset { padding:0 10px 0 0 }
#cart-options .quantite label { max-width: 100px; }
.link-panier {
margin:20px 0 0 10px;
display:inline-block;
background-color:#f0bdb2;
border:#f0bdb2 1px solid;
color:#fff;
text-transform:uppercase;
font-family: 'Spinnaker', sans-serif;
font-size:13px;
line-height:14px;
padding:8px 10px;
-webkit-transition:border-color .3s linear, background-color .3s linear, color .3s linear;
-o-transition:border-color .3s linear, background-color .3s linear, color .3s linear;
transition:border-color .3s linear, background-color .3s linear, color .3s linear;
}
.link-panier:hover {
background-color:#8a99a1;
border-color:#8a99a1;
color:#fff;
}
/* erreur panier */
.cart_error_output {
display:none;
position:fixed;
width:100%; height:100%;
left:0; top:0; z-index:9999;
background-color:rgba(0,0,0,.7);
}
.cart_error_output .cart_error_wrapper {
position:absolute;
left:50%; top:50%;
width:260px; height:170px;
margin:-75px 0 0 -130px;
background-color:#fff;
text-align:center;
padding:20px;
}
.cart_error_output .cart_error_wrapper p {
display:none;
font-size:1.2em;
font-weight:700;
}
.cart_error_output .cart_error_wrapper .close-error { padding:5px 10px; font-size:11px; font-weight:700; }
/* --- */
#heading-fiche {
padding-bottom: 40px;
}
#heading-fiche .article-caracteristiques {
background:url(../../images/fiche-ombre-droite.png) top left no-repeat;
padding-left:40px;
}
#heading-fiche .article-caracteristiques h3 {
letter-spacing:normal;
text-transform: uppercase;
margin:20px 0;
font-weight:500;
color: #2b343d;
font-size:13px;
}
#heading-fiche .article-caracteristiques p {
line-height:1.6em;
font-size:13px;
color:#7d8892;
}
/* --- */
#heading-fiche .article-promotions {
position:absolute;
top:-20px;
right:20px;
}
#heading-fiche .article-promotions .promo,
#heading-fiche .article-promotions .nouveau {
font-size:12px;
line-height:12px;
padding:10px 10px 7px;
}
#heading-fiche .article-label {
position:absolute;
top:0;
left:20px;
}
#heading-fiche .article-caracteristiques,
#heading-fiche .article_external_links { position:relative; bottom:20px; }
#heading-fiche .article_no_external_links {
width:100%;
border:solid 1px #99042f;
padding:10px;
color:#99042f;
}
/* --- */
#child_search_label {
position: relative;
margin: 15px 0 0 0;
height: 33px;
padding: 5px;
}
#child_search {
margin: 0;
width: 200px;
padding: 10px 40px 10px 10px;
background-position: 170px center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22px' height='19px' fill='%23787878'%3E%3Cpath d='M20.944,17.970 C20.301,18.900 19.024,19.133 18.094,18.489 L14.259,15.057 C13.663,14.646 13.354,13.975 13.377,13.301 C12.293,14.464 10.868,15.245 9.273,15.536 C7.313,15.893 5.334,15.466 3.700,14.335 C2.066,13.204 0.969,11.504 0.611,9.546 C0.254,7.585 0.680,5.605 1.812,3.970 C4.149,0.593 8.799,-0.253 12.177,2.084 C15.242,4.207 16.222,8.234 14.629,11.485 C15.251,11.224 15.990,11.274 16.589,11.689 L20.426,15.120 C21.356,15.765 21.588,17.040 20.944,17.970 ZM13.046,7.280 C12.798,5.914 12.033,4.728 10.894,3.939 C8.540,2.309 5.297,2.899 3.665,5.253 C2.036,7.611 2.626,10.852 4.981,12.481 C7.336,14.111 10.578,13.522 12.209,11.167 C12.998,10.027 13.295,8.646 13.046,7.280 Z'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
}
#child_search_empty {
display: none;
position: absolute;
right: 6px; top: 6px;
width: 31px; height: 31px;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23787878'%3E%3Cpath d='M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 11px 11px;
}
#child_search_label.filled #child_search_empty { display: block; }
#zone-scrolltop {
width: 100%;
padding: 10px 20px;
text-align: center;
background: #fff;
}
.scroll-top {
display: inline-block;
padding: 8px 10px;
width: 80px;
background: #39404a;
-webkit-transition: background-color .3s;
-o-transition: background-color .3s;
transition: background-color .3s;
}
.scroll-top:hover { background: #e77059 }
.scroll-top svg {
fill: #fff;
-webkit-transition: fill .3s;
-o-transition: fill .3s;
transition: fill .3s;
}
.fixed-scrolltop #zone-scrolltop {
width: 100%;
position: fixed;
left: 0; bottom: 0;
border-top: #e3e3e3 1px solid;
}
/* --- */
.description_article {
margin:20px 0 30px;
line-height:1.8em;
font-size:13px;
color:#7d8892;
}
.description_article ul,
.description_article p {
margin:0 0 20px;
font-size:13px;
}
/* #heading-fiche h3 {
font-weight:700;
font-size:14px;
margin:30px 0 15px;
} */
/* --- */
.empty-stock {
text-align:center;
padding: 40px 20px;
font-weight: 700;
font-size: 16px;
color: #b56767;
}
/* documentation */
#produit-documents {
padding: 40px 20px;
margin: 0 auto;
}
#produit-documents h2 { margin: 0 auto 20px; }
#produit-documents .documents_list {
text-align:center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#produit-documents .documents_list li {
border-left:#c9c9c9 1px solid;
padding: 0 10px;
width: 25%;
}
#produit-documents .documents_list li:first-child,
#produit-documents .documents_list li:nth-child(4n-3) { border:none }
#produit-documents .documents_list li > a {
min-height:150px;
position: relative;
font-size:12px;
display: block;
color: #929292;
padding: 70px 10px 10px ; line-height:16px;
}
#produit-documents .documents_list li > a::before {
content: "";
position: absolute;
top: 10px; left: 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='28' height='40' viewBox='0 0 28 40' fill='%2339404a'%3E%3Cpath d='M9.4,0H26c1.1,0,2,0.9,2,2.1v35.9c0,1.1-0.9,2.1-2,2.1H2c-1.1,0-2-0.9-2-2.1V10c0-0.5,0.2-1,0.6-1.4l7.3-7.9C8.3,0.2,8.8,0,9.4,0L9.4,0z M9.5,1.5l0,6.6c0,1.2-0.9,2.1-2,2.1h-6v27.7c0,0.3,0.3,0.6,0.6,0.6H26c0.3,0,0.6-0.3,0.6-0.6V2.1c0-0.3-0.3-0.6-0.6-0.6H9.5L9.5,1.5z M2.4,8.7h5.1c0.3,0,0.6-0.3,0.6-0.6l0-5.5L2.4,8.7L2.4,8.7z'/%3E%3Cpath d='M22.7,16.4c0.4,0,0.7,0.3,0.7,0.7s-0.3,0.7-0.7,0.7H5.3c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7H22.7L22.7,16.4z'/%3E%3Cpath d='M22.7,21.2c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7H5.3c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7H22.7L22.7,21.2z'/%3E%3Cpath d='M22.7,25.9c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7H5.3c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7H22.7L22.7,25.9z'/%3E%3Cpath d='M22.7,30.6c0.4,0,0.7,0.3,0.7,0.7s-0.3,0.7-0.7,0.7H5.3c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7H22.7L22.7,30.6z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center 5px;
text-align: center;
height: 60px;
width: 28px;
margin-left:-14px;
-webkit-transition:background-position .2s linear;
-moz-transition:background-position .2s linear;
-ms-transition:background-position .2s linear;
transition:background-position .2s linear;
}
#produit-documents .documents_list li > a strong {
text-transform:uppercase;
min-height: 40px;
line-height: 15px;
display:block;
color:#39404a;
font-size: 14px;
-webkit-transition:color .2s linear;
-moz-transition:color .2s linear;
-ms-transition:color .2s linear;
transition:color .2s linear;
}
#produit-documents .documents_list li > a:hover::before {
background-position: center 0;
}
#produit-documents .documents_list li > a:hover strong { color: #e66f57 }
@media screen and (min-width: 1280px) {
#produit-documents { max-width: 1280px; }
#produit-documents .documents_list li { width: 20%; }
#produit-documents .documents_list li:nth-child(4n-3) { border-left:#c9c9c9 1px solid; }
#produit-documents .documents_list li:first-child,
#produit-documents .documents_list li:nth-child(5n-4) { border:none }
}
@media screen and (max-width: 860px) {
#produit-documents .documents_list li { width: 33.33%; }
#produit-documents .documents_list li:nth-child(4n-3) { border-left:#c9c9c9 1px solid; }
#produit-documents .documents_list li:first-child,
#produit-documents .documents_list li:nth-child(3n-2) { border:none }
}
@media screen and (max-width: 640px) {
#produit-documents { padding: 30px 10px }
#produit-documents .documents_list li { width: 50%; }
#produit-documents .documents_list li:nth-child(3n-2) { border-left:#c9c9c9 1px solid; }
#produit-documents .documents_list li:first-child,
#produit-documents .documents_list li:nth-child(2n-1) { border:none }
}
@media screen and (max-width: 380px) {
#produit-documents .documents_list li,
#produit-documents .documents_list li:nth-child(3n-2) {
width: 100%;
border-left: none;
border-bottom: #c9c9c9 1px solid;
}
}
/* articles associes & module accueil */
.article_slider { position:relative; padding:0 60px; }
.article_slider .article_list {
-ms-flex-wrap:no-wrap;
flex-wrap:no-wrap;
}
.article_slider_nav {
display:block;
position:absolute;
top:50%;
z-index:10;
margin-top:-20px;
background-color:#fff;
width:40px; height:40px;
background-image:url(sprite_slider.png);
}
.article_slider_nav.nav_prev { left:20px; background-position:0 0 }
.article_slider_nav.nav_next { right:20px; background-position:-40px 0 }
.article_slider_nav.nav_prev:hover { background-position:0 -40px }
.article_slider_nav.nav_next:hover { background-position:-40px -40px }
.article_slider_nav.swiper-button-disabled { visibility:hidden; }
@media screen and (max-width: 990px) {
.heading_fiche__right,
.heading_fiche__left {
width: 100%;
}
.heading_fiche__right {
position: relative;
}
#article-infos.heading_fiche__right {
padding-top: 20px;
margin-top: 20px;
}
.heading_fiche__left {
-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
}
.heading_fiche__left .gallery-thumbs {
/* -webkit-align-self: center;-ms-flex-item-align: center;-ms-grid-row-align: center;align-self: center; */
margin: 0;
}
.heading_fiche__left .gallery-top {
max-width: 330px;
margin: 0;
}
#article-infos .article-choix {
max-width: 460px;
}
}
@media screen and (max-width: 780px) {
#heading-fiche .article_photo { }
#heading-fiche .article_infos { width:70%; padding:20px 0; }
#heading-fiche .article-caracteristiques {
position:static; clear:left;
width:100%; float:none;
border-top:#e3e3e3 1px solid;
background:none;
padding:30px 0;
}
#heading-fiche .article-caracteristiques h3 {
width:40%; float:left;
clear:left; margin:0;
text-align:right;
}
#heading-fiche .article-caracteristiques p {
margin:0 0 20px;
width:60%; float:left;
padding-left:20px;
}
#heading-fiche .article_options {
clear:both;
width:60%;
float:none;
margin:0 0 0 40%;
padding:0 0 80px;
}
.article_slider { padding:0 40px; }
.article_slider_nav.nav_prev { left:0; }
.article_slider_nav.nav_next { right:0; }
}
@media screen and (max-width: 540px) {
#article-fiche { padding-top:40px; }
#heading-fiche .article_photo {
margin:-35% auto 20px;
max-width:150px;
padding-right:0;
width:auto;
float:none;
}
#heading-fiche .article_infos {
float:none;
width:auto;
padding:0;
}
#heading-fiche #cart-options {
width:auto;
text-align:center;
margin:0 -10px 30px;
}
#article-infos .article-prix {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#article-infos .article-choix {
padding: 0;
margin: 0 auto;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
}
#article-infos .article-remises {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin: 0 auto 30px;
}
}
@media screen and (max-width: 480px) {
#heading-fiche h1 { font-size:24px; }
#heading-fiche .quantite label { margin: 0 auto; }
.article_list .article.article--coloris {
width: 100%;
}
}
@media screen and (max-width: 360px) {
#heading-fiche .article-caracteristiques h3,
#heading-fiche .article-caracteristiques p {
width:auto;
float:none;
margin:0 0 20px;
text-align:left;
padding:0;
}
}
/* > déco --------------------- */
.has-shadow_top::before {
content: '';
display: block;
width: 100%;
max-width: 995px;
height: 11px;
background: url('../../images/big_shadow_bottom.png') no-repeat;
background-size: 100% auto;
margin: 10px auto 30px;
}
.has-shadow_bottom:after {
content: '';
display: block;
width: 100%;
max-width: 995px;
height: 11px;
background: url('../../images/big_shadow_bottom.png') no-repeat;
background-size: 100% auto;
margin-top: 10px;
margin-bottom: 30px;
}