@charset "UTF-8"; /** * Media Querys * * Use : @media only screen and (max-width: mediaquery({key})) */ /** * Colors * * Use : color({key}) */ /** * Filter Color * * Use : filterColor({key}) */ /** * Wishlist * * Use : wishlist({key}) */ /* PX to REM */ /* Color */ /* Filter Color */ /* Wishlist */ /* Media Query */ /* * Styleguide's Classes */ /* * Placeholders */ /* Title Bigger */ /* Title Big */ /* Title Medium */ /* Title Small */ /* Title Smaller */ /* Title Smallest */ /* * Styleguide's Classes */ /* * Commons */ /* * Placeholders */ /* Button Primary */ /* Button Secondary */ /* Button Tertiary */ /* Button Grey */ /* Button Negative */ /* Button Wishlist (Commons) */ /* Button Wishlist (Primary) */ /* Button Wishlist (Secondary) */ /* Button Clicked Error */ /* Button Clicked Warning */ /* Button Clicked Success */ /* Button Medium (Par défaut | Doit être 1er de la liste pour ne pas écraser les styles précédents) */ /* Button Smaller */ /* Button Small */ /* Button Big */ /* * Type image */ /* * Icons */ /** * Gabarit */ .threecolumnpage #wrap .breadcrumb, .threecolumnpage #wrap #left { display: none; }.threecolumnpage #wrap #main { width: 100%; } .threecolumnpage #wrap #main .resultslist.suggestions { display: none; } .threecolumnpage #wrap #main .stickyCat { display: none !important; } .threecolumnpage #wrap #main .resultslist.standard { width: 100% !important; } .threecolumnpage #wrap #main .resultslist.standard .actions.actions-top .sort-options { display: none; }/** * Tendance */ .vb-tendance { padding: 0 10px; width: calc(100% - 20px); margin-top: 10px; } @media only screen and (min-width: 1025px) { .vb-tendance { border-top: 1px solid #dddddd; } } .vb-tendance .vb-tendance--title { margin: 0 0 12px; } .vb-tendance .vb-tendance--title a { color: #555555; text-align: center; font-weight: 500; margin: 13px 0 0; display: block; text-decoration: none; } .vb-tendance .vb-tendance--title a strong { text-transform: uppercase; } .vb-tendance .vb-tendance--menu { width: 100%; overflow: hidden; position: relative; margin: 0 auto 73px; } @media only screen and (max-width: 768px) { .vb-tendance .vb-tendance--menu { margin: 0 auto 15px; } } .vb-tendance .vb-tendance--menu .vb-title-big { display: none; } @media only screen and (max-width: 480px) { .vb-tendance .vb-tendance--menu .vb-title-big { display: block; text-align: center; font-weight: 500; margin: 20px 0 10px; font-size: 23px; } } .vb-tendance .vb-tendance--menu .vb-tendance--list { overflow-x: auto; overflow-y: hidden; width: 100%; } @media only screen and (max-width: 768px) { .vb-tendance .vb-tendance--menu .vb-tendance--list:before, .vb-tendance .vb-tendance--menu .vb-tendance--list:after { display: inline-block; height: 100px; pointer-events: none; position: absolute; top: 0; width: 30px; z-index: 2; } .vb-tendance .vb-tendance--menu .vb-tendance--list:after { background: -webkit-gradient(linear, right top, left top, from(white), to(rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(right, white 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(right, white 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to left, white 0%, rgba(255, 255, 255, 0) 100%); right: 0; } } .vb-tendance .vb-tendance--menu .vb-tendance--list ul { display: -webkit-box; display: -ms-flexbox; display: flex; overflow-x: auto; overflow-y: hidden; padding: 5px 0 0; margin: 0 auto; width: 100%; max-width: 1160px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } @media only screen and (max-width: 480px) { .vb-tendance .vb-tendance--menu .vb-tendance--list ul { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .vb-tendance .vb-tendance--menu .vb-tendance--list li { background: #FAC8B6; border-radius: 5px; width: 180px; } .vb-tendance .vb-tendance--menu .vb-tendance--list li:not(:last-child) { margin-right: 10px; } .vb-tendance .vb-tendance--menu .vb-tendance--list li.light { background: #FAC8B6; } .vb-tendance .vb-tendance--menu .vb-tendance--list li:hover, .vb-tendance .vb-tendance--menu .vb-tendance--list li.current { background: #E69E84; } .vb-tendance .vb-tendance--menu .vb-tendance--list li a { color: #fff; width: 185px; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; font-size: 16px; padding: 14px 0 14px 0; position: relative; text-decoration: none; -webkit-transition: color .1s ease-in-out; -o-transition: color .1s ease-in-out; transition: color .1s ease-in-out; font-weight: bold; text-align: center; } .vb-tendance .vb-tendance--menu .vb-tendance--list li a:after { background: currentColor; bottom: 0; content: ''; display: block; height: 4px; left: 50%; position: absolute; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: width .1s ease-in-out; -o-transition: width .1s ease-in-out; transition: width .1s ease-in-out; width: 0; } @media only screen and (max-width: 480px) { .vb-tendance .vb-tendance--menu .vb-tendance--list li { border-radius: 5px; width: inherit; } .vb-tendance .vb-tendance--menu .vb-tendance--list li:not(:last-child) { margin-right: 7px; } .vb-tendance .vb-tendance--menu .vb-tendance--list li a { font-size: 12px; width: auto; font-weight: inherit; white-space: nowrap; padding-left: 10px; padding-right: 10px; } } .vb-tendance .vb-tendance--container { margin: 0 auto 20px; } @media only screen and (min-width: 769px) { .vb-tendance .vb-tendance--container { position: relative; } } @media only screen and (max-width: 768px) { .vb-tendance .vb-tendance--container { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 15px auto; } } @media only screen and (max-width: 480px) { .vb-tendance .vb-tendance--container { margin: 15px auto 0; } } .vb-tendance .vb-tendance--container .vb-tendance--container-column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; position: relative; width: 380px; } @media only screen and (min-width: 769px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column { float: left; } } @media only screen and (max-width: 1280px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column { width: 31.5%; } } @media only screen and (max-width: 768px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column { width: 100%; } } .vb-tendance .vb-tendance--container .vb-tendance--container-column .vb-tendance--container-picture { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .vb-tendance .vb-tendance--container .vb-tendance--container-column .vb-tendance--container-picture.vb-tendance--container-picture1::after { top: 50%; left: 20%; } .vb-tendance .vb-tendance--container .vb-tendance--container-column .vb-tendance--container-picture.vb-tendance--container-picture2 { bottom: 0; position: absolute; right: 0; top: 0; width: 50%; } .vb-tendance .vb-tendance--container .vb-tendance--container-column .vb-tendance--container-picture.vb-tendance--container-picture2::after { top: 10%; left: 70%; } @media only screen and (min-width: 769px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-hero { width: 794px; } } @media only screen and (max-width: 1280px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-hero { width: 65.5%; } } @media only screen and (max-width: 768px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-hero { width: 100%; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-hero .vb-tendance--container-picture img { height: auto; width: 100%; } } @media only screen and (min-width: 769px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main { bottom: 0; position: absolute; right: 0; } } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description { text-align: center; } @media only screen and (max-width: 480px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description { margin-top: 15px; } } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description h3 { text-align: center; font-weight: 500; margin: 10px 0 20px; font-size: 26px; } @media only screen and (max-width: 480px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description h3 { display: none; } } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description p { color: #555555; font-size: 16px; min-height: 20px; line-height: 24px; text-align: center; margin: 10px auto 20px; font-style: italic; max-width: 350px; } @media only screen and (max-width: 768px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description p { min-height: inherit; width: inherit; } } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description p .link { display: block; font-size: 16px; color: #E69E84; margin-top: 60px; font-style: initial; } @media only screen and (max-width: 480px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description p .link { margin-top: 0px; } } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description p .link.first { margin-top: 22px; margin-bottom: 22px; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description p .link.second { margin-top: 0; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description > img { margin: 0 auto; max-width: 100%; } @media only screen and (max-width: 768px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--description { height: inherit; } } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--container-picture img { width: auto; } @media only screen and (max-width: 768px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main .vb-tendance--container-picture { display: none; } } @media only screen and (max-width: 768px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main > a img { height: auto; width: 100%; } } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (min-width: 769px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares { width: 794px; margin: 22px auto 0; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares .vb-tendance--container-picture { overflow: hidden; width: calc(50% - 11px); } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares .vb-tendance--container-picture:first-child { margin-right: 22px; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares .vb-tendance--container-picture:nth-child(3) { display: none; } } @media only screen and (max-width: 1280px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares { width: 65.5%; } } @media only screen and (max-width: 768px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares { width: 100%; margin-top: 20px; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares a:first-child { margin-bottom: 0; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares .vb-tendance--container-picture { margin: 0; width: calc(50% - 11px); -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares .vb-tendance--container-picture img { width: 100%; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares .vb-tendance--container-picture:nth-child(3) { margin-top: 22px; width: 100%; display: block; } } @media only screen and (max-width: 480px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto 0; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares a:first-child { margin-bottom: 20px; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares .vb-tendance--container-picture { width: 100%; margin-bottom: 20px; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares .vb-tendance--container-picture:nth-child(3) { margin: 0 0 20px; width: 100%; } } @media only screen and (min-width: 769px) { .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-hero { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-main { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .vb-tendance .vb-tendance--container .vb-tendance--container-column.vb-tendance--container-column-squares { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } }.vb-tendance-hotspot { position: absolute; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: #fff; font-size: 0; height: 30px; border-radius: 5px; cursor: pointer; overflow: hidden; } .vb-tendance--container-picture:hover .vb-tendance-hotspot, .vb-tendance-hotspot:hover { background-color: #008498; } .vb-tendance--container-picture:hover .vb-tendance-hotspot .vb-tendance-hotspot-label, .vb-tendance-hotspot:hover .vb-tendance-hotspot-label { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .vb-tendance-hotspot--reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .vb-tendance--container-picture:hover .vb-tendance-hotspot--reverse, :not(.vb-tendance--container-picture) .vb-tendance-hotspot--reverse:hover { margin-left: -100px; } .vb-tendance-hotspot--reverse .vb-tendance-hotspot-label { width: 88px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding-left: 12px; padding-right: 0; }.vb-tendance-hotspot-plus { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 32px; min-height: 30px; font-size: 28px; font-weight: 200; line-height: 1; border-radius: 5px; background-color: #008498; }.vb-tendance-hotspot-label { display: none; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; font-size: 13px; padding-right: 12px; }.vb-tendance-hotspot--1 { left: 400px; top: 375px; } @media only screen and (max-width: 768px) { .vb-tendance-hotspot--1 { left: 42.83802%; top: 72.91667%; } }.vb-tendance-hotspot--2 { left: 220px; top: 205px; } @media only screen and (max-width: 768px) { .vb-tendance-hotspot--2 { left: 57.48663%; top: 52.08333%; } }.vb-tendance-hotspot--3 { left: 109px; top: 157px; } @media only screen and (max-width: 768px) { .vb-tendance-hotspot--3 { right: auto; left: 33.78378%; top: 20.72539%; } }.vb-tendance-hotspot--4 { left: 86px; top: 80px; } @media only screen and (max-width: 768px) { .vb-tendance-hotspot--4 { left: 25.64103%; top: 17.85714%; } }.vb-tendance-hotspot--5 { left: 300px; top: 50px; } @media only screen and (max-width: 768px) { .vb-tendance-hotspot--5 { left: 76.92308%; top: 11.90476%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .vb-tendance--container-picture:hover .vb-tendance-hotspot--5, :not(.vb-tendance--container-picture) .vb-tendance-hotspot--5:hover { margin-left: 0; } .vb-tendance-hotspot--5 .vb-tendance-hotspot-label { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-right: 12px; padding-left: 0; } }.yt-popin { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000; display: none; }.yt-popin-overlay { display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1001; }.yt-popin-container { position: fixed; font-size: 0; background: rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.5); left: 50%; top: 12%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 1002; }.yt-popin-close { background: #838383; cursor: pointer; font-family: Arial, sans-serif; color: #FFF; display: inline-block; font-size: 30px; line-height: 36px; width: 36px; height: 36px; text-align: center; text-decoration: none; position: absolute; right: 0; top: 0; -webkit-transition: background .2s ease-in-out; -o-transition: background .2s ease-in-out; transition: background .2s ease-in-out; }.yt-popin-close:hover { background: #959595; }.yt-popin-close:active { background: #000; }@media only screen and (max-width: 1080px) { .yt-popin-close { right: 5px; top: 5px; z-index: 1002; } .yt-popin-container { left: 0; width: 100%; -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } .yt-popin-iframe { width: 100%; position: relative; padding-top: 56.25%; } .yt-popin-iframe iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } }