@charset "utf-8";
/*++++++++ Typographies +++++++++++++*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/*++++++++ Body et html ++++++++*/
body {
max-width: 100%;
overflow-x: hidden !important;
margin: 0;
font-family: var(--font-family-sans-serif);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #101010;
text-align: left;
background-color: var(--black);
}
section{z-index: 1;}
button:focus {
outline: none;
}
.preloader {
background-color: #000;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s;
margin: 0 auto
}
.preloader .preloader-circle {
width: 100px;
height: 100px;
position: relative;
border-style: solid;
border-width: 1px;
border-top-color: var(--secondary);
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
z-index: 10;
border-radius: 50%;
-webkit-box-shadow: 0 1px 1px 0 rgba(var(--pink),1);
box-shadow: 0 1px 1px 0 rgba(var(--pink),1);
background-color: #000;
-webkit-animation: zoom 2000ms infinite ease;
animation: zoom 2000ms infinite ease;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
.preloader .preloader-circle2 {
border-top-color: #fff;
}
.preloader .preloader-img {
position: absolute;
top: 50%;
z-index: 200;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
display: inline-block;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding-top: 6px;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
.preloader .preloader-img img {
max-width: 55px
}
.preloader .pere-text strong {
font-weight: 800;
color: var(--primary);
text-transform: uppercase
}
@-webkit-keyframes zoom {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
}
@keyframes zoom {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
}
/*++++++++ TOP +++++++++++++*/
header {
z-index: 2;
display: block;
position: relative;
}
.header-content {
position: absolute;
top: 0;
z-index: 1;
width: 100%;
left: 0;
bottom: 0;
}
.langues {
top: 5px;
right: 5px;
}
.header {
height: 100vh;
}
.header img {
/*min-height: 100vh;*/
width: 100%;
display: flex;
}
.navbar-brand {
display: block;
max-width: 18%;
margin: 0 auto;
z-index: 2;
position: relative;
}
.sticky .navbar-brand {
display: none;opacity:0;
}
.btn{
font-size: 0.95em;
letter-spacing: 0.2em;
font-family: var(--font-family-serif);font-weight: 600;}
.btn-sm, .btn-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.60em !important;
}
.sticky.is-sticky .navbar-brand{
max-height: 120px;
display: block;
max-width: 180px;
height: 100%;
transition: all 0.8s;
opacity: 1;
float: none;
margin-top: -80px;
overflow-y: hidden;
}
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
width: 100%;
max-height: 80px;
background: #000 !important;
}
.top-bar {
background: transparent !important;
display: flex;
justify-content: center;
padding-top: .5rem;
padding-bottom: 0.5rem;
z-index: 6;
position: relative;
}
/*++++*/
nav {
background: transparent !important;
}
.navbar-nav{background: transparent;
width: 100%;
justify-content: center;}
.navbar{z-index: 2;}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
text-align: center;cursor: pointer; transition: all 0.8s;background: rgba(0,0,0,0.7);
margin-left: 0.2em;
margin-right: 0.2em;
}
.navbar-dark .navbar-nav .nav-link::after{content:'';display: block; height:2px; width:10px; background: transparent;margin-left:auto; margin-right:auto;opacity:0; transition: all 0.8s;}
.navbar-dark .navbar-nav .nav-link:hover::after{content:'';display: block; height:2px; width:60px; background: var(--primary);margin-left:auto; margin-right:auto;opacity:11;}
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
color: var(--primary);
font-weight: 600;
}
.nav-item {font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #fff;
}
.nav-item a{
color: #fff;
}
.navbar-toggler {
color: transparent;
border-color: transparent !important;
position: absolute;
top: 0;
left: 0;
float: left;
align-self: center;
border: none;
box-shadow: none;
}
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 2.5em;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0;
color: #fff !important;
}
.navbar-dark .navbar-toggler-icon {
background-image: none;
}
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
top: 95%;
}
.dropdown-menu{border-radius: 0;left:15px;}
.dropdown-item, .dropdown-menu h3 {
font-family: var(--font-family-sans-serif);
color: var(--primary) !important;
font-size: 1.1em;
font-weight: 500;
text-transform: none;
letter-spacing: 0.1em;
margin-bottom: 0.6rem;
margin-top: 0.6rem;
}
.dropdown-item.active, .dropdown-item:active {
color: #fff !important;
text-decoration: none;
background-color: var(--primary);
}
.dropdown-menu p{
font-family: var(--font-family-sans-serif);
font-size: 0.8em;
font-weight: 500;
text-transform: none;
letter-spacing: 0.1em;
}
.nav.nav-pills a {
color: var(--primary);font-family: var(--font-family-serif);
font-weight: 600;
}
.nav.nav-pills a:hover{text-decoration:none;color: var(--secondary);}
.nav.nav-pills li {
padding-bottom: 1.2rem;
display: block;
width: 100%;
}
.dropdown-menu .tab-content {
font-family: var(--font-family-sans-serif);
text-transform: none;
font-size: 0.9em;
letter-spacing: 0;
line-height: 1.4em;
}
.dropdown-toggle::before {
display: inline-block !important;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "+ ";    
float: right;
font-size: 2em;
line-height: 0.8em;
font-weight: 300;
}
.dropdown-toggle::after{
border-top: none;
border-right: none;
border-bottom: 0;
border-left: none;
}
/*++++*/
/*++++++++ Styles de texte +++++++++++++*/
a .titre-actu {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transition: opacity 1s ease-in;
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.15s, transform 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.2s;
display: block;
position: absolute;
text-align: center;
max-width: 100%;
left: 0;
padding: 1rem 3rem;
color:#000;
}
a:hover .titre-actu{
text-decoration: none;
opacity: 0.9;
transform: translate3D(0, -40%, 0);
-webkit-transform: translate3D(0, -40%, 0);
-moz-transform: translate3D(0, -40%, 0);
-ms-transform: translate3D(0, -40%, 0);
-o-transform: translate3D(0, -40%, 0);
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1), transform 1s cubic-bezier(0.59, 0.01, 0.28, 1);
background:#000;color:#fff;
}
a .titre-actu::before{
content:'+';
background: var(--primary);
padding:0.5rem;
display:none;
position: relative;
margin: -1.8rem auto 10px;
font-size: 3em;
color: #fff;
font-weight: 100;
width: 39px;
}
a:hover .titre-actu::before{
display:block;
}
.liste-stylisee{list-style-type: none;line-height: 1.8em;}
.liste-stylisee li::before{
content: '';
display: inline-block;
border: solid 1px var(--secondary);
width: 1.2rem;
margin-right: 0.4rem;
vertical-align: middle;
margin-left: -1.5rem;
}
.titre::after {
content: '';
display: inline-block;
border: solid 3px;
width: 2em;
}
.intro {
position: absolute;
width: 55%;
bottom: 10%;
left: 22.5%;
color: #fff;
text-align: center;
background: rgba(0,0,0,0.8);
font-weight: 300;
padding: 1.2rem;
right: auto;
z-index: 4;
font-size: 0.85em;
}
.ass-prct {
display: block;
font-size: 3em;
color: var(--primary);
font-family: var(--font-family-serif);letter-spacing: 0;
margin-bottom:2rem;
}
.serif{ font-family: var(--font-family-serif);letter-spacing: 0;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 1.20rem}
h1, .h1{
font-size: 2.5em;
line-height: 1.4em;
font-weight: 600;white-space:normal;
font-family: var(--font-family-serif);
}
h2, .h2{
font-size: 2.5em;
line-height: 1.2em;
font-weight: 400;
font-family: var(--font-family-serif);
}
h3, .h3 {
font-family: var(--font-family-sans-serif);
font-size: 1.6em;
line-height: 1.4em;
font-weight: 400;
letter-spacing: 0.15em;
}
h4, .h4 {
font-size: 1.2em;
line-height: 1.2em;
font-weight: 400;letter-spacing: 0.3em;
}
h5, .h5 {
font-size: 0.9em;
line-height: 1.2em;
font-weight: 400;letter-spacing: 0.3em;
}
.title{text-transform: uppercase;font-size:2.8em; text-align: center;}
.title::after {
content: '';
display: inline-block;
height: 2px;
width: 0.75em;
background: var(--primary);
margin-right: auto;
vertical-align:middle;
margin-left:5px;
}
.title::before {
content: '';
display: inline-block;
height: 2px;
width: 0.75em;
background: var(--primary);
margin-left: auto;
vertical-align:middle;
margin-right:5px;
}
h4.description {
background: rgba(255,255,255,0.8);
padding: 1rem;
border-radius: 2.2rem;
border: dashed 2px #fff;
font-size: 1.2em;
line-height: 1.45em;
}
.copyright {
color: #fff;font-size:0.8em;letter-spacing:0.15em; padding-top:1rem;}
a {
color: var(--primary);
}
hr {
color: inherit;
border-color: inherit;
border-style: dotted;
}
.text-gray {
color: var(--gray) !important;
}
.fa, .fab, .fad, .fal, .far, .fas{vertical-align: middle;}
b, strong {
font-weight: 900;
}
.text-fluid {
font-size: 1.2em;
}
.blockquote {
margin-bottom: 1rem;
font-size: 1.05rem;
padding-left: 0.75em;
border-left: solid 3px #efefef;
font-weight: 500;
}
/*++++++++ 
+++++ STYLES AUTRES CONTENUS DIVERS
(tableaux, sliders, galleries, etc.)+++++++++++++*/
/*+++++++ FLECHES +++++*/
.print{display:none;}
.container-lg{max-width:1600px;}
.btn-down {
position: absolute;
bottom: 5px;
left: 0;
z-index: 10;
width:100%; text-align: center;
}
.fleche {
display: inline-block;
width: 25px;
height: 25px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
}
.fleche-white {
display: inline-block;
width: 15px;
height: 15px;
border-top: 2px solid #fff !important;
border-right: 2px solid #fff !important;
}
.fleche-bottom {
transform: rotate(135deg);
}
.btn-block-menu {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
transition: all 1.5s;
opacity: 0;
left:0;
top:0;
}
.btn-block-menu:hover{
opacity: 0.5;
}
.btn-block-menu.active {
opacity: 0.5;
border: solid 2px var(--secondary);
}
section{position:relative;width: 100%;min-width: 100vw;max-width: 100vw;overflow: hidden;}
.container-small {
max-width: 50%;
margin-left: auto;
margin-right: auto;
background: rgba(255,255,255,0.8);
}
.ph-btn {
max-height: 150px;
overflow: hidden;
}
.block-oeno {
background: rgba(0,0,0,0.8);
color: #fff !important;
padding: 1.5rem;
margin: 0 10px 10px;
}
.block-oeno h3{font-size: 1.3em;font-weight: 600;}
.block-image {
position: relative;
width: 100%;
border: solid 2px transparent;
cursor:pointer;
}
.image {
display: block;
width: 100%;
height: auto;
}
.block-image .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 2s;
background-color: rgba(0,0,0,0.8);
text-align: center;
padding-top:30%;
padding-left:2%;
padding-right:2%;
color:#fff !important;
font-size:0.8em;
min-height: 222px;
min-width: 200px;
cursor: default;
}
.block-image:hover .overlay {
opacity: 1;border-color: var(--primary);border-radius:0;
}
section#gamme .block-image .overlay{padding-top:80%;}
/*.block-image:hover .image {
-webkit-animation: kenburns-top 5s ease-out both;
animation: kenburns-top 5s ease-out both;
}*/
.block-image .overlay.div-actu {
background: transparent;
}
.block-image .overlay.div-actu .text a {
background: rgba(0,0,0,0.8);
display: block;
color: #fff;
padding: 1.5rem;
margin-top: 25%;
position:relative;
}
.block-image .overlay.div-actu .text a::before {
content: '+';
background: var(--primary);
padding:0.5rem;
display:none;
position: absolute;
font-size: 3em;
color: #fff;
font-weight: 100;
width: 39px;
left: 45%;
height: 39px;
top: -29px;
line-height: 1em;
}
.block-image .overlay.div-actu .text a:hover{text-decoration: none;}
.block-image .overlay.div-actu .text a:hover::before {
display:block;
}
/**
* ----------------------------------------
* animation kenburns-top
* ----------------------------------------
*/
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
.block-image .overlay .text{
cursor:default;
transform: translate3d(0, -40%, 0);
-webkit-transform: translate3d(0, -40%, 0);
-moz-transform: translate3d(0, -40%, 0);
-ms-transform: translate3d(0, -40%, 0);
-o-transform: translate3d(0, -40%, 0);
transition: opacity 0.2s ease-in;
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.15s, transform 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.2s;
}
.block-image:hover .overlay .text{
opacity: 1;
transform: translate3D(0, -40%, 0);
-webkit-transform: translate3D(0, -40%, 0);
-moz-transform: translate3D(0, -40%, 0);
-ms-transform: translate3D(0, -40%, 0);
-o-transform: translate3D(0, -40%, 0);
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1), transform 1s cubic-bezier(0.59, 0.01, 0.28, 1);
}
.video-content::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
}
#oenotourisme{
padding-top:10%;
padding-bottom:10%;
}
.bg-image{
background-size: cover;
position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 0;
}
.kenburns-top {
-webkit-animation: kenburns-top 20s ease-in-out infinite alternate both;
animation: kenburns-top 20s ease-in-out infinite alternate both;
}
/**
* ----------------------------------------
* animation kenburns-top
* ----------------------------------------
*/
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
.bounce-animate {
animation-name: float-bob;
animation-duration: 2s;
animation-iteration-count: infinite;
-moz-animation-name: float-bob;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear
}
@-webkit-keyframes float-bob {
0% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
50% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
100% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
}
.heartbeat {
animation: heartbeat 1s infinite alternate
}
@-webkit-keyframes heartbeat {
to {
-webkit-transform: scale(1.03);
transform: scale(1.03)
}
}
.rotateme {
-webkit-animation-name: rotateme;
animation-name: rotateme;
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear
}
@keyframes rotateme {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes rotateme {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg)
}
}
.date {
display: block;
position: absolute;
top: 0;
left: 15px;
z-index: 1;
background: var(--secondary);
padding: 1rem;
font-size: 0.8em;
font-weight: 600;
color:#fff;
}
.photo-actu {
max-width: 100%;
overflow: hidden;
text-align: center;
position: relative;
display: flex;
align-content: center;
justify-items: center;
justify-content: center;
/*height: 100%;*/
z-index: 0;
}
.photo-actu img {
position: relative;
margin: 0 auto;
display: flex;
align-self: center;
justify-self: center;
filter: grayscale(0);
transition: 0.5s ease-in-out;
min-height: 100%;
width: 100%;
}
#actualites .photo-actu img {
position: relative;
margin: 0 auto;
display: flex;
align-self: center;
justify-self: center;
filter: grayscale(0);
transition: 0.5s ease-in-out;
min-height: 100%;
width: 100%;
max-height: 300px;
}
#actualites a .titre-actu {
padding: 1rem;
font-size: 1em;
}
.page-item.disabled .page-link {
color:  var(--light);
border-color:transparent;
}
.page-link {
line-height: 1.25;
color: var(--primary);
border: none;
}
.page-link:hover {
z-index: 2;
color:  var(--secondary);
background-color: var(--light);
border-color: transparent;
}
/*+++++ PANIER TOP +++*/
li.cart-icon, li.compt-icon {position: relative;
}
li.cart-icon:hover .cart-hover,li.compt-icon:hover .compt-hover {
opacity: 1;
visibility: visible;
top: 60px;
}
li.cart-icon.nav-item a.nav-link{color: var(--secondary);
position: relative;
display: inline-block;
}
li.compt-icon.nav-item a.nav-link{color: var(--white);
position: relative;
display: inline-block;
}
li.cart-icon a span,li.compt-icon a span {
position: absolute;
right: 5px;
top: -1px;
height: 20px;
width: 20px;
background: var(--primary);
color: #ffffff;
border-radius: 50%;
font-size: 0.7em;
font-weight: 700;
text-align: center;
}
li.cart-icon .cart-hover {
position: absolute;
left: -200%;
top: 100px;
width: 320px;
background: #ffffff;
z-index: 99;
text-align: left;
padding: 30px;
opacity: 0;
visibility: hidden;
-webkit-box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
li.compt-icon .compt-hover {
position: absolute;
right: -110px;
top: 40px;
width: 220px;
background: #ffffff;
z-index: 99;
text-align: left;
padding: 10px 15px;
opacity: 0;
visibility: hidden;
-webkit-box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color:#000;
}
.compt-hover .form-control {
color: #000;
border-bottom: solid 1px #000;
padding: 2px;
}
.compt-hover label{text-transform: none;font-size: 85%;}
li.cart-icon .cart-hover .select-items table {
width: 100%;
}
li.cart-icon .cart-hover .select-items table tr td {
padding-bottom: 20px;
}
.si-pic img {
border: 1px solid #ebebeb;width:100%; height:auto;max-width: 50px;
}
.si-pic {max-height: 150px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text {
padding-left: 18px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text .product-selected p {
color: #e7ab3c;
line-height: 30px;
margin-bottom: 7px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text .product-selected h6 {
color: #000;font-size: 0.7em;
}
li.cart-icon .cart-hover .select-items table tr td.si-close {
color: #252525;
font-size: 16px;
cursor: pointer;
}
li.cart-icon .cart-hover .select-total {
overflow: hidden;
border-top: 1px solid #e5e5e5;
padding-top: 26px;
margin-bottom: 30px;
}
li.cart-icon .cart-hover .select-total span {
font-size: 14px;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.5px;
float: left;
}
li.cart-icon .cart-hover .select-total h5 {
color: var(--primary);
float: right;
}
li.cart-icon .cart-hover .select-button .view-card {
font-size: 12px;
letter-spacing: 2px;
display: block;
text-align: center;
color: #ffffff;
padding: 15px 30px 12px;
margin-bottom: 10px;
}
li.cart-icon .cart-hover .select-button .checkout-btn {
font-size: 12px;
letter-spacing: 2px;
display: block;
text-align: center;
padding: 15px 30px 12px;
}
li.cart-price {
font-size: 18px;
font-weight: 700;
}
.cart-hover::before,.compt-hover::before {
content: '';
display: block;
position: absolute;
width: 0;
border-right: 10px solid transparent;
border-bottom: 20px solid #fff;
border-left: 10px solid transparent;
top: -20px;
left: 42%;
}
.btn-home:hover i{	-webkit-animation: bounce-right 0.8s both;
animation: bounce-right 0.8s both;}
.desktop{display:block;} .mobile{display:none !important;}
.photo-article {
justify-content: center;
overflow: hidden;
align-items: center;
align-content: center;
display: flex;
}
.photo-article img {
display: flex;
align-self: stretch;
}
a:focus {
outline: none;
}
.compt-hover h4 {
font-size: 80%;
font-weight: 700;
text-align: center;
color: var(--gray);
}
.compte .nav-tabs .nav-item {
margin-bottom: -1px;
color: var(--dark);
border-radius: 0;
}
.compte .nav-tabs .nav-link.active {
border-top: solid 3px var(--secondary);
}
.compte .nav-tabs .nav-item i{color:var(--secondary);}
/*+++++++++++++++ GAMME ++*/
.gamme{overflow: hidden;}
.gamme a {
display: block;
padding: 1.8rem 0.5em;
background: rgba(0,0,0,0);
transition: all 1s;
text-align: center;
max-width: 260px;
margin: 0 auto;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s}
.gamme img {
width: 100%;
height: auto;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s
}
.gamme a:hover img{
transform: scale(1.2)
}
.gamme a:hover{background: url("../img/bg-cuvee.png") top center no-repeat; background-size: contain;}
.infos-gamme {
background: rgba(0,0,0,0);
position: relative;padding:1.2rem 1rem;
-webkit-transition: all .3s ease-out 0s;
-moz-transition: all .3s ease-out 0s;
-ms-transition: all .3s ease-out 0s;
-o-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s
}
.plus-btn {
position: absolute;
right: 0;
top: -1.8em;;
display: inline-block;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease-out 0s;
-moz-transition: all .3s ease-out 0s;
-ms-transition: all .3s ease-out 0s;
-o-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s
}
.plus-btn i {
color: var(--primary);
background: transparent;
width: 50px;
height: 50px;
display: inline-block;
line-height: 50px;
text-align: center;
font-size: 1.8em;
margin-left: 10px;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s
}
.gamme a:hover{text-decoration: none;}
.gamme a:hover .plus-btn {
opacity: 1;
visibility: visible
}
.gamme a:hover .infos-gamme{background: rgba(0,0,0,0.8); color:#fff !important;}
.visuel-gamme{background: url("../img/bg-cuvee.png") top center no-repeat; background-size: contain;}
.assemblages{text-align: center;}
.assemblages .col-4,.assemblages .col-md-3{padding:1.5rem;}
.assemblages .col-4,.assemblages .col-md-3{
border-right: solid 1px #ccc;
}
.assemblages .col-4:last-child,.assemblages .col-md-3:last-child{border-right:none;}
.no-overflow{overflow: hidden;}
.bg-opacity{background: rgba(0,0,0,0.8) !important;}
.bg-black{color:#fff; background: var(--black);}
.picto-conseils {
max-width: 60px;
height: auto;
}
/*+++++++*/
.accordion h2 {
font-size: 1.9em;
}
.accordion h2 a{display:block; text-align: left;}
.accordion > .card > .card-header {
border-radius: 0;
margin-bottom: -1px;
background-color: transparent;
}
.card{border-radius:0;}
.logo-infos {
max-width: 200px;
height: auto;
}
#popinfos .modal-header {
border-bottom: none;
}
#popinfos .modal-footer {
border-top: none;
}
#popinfos .modal-content {
background: #000 !important;
color: #fff;
text-align: center;
}
.modal-header .close {
position: absolute;
right: 0;
top: 0;
margin: 0;
}
.modal-backdrop.show {
opacity: 0.8;
}
.modal-md {
max-width: 50%;
}
.modal-lg {
max-width: 80%;
}
.modal-title{width:95%;}
.modal-title .btn {
font-size: 0.5em;
float: right;
}
.qua-col .quantity {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.qua-col .pro-qty .qtybtn {
font-size: 2.5em;
float: left;
line-height: 1em;
cursor: pointer;
width: 25px;
text-align: center;
}
.qua-col .pro-qty .qtybtn.dec {
font-size: 2.5em;
}
.qua-col .pro-qty {
width: 125px;
height: 46px;
border: none;
padding: 0 5px;
float: left;
}
.qua-col .pro-qty input {
text-align: center;
width: 52px;
font-size: 14px;
font-weight: 700;
border: none;
color: #4c4c4c;
line-height: 40px;
float: left;
}
.cart-table table tr td.cart-pic {
width: 15%;text-align: center;
}
.cart-table table tr td.cart-pic img{max-width: 80px;}
.cart-table table tr td.p-price {
width: 15%; color: var(--primary); font-size:1.4em;
}
.cart-table table tr td.p-name {
font-weight: 700;
width: 25%;text-align: center;
}
.table th, .table td{vertical-align: middle;}
.table thead th{text-align: center;}
.modal-content {
background-color: rgba(255,255,255,0.9);
border: solid 4px var(--secondary);
border-radius: 0;
}
.vignette{max-height: 80px; width: auto; vertical-align: middle;margin-right:4px;display: block; margin: 0 auto;}
.cart-name {
text-align: center;
}
/*+++ CHEMIN PANIER +++*/
#progressbar {
margin-bottom: 3rem;
overflow: hidden;
color: var(--dark);
padding-left: 0px;
margin-top: 3rem;
width: auto;
display: flex;
justify-content: center;
}
#progressbar li {
list-style-type: none;
width: 16.66%;
float: left;
position: relative;
font-weight: 600;
}
#progressbar li a {
position: relative;
width: 40px;
height: 40px;
border-radius: 100%;
background: rgba(0,0,0,0);
transition: all 1s;
display: block;
align-self: center;
justify-self: center;
margin: -40px auto 0;
}
#progressbar li a:hover {background: rgba(0,0,0,0.6);}
#progressbar #step1:before {
content: "\f291";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar #step2:before {
content: "\f2bb";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar #step3:before {
content: "\f0d1";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar #step4:before {
content: "\f09d";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar #step5:before {
content: "\f733";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar.resa #step1:before {
content: "\f737";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar.resa #step2:before {
content: "\f073";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar.resa #step3:before {
content: "\f274";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar li:before {
width: 40px;
height: 40px;
line-height: 45px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: var(--dark);
border-radius: 50%;
margin: auto;
color: #fff;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: var(--dark);
position: absolute;
left: 0;
top: 21px;
z-index: -1
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
position: absolute;
left: -50%
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
position: absolute;
left: 50%
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px
}
#progressbar li.active:before,
#progressbar li.active:after {
background:  var(--primary);
}
/*++++++ CAROUSEL PANIER ++++++++*/
.reco .text-center {
position: relative;
}
.reco .badge.badge-primary {
position: absolute;
top: 0;
left: 35%;
border-radius: 0;
}
/*+++++ PHOTOS +++*/
.photos .photo-item {
position: relative
}
.photos .photo-item:after {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
opacity: 0;
visibility: hidden
}
.photos .photo-item .photo-text-more {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 30px;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
opacity: 0;
visibility: hidden;
text-align: center
}
.photos .photo-item .photo-text-more .icon {
color: #fff;
font-size: 20px
}
.photos .photo-item .photo-text-more .heading {
font-size: 16px;
color: #fff;
margin-bottom: 0;
text-transform: uppercase
}
.photos .photo-item .photo-text-more .meta {
color: #cccccc;
text-transform: uppercase;
font-size: 12px
}
.photos .photo-item img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 300px;
margin-bottom: 5px
}
.fancybox-button svg path {
stroke: var(--secondary) !important;
stroke-linejoin: round;
stroke-width: 2 !important;
}
.fancybox-thumbs {
background: #000 !important;
}
.fancybox-thumbs>ul>li:before {
border: 4px solid var(--primary) !important;
}
.fancybox-button.disabled svg path, .fancybox-button.disabled:hover svg path, .fancybox-button[disabled] svg path, .fancybox-button[disabled]:hover svg path{
color: #888 !important;
stroke: #888 !important;
cursor: default;
}
.langues img {
max-width: 30px;transition: all 0.8s;
}
.langues img:hover {
opacity:0.7;background: #fff;
} 
.langues .active img {
opacity:0.9;background: var(--secondary);border:solid 2px #fff;
}
@media (max-width:575.98px) {
.photos .photo-item img {
height: 200px
}
}
.photos .photo-item:hover:after {
opacity: 1;
visibility: visible
}
.photos .photo-item:hover .photo-text-more {
margin-top: 0;
opacity: 1;
visibility: visible
}
/*++++++++++*/
/*++++++++ STYLES DE FORMULAIRES +++++++++++++*/
.btn-link {
font-weight: 600;
color: var(--primary);
text-decoration: none;
font-size: 70%;
margin-left: 5px;
text-transform: uppercase;
letter-spacing: 0.25em;display:inline-block; padding:0.25em;
}
.btn-link:hover{background: var(--dark); text-decoration: none;}
.btn{border-radius: 0;text-transform: uppercase;font-weight: 700;}
.input-group-text {
color: #ccc;
white-space: nowrap;
background-color: transparent;
border: none;
}
.form-control {
border: none;
border-radius: 0;
color: #666;
padding-left: 0.25rem;
padding-right: 0;
font-size:0.9em; padding:0.25em 0.75rem;
transition: all 0.5s;
}
.formulaire {
background: var(--light);
padding: 1rem;
margin: 1rem;
}
.form-control:active,
.form-control:focus {
color: var(--primary);
background: var(--dark);
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border-color: #fff
}
.form-control::-webkit-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::-moz-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::-ms-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::placeholder {
color: var(--gray);
opacity: 1;
}
label{font-weight: 500;}
.modal-content .formulaire {
padding: 0;
margin: 1rem 0;
}
/*++++++++++++++++
++++++++++*/
/*++++++++ FOOTER +++++++++++++*/
.footer a {
color: var(--secondary);
}
.mentions {
margin-top: 2rem;
margin-bottom: 0;
font-size: 0.75em;
letter-spacing: 0.15em;
padding-top: 1rem;
}
.mentions a{color:#fff;}
.logos-certif img {
max-height: 80px;
width: auto;
margin: 0 5px;
}
.menu-footer ul{
list-style-type: none;margin-left:0; padding-left:0;
}
.menu-footer a{color:#fff;font-size: 0.9em; margin-bottom:10px;display: block;}
.reseaux-bottom {
border-left: solid 1px var(--dark);
}
#topcontrol{bottom:55px !important;z-index: 10;}
.navbar-toggler-icon {background-color:#000;font-family: "Font Awesome 5 Pro";
}
/*+++*/
/*++++++++ MEDIAS QUERIES +++++++++++++*/
@media only screen and (min-width:992px){.navbar-toggler{display:none;}}
@media only screen and (max-width:992px)
and (orientation:portrait){
.carousel-caption {
left: 5px;
top: 60vh;
padding: 1.5rem;
right: 5px;
}
.carousel-item img {
min-height: 100vh;
width: auto;
display: flex;
}
.header {
height: 45vh;
}
.video-content {
margin-top: 25%;
}
.header-content {
justify-content: center;
align-content: center;
display: flex;
}
.header-content h1 {
font-size: 2.5em;
margin-bottom: 6px;
line-height: 1em;
}
.header img {
width: auto;
display: flex;
} 
}
@media only screen and (max-width:992px){
.navbar {
position: relative !important;
}
}
@media only screen and (max-width:767px)
and (orientation:landscape){
.carousel-caption {
left: 15%;
top: 45vh;
padding: 0.5rem;
}
}
@media only screen and (max-width:980px){
.modal-md {
max-width: 90%;
}
body{font-size:14px;}
.sticky.is-sticky .navbar-brand {
margin-left: 50px;display: none;
}
header {
background: #000;
}
.btn-block-menu:hover{
opacity: 0;
}
.navbar-brand {
max-width: 25%;
}
}
@media only screen and (max-width:800px){
.sticky-wrapper {
/* display: none; */
height: 0 !important;
}
.navbar-collapse {
z-index: 6;
background: #000;
padding-top: 20px;
padding-bottom: 40px;
}
.top-bar {
background: #000 !important;
}
img.logo-footer {
max-height: 80px;
}
.title {
font-size: 2em;
}
body{font-size:14px;
}
.infos-gamme h3{
font-size: 1em;
font-weight: 600;
}
.navbar-brand h1 {
margin-bottom: 0;
margin-top: 0;
}
#Conception, #formations {
text-align: left;
}
.navbar{display:flex;}
}
.sticky.is-sticky .navbar-nav {
background: #000 !important;
}
@media only screen and (max-width:767px){
.copyright p{margin-bottom: 0;text-align: left !important;}
.video-content.hidden-xs{display: none;}
.assemblages h4{
font-size: 1.1em;
line-height: 1.1em;
letter-spacing: 0.1em;
}
.actu-responsive {
margin-bottom: 110px;
}
.photo-actu{margin-bottom:0;}
.reseaux-bottom {
border-left: 0;
}
body{font-size:13px;}
.intro {
width: 90%;
bottom: 10%;
left: 5%;
padding: 0.5rem;
}
.sticky.is-sticky .navbar-brand {
display: none;
}
.logo{max-width:70px; height:auto;}
.navbar-brand {display:block;
margin: 0 auto;
text-align: center;
max-height: 200px;
width: 100%;
max-width: none;}
.navbar-brand img{max-width: 180px;max-height: none;		display: block;
margin: 0 auto;}
.sticky.is-sticky .navbar-brand img{max-width: inherit;}
.collapse:not(.show) {
display: none !important;
}
.desktop{display:none !important;} .mobile{display:block;}
.cart-table table tr td.cart-pic,.cart-table table .btn i{display:none;}
.cart-table table tr td.p-price{font-size:1.1em !important;font-weight:700}
.cart-table table .btn{font-size:0.8em}
.header {
height: 70vh;
}
.mobile-visuel-bg.visible-xs {
display: block;
width: 100%;
background: url(../img/photo-replace-video-mobile.jpg) center center no-repeat;
background-size: cover;
}
}
@media only screen and (max-width:640px){
body{font-size:12px;}
.container-small {
max-width: 90%;}
}
@media only screen and (max-width: 320px){
.header {
height: 100vh;
}
}
@media print{
body{
-webkit-print-color-adjust: exact;
}
.print{display:block !important;}
.logo-footer{max-width: 180px;}
.no-print{display:none;}
}
.card-header .btn.btn-link.btn-faq {
text-transform: none;
}
.card-header .btn.btn-link.btn-faq:hover {
color: var(--secondary);
background: #fff;
text-decoration: none;
}
/*+++ Ajout 12/2021 +++++++++*/
.mentions img {
max-width: 60px;
height: auto;
margin-left: 10px;
transition: all 1.2s;
}
.mentions img:hover { opacity: 0.4; }
/*+++*/
@charset "utf-8";
/*++++++++ Typographies +++++++++++++*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/*++++++++ Body et html ++++++++*/
body {
max-width: 100%;
overflow-x: hidden !important;
margin: 0;
font-family: var(--font-family-sans-serif);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #101010;
text-align: left;
background-color: var(--black);
}
section{z-index: 1;}
button:focus {
outline: none;
}
.preloader {
background-color: #000;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s;
margin: 0 auto
}
.preloader .preloader-circle {
width: 100px;
height: 100px;
position: relative;
border-style: solid;
border-width: 1px;
border-top-color: var(--secondary);
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
z-index: 10;
border-radius: 50%;
-webkit-box-shadow: 0 1px 1px 0 rgba(var(--pink),1);
box-shadow: 0 1px 1px 0 rgba(var(--pink),1);
background-color: #000;
-webkit-animation: zoom 2000ms infinite ease;
animation: zoom 2000ms infinite ease;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
.preloader .preloader-circle2 {
border-top-color: #fff;
}
.preloader .preloader-img {
position: absolute;
top: 50%;
z-index: 200;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
display: inline-block;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding-top: 6px;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
.preloader .preloader-img img {
max-width: 55px
}
.preloader .pere-text strong {
font-weight: 800;
color: var(--primary);
text-transform: uppercase
}
@-webkit-keyframes zoom {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
}
@keyframes zoom {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
}
/*++++++++ TOP +++++++++++++*/
header {
z-index: 2;
display: block;
position: relative;
}
.header-content {
position: absolute;
top: 0;
z-index: 1;
width: 100%;
left: 0;
bottom: 0;
}
.langues {
top: 5px;
right: 5px;
}
.header {
height: 100vh;
}
.header img {
/*min-height: 100vh;*/
width: 100%;
display: flex;
}
.navbar-brand {
display: block;
max-width: 18%;
margin: 0 auto;
z-index: 2;
position: relative;
}
.sticky .navbar-brand {
display: none;opacity:0;
}
.btn{
font-size: 0.95em;
letter-spacing: 0.2em;
font-family: var(--font-family-serif);font-weight: 600;}
.btn-sm, .btn-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.60em !important;
}
.sticky.is-sticky .navbar-brand{
max-height: 120px;
display: block;
max-width: 180px;
height: 100%;
transition: all 0.8s;
opacity: 1;
float: none;
margin-top: -80px;
overflow-y: hidden;
}
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
width: 100%;
max-height: 80px;
background: #000 !important;
}
.top-bar {
background: transparent !important;
display: flex;
justify-content: center;
padding-top: .5rem;
padding-bottom: 0.5rem;
z-index: 6;
position: relative;
}
/*++++*/
nav {
background: transparent !important;
}
.navbar-nav{background: transparent;
width: 100%;
justify-content: center;}
.navbar{z-index: 2;}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
text-align: center;cursor: pointer; transition: all 0.8s;background: rgba(0,0,0,0.7);
margin-left: 0.2em;
margin-right: 0.2em;
}
.navbar-dark .navbar-nav .nav-link::after{content:'';display: block; height:2px; width:10px; background: transparent;margin-left:auto; margin-right:auto;opacity:0; transition: all 0.8s;}
.navbar-dark .navbar-nav .nav-link:hover::after{content:'';display: block; height:2px; width:60px; background: var(--primary);margin-left:auto; margin-right:auto;opacity:11;}
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
color: var(--primary);
font-weight: 600;
}
.nav-item {font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #fff;
}
.nav-item a{
color: #fff;
}
.navbar-toggler {
color: transparent;
border-color: transparent !important;
position: absolute;
top: 0;
left: 0;
float: left;
align-self: center;
border: none;
box-shadow: none;
}
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 2.5em;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0;
color: #fff !important;
}
.navbar-dark .navbar-toggler-icon {
background-image: none;
}
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
top: 95%;
}
.dropdown-menu{border-radius: 0;left:15px;}
.dropdown-item, .dropdown-menu h3 {
font-family: var(--font-family-sans-serif);
color: var(--primary) !important;
font-size: 1.1em;
font-weight: 500;
text-transform: none;
letter-spacing: 0.1em;
margin-bottom: 0.6rem;
margin-top: 0.6rem;
}
.dropdown-item.active, .dropdown-item:active {
color: #fff !important;
text-decoration: none;
background-color: var(--primary);
}
.dropdown-menu p{
font-family: var(--font-family-sans-serif);
font-size: 0.8em;
font-weight: 500;
text-transform: none;
letter-spacing: 0.1em;
}
.nav.nav-pills a {
color: var(--primary);font-family: var(--font-family-serif);
font-weight: 600;
}
.nav.nav-pills a:hover{text-decoration:none;color: var(--secondary);}
.nav.nav-pills li {
padding-bottom: 1.2rem;
display: block;
width: 100%;
}
.dropdown-menu .tab-content {
font-family: var(--font-family-sans-serif);
text-transform: none;
font-size: 0.9em;
letter-spacing: 0;
line-height: 1.4em;
}
.dropdown-toggle::before {
display: inline-block !important;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "+ ";    
float: right;
font-size: 2em;
line-height: 0.8em;
font-weight: 300;
}
.dropdown-toggle::after{
border-top: none;
border-right: none;
border-bottom: 0;
border-left: none;
}
/*++++*/
/*++++++++ Styles de texte +++++++++++++*/
a .titre-actu {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transition: opacity 1s ease-in;
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.15s, transform 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.2s;
display: block;
position: absolute;
text-align: center;
max-width: 100%;
left: 0;
padding: 1rem 3rem;
color:#000;
}
a:hover .titre-actu{
text-decoration: none;
opacity: 0.9;
transform: translate3D(0, -40%, 0);
-webkit-transform: translate3D(0, -40%, 0);
-moz-transform: translate3D(0, -40%, 0);
-ms-transform: translate3D(0, -40%, 0);
-o-transform: translate3D(0, -40%, 0);
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1), transform 1s cubic-bezier(0.59, 0.01, 0.28, 1);
background:#000;color:#fff;
}
a .titre-actu::before{
content:'+';
background: var(--primary);
padding:0.5rem;
display:none;
position: relative;
margin: -1.8rem auto 10px;
font-size: 3em;
color: #fff;
font-weight: 100;
width: 39px;
}
a:hover .titre-actu::before{
display:block;
}
.liste-stylisee{list-style-type: none;line-height: 1.8em;}
.liste-stylisee li::before{
content: '';
display: inline-block;
border: solid 1px var(--secondary);
width: 1.2rem;
margin-right: 0.4rem;
vertical-align: middle;
margin-left: -1.5rem;
}
.titre::after {
content: '';
display: inline-block;
border: solid 3px;
width: 2em;
}
.intro {
position: absolute;
width: 55%;
bottom: 10%;
left: 22.5%;
color: #fff;
text-align: center;
background: rgba(0,0,0,0.8);
font-weight: 300;
padding: 1.2rem;
right: auto;
z-index: 4;
font-size: 0.85em;
}
.ass-prct {
display: block;
font-size: 3em;
color: var(--primary);
font-family: var(--font-family-serif);letter-spacing: 0;
margin-bottom:2rem;
}
.serif{ font-family: var(--font-family-serif);letter-spacing: 0;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 1.20rem}
h1, .h1{
font-size: 2.5em;
line-height: 1.4em;
font-weight: 600;white-space:normal;
font-family: var(--font-family-serif);
}
h2, .h2{
font-size: 2.5em;
line-height: 1.2em;
font-weight: 400;
font-family: var(--font-family-serif);
}
h3, .h3 {
font-family: var(--font-family-sans-serif);
font-size: 1.6em;
line-height: 1.4em;
font-weight: 400;
letter-spacing: 0.15em;
}
h4, .h4 {
font-size: 1.2em;
line-height: 1.2em;
font-weight: 400;letter-spacing: 0.3em;
}
h5, .h5 {
font-size: 0.9em;
line-height: 1.2em;
font-weight: 400;letter-spacing: 0.3em;
}
.title{text-transform: uppercase;font-size:2.8em; text-align: center;}
.title::after {
content: '';
display: inline-block;
height: 2px;
width: 0.75em;
background: var(--primary);
margin-right: auto;
vertical-align:middle;
margin-left:5px;
}
.title::before {
content: '';
display: inline-block;
height: 2px;
width: 0.75em;
background: var(--primary);
margin-left: auto;
vertical-align:middle;
margin-right:5px;
}
h4.description {
background: rgba(255,255,255,0.8);
padding: 1rem;
border-radius: 2.2rem;
border: dashed 2px #fff;
font-size: 1.2em;
line-height: 1.45em;
}
.copyright {
color: #fff;font-size:0.8em;letter-spacing:0.15em; padding-top:1rem;}
a {
color: var(--primary);
}
hr {
color: inherit;
border-color: inherit;
border-style: dotted;
}
.text-gray {
color: var(--gray) !important;
}
.fa, .fab, .fad, .fal, .far, .fas{vertical-align: middle;}
b, strong {
font-weight: 900;
}
.text-fluid {
font-size: 1.2em;
}
.blockquote {
margin-bottom: 1rem;
font-size: 1.05rem;
padding-left: 0.75em;
border-left: solid 3px #efefef;
font-weight: 500;
}
/*++++++++ 
+++++ STYLES AUTRES CONTENUS DIVERS
(tableaux, sliders, galleries, etc.)+++++++++++++*/
/*+++++++ FLECHES +++++*/
.print{display:none;}
.container-lg{max-width:1600px;}
.btn-down {
position: absolute;
bottom: 5px;
left: 0;
z-index: 10;
width:100%; text-align: center;
}
.fleche {
display: inline-block;
width: 25px;
height: 25px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
}
.fleche-white {
display: inline-block;
width: 15px;
height: 15px;
border-top: 2px solid #fff !important;
border-right: 2px solid #fff !important;
}
.fleche-bottom {
transform: rotate(135deg);
}
.btn-block-menu {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
transition: all 1.5s;
opacity: 0;
left:0;
top:0;
}
.btn-block-menu:hover{
opacity: 0.5;
}
.btn-block-menu.active {
opacity: 0.5;
border: solid 2px var(--secondary);
}
section{position:relative;width: 100%;min-width: 100vw;max-width: 100vw;overflow: hidden;}
.container-small {
max-width: 50%;
margin-left: auto;
margin-right: auto;
background: rgba(255,255,255,0.8);
}
.ph-btn {
max-height: 150px;
overflow: hidden;
}
.block-oeno {
background: rgba(0,0,0,0.8);
color: #fff !important;
padding: 1.5rem;
margin: 0 10px 10px;
}
.block-oeno h3{font-size: 1.3em;font-weight: 600;}
.block-image {
position: relative;
width: 100%;
border: solid 2px transparent;
cursor:pointer;
}
.image {
display: block;
width: 100%;
height: auto;
}
.block-image .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 2s;
background-color: rgba(0,0,0,0.8);
text-align: center;
padding-top:30%;
padding-left:2%;
padding-right:2%;
color:#fff !important;
font-size:0.8em;
min-height: 222px;
min-width: 200px;
cursor: default;
}
.block-image:hover .overlay {
opacity: 1;border-color: var(--primary);border-radius:0;
}
section#gamme .block-image .overlay{padding-top:80%;}
/*.block-image:hover .image {
-webkit-animation: kenburns-top 5s ease-out both;
animation: kenburns-top 5s ease-out both;
}*/
.block-image .overlay.div-actu {
background: transparent;
}
.block-image .overlay.div-actu .text a {
background: rgba(0,0,0,0.8);
display: block;
color: #fff;
padding: 1.5rem;
margin-top: 25%;
position:relative;
}
.block-image .overlay.div-actu .text a::before {
content: '+';
background: var(--primary);
padding:0.5rem;
display:none;
position: absolute;
font-size: 3em;
color: #fff;
font-weight: 100;
width: 39px;
left: 45%;
height: 39px;
top: -29px;
line-height: 1em;
}
.block-image .overlay.div-actu .text a:hover{text-decoration: none;}
.block-image .overlay.div-actu .text a:hover::before {
display:block;
}
/**
* ----------------------------------------
* animation kenburns-top
* ----------------------------------------
*/
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
.block-image .overlay .text{
cursor:default;
transform: translate3d(0, -40%, 0);
-webkit-transform: translate3d(0, -40%, 0);
-moz-transform: translate3d(0, -40%, 0);
-ms-transform: translate3d(0, -40%, 0);
-o-transform: translate3d(0, -40%, 0);
transition: opacity 0.2s ease-in;
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.15s, transform 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.2s;
}
.block-image:hover .overlay .text{
opacity: 1;
transform: translate3D(0, -40%, 0);
-webkit-transform: translate3D(0, -40%, 0);
-moz-transform: translate3D(0, -40%, 0);
-ms-transform: translate3D(0, -40%, 0);
-o-transform: translate3D(0, -40%, 0);
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1), transform 1s cubic-bezier(0.59, 0.01, 0.28, 1);
}
.video-content::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
}
#oenotourisme{
padding-top:10%;
padding-bottom:10%;
}
.bg-image{
background-size: cover;
position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 0;
}
.kenburns-top {
-webkit-animation: kenburns-top 20s ease-in-out infinite alternate both;
animation: kenburns-top 20s ease-in-out infinite alternate both;
}
/**
* ----------------------------------------
* animation kenburns-top
* ----------------------------------------
*/
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
.bounce-animate {
animation-name: float-bob;
animation-duration: 2s;
animation-iteration-count: infinite;
-moz-animation-name: float-bob;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear
}
@-webkit-keyframes float-bob {
0% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
50% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
100% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
}
.heartbeat {
animation: heartbeat 1s infinite alternate
}
@-webkit-keyframes heartbeat {
to {
-webkit-transform: scale(1.03);
transform: scale(1.03)
}
}
.rotateme {
-webkit-animation-name: rotateme;
animation-name: rotateme;
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear
}
@keyframes rotateme {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes rotateme {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg)
}
}
.date {
display: block;
position: absolute;
top: 0;
left: 15px;
z-index: 1;
background: var(--secondary);
padding: 1rem;
font-size: 0.8em;
font-weight: 600;
color:#fff;
}
.photo-actu {
max-width: 100%;
overflow: hidden;
text-align: center;
position: relative;
display: flex;
align-content: center;
justify-items: center;
justify-content: center;
/*height: 100%;*/
z-index: 0;
}
.photo-actu img {
position: relative;
margin: 0 auto;
display: flex;
align-self: center;
justify-self: center;
filter: grayscale(0);
transition: 0.5s ease-in-out;
min-height: 100%;
width: 100%;
}
#actualites .photo-actu img {
position: relative;
margin: 0 auto;
display: flex;
align-self: center;
justify-self: center;
filter: grayscale(0);
transition: 0.5s ease-in-out;
min-height: 100%;
width: 100%;
max-height: 300px;
}
#actualites a .titre-actu {
padding: 1rem;
font-size: 1em;
}
.page-item.disabled .page-link {
color:  var(--light);
border-color:transparent;
}
.page-link {
line-height: 1.25;
color: var(--primary);
border: none;
}
.page-link:hover {
z-index: 2;
color:  var(--secondary);
background-color: var(--light);
border-color: transparent;
}
/*+++++ PANIER TOP +++*/
li.cart-icon, li.compt-icon {position: relative;
}
li.cart-icon:hover .cart-hover,li.compt-icon:hover .compt-hover {
opacity: 1;
visibility: visible;
top: 60px;
}
li.cart-icon.nav-item a.nav-link{color: var(--secondary);
position: relative;
display: inline-block;
}
li.compt-icon.nav-item a.nav-link{color: var(--white);
position: relative;
display: inline-block;
}
li.cart-icon a span,li.compt-icon a span {
position: absolute;
right: 5px;
top: -1px;
height: 20px;
width: 20px;
background: var(--primary);
color: #ffffff;
border-radius: 50%;
font-size: 0.7em;
font-weight: 700;
text-align: center;
}
li.cart-icon .cart-hover {
position: absolute;
left: -200%;
top: 100px;
width: 320px;
background: #ffffff;
z-index: 99;
text-align: left;
padding: 30px;
opacity: 0;
visibility: hidden;
-webkit-box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
li.compt-icon .compt-hover {
position: absolute;
right: -110px;
top: 40px;
width: 220px;
background: #ffffff;
z-index: 99;
text-align: left;
padding: 10px 15px;
opacity: 0;
visibility: hidden;
-webkit-box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color:#000;
}
.compt-hover .form-control {
color: #000;
border-bottom: solid 1px #000;
padding: 2px;
}
.compt-hover label{text-transform: none;font-size: 85%;}
li.cart-icon .cart-hover .select-items table {
width: 100%;
}
li.cart-icon .cart-hover .select-items table tr td {
padding-bottom: 20px;
}
.si-pic img {
border: 1px solid #ebebeb;width:100%; height:auto;max-width: 50px;
}
.si-pic {max-height: 150px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text {
padding-left: 18px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text .product-selected p {
color: #e7ab3c;
line-height: 30px;
margin-bottom: 7px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text .product-selected h6 {
color: #000;font-size: 0.7em;
}
li.cart-icon .cart-hover .select-items table tr td.si-close {
color: #252525;
font-size: 16px;
cursor: pointer;
}
li.cart-icon .cart-hover .select-total {
overflow: hidden;
border-top: 1px solid #e5e5e5;
padding-top: 26px;
margin-bottom: 30px;
}
li.cart-icon .cart-hover .select-total span {
font-size: 14px;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.5px;
float: left;
}
li.cart-icon .cart-hover .select-total h5 {
color: var(--primary);
float: right;
}
li.cart-icon .cart-hover .select-button .view-card {
font-size: 12px;
letter-spacing: 2px;
display: block;
text-align: center;
color: #ffffff;
padding: 15px 30px 12px;
margin-bottom: 10px;
}
li.cart-icon .cart-hover .select-button .checkout-btn {
font-size: 12px;
letter-spacing: 2px;
display: block;
text-align: center;
padding: 15px 30px 12px;
}
li.cart-price {
font-size: 18px;
font-weight: 700;
}
.cart-hover::before,.compt-hover::before {
content: '';
display: block;
position: absolute;
width: 0;
border-right: 10px solid transparent;
border-bottom: 20px solid #fff;
border-left: 10px solid transparent;
top: -20px;
left: 42%;
}
.btn-home:hover i{	-webkit-animation: bounce-right 0.8s both;
animation: bounce-right 0.8s both;}
.desktop{display:block;} .mobile{display:none !important;}
.photo-article {
justify-content: center;
overflow: hidden;
align-items: center;
align-content: center;
display: flex;
}
.photo-article img {
display: flex;
align-self: stretch;
}
a:focus {
outline: none;
}
.compt-hover h4 {
font-size: 80%;
font-weight: 700;
text-align: center;
color: var(--gray);
}
.compte .nav-tabs .nav-item {
margin-bottom: -1px;
color: var(--dark);
border-radius: 0;
}
.compte .nav-tabs .nav-link.active {
border-top: solid 3px var(--secondary);
}
.compte .nav-tabs .nav-item i{color:var(--secondary);}
/*+++++++++++++++ GAMME ++*/
.gamme{overflow: hidden;}
.gamme a {
display: block;
padding: 1.8rem 0.5em;
background: rgba(0,0,0,0);
transition: all 1s;
text-align: center;
max-width: 260px;
margin: 0 auto;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s}
.gamme img {
width: 100%;
height: auto;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s
}
.gamme a:hover img{
transform: scale(1.2)
}
.gamme a:hover{background: url("../img/bg-cuvee.png") top center no-repeat; background-size: contain;}
.infos-gamme {
background: rgba(0,0,0,0);
position: relative;padding:1.2rem 1rem;
-webkit-transition: all .3s ease-out 0s;
-moz-transition: all .3s ease-out 0s;
-ms-transition: all .3s ease-out 0s;
-o-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s
}
.plus-btn {
position: absolute;
right: 0;
top: -1.8em;;
display: inline-block;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease-out 0s;
-moz-transition: all .3s ease-out 0s;
-ms-transition: all .3s ease-out 0s;
-o-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s
}
.plus-btn i {
color: var(--primary);
background: transparent;
width: 50px;
height: 50px;
display: inline-block;
line-height: 50px;
text-align: center;
font-size: 1.8em;
margin-left: 10px;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s
}
.gamme a:hover{text-decoration: none;}
.gamme a:hover .plus-btn {
opacity: 1;
visibility: visible
}
.gamme a:hover .infos-gamme{background: rgba(0,0,0,0.8); color:#fff !important;}
.visuel-gamme{background: url("../img/bg-cuvee.png") top center no-repeat; background-size: contain;}
.assemblages{text-align: center;}
.assemblages .col-4,.assemblages .col-md-3{padding:1.5rem;}
.assemblages .col-4,.assemblages .col-md-3{
border-right: solid 1px #ccc;
}
.assemblages .col-4:last-child,.assemblages .col-md-3:last-child{border-right:none;}
.no-overflow{overflow: hidden;}
.bg-opacity{background: rgba(0,0,0,0.8) !important;}
.bg-black{color:#fff; background: var(--black);}
.picto-conseils {
max-width: 60px;
height: auto;
}
/*+++++++*/
.accordion h2 {
font-size: 1.9em;
}
.accordion h2 a{display:block; text-align: left;}
.accordion > .card > .card-header {
border-radius: 0;
margin-bottom: -1px;
background-color: transparent;
}
.card{border-radius:0;}
.logo-infos {
max-width: 200px;
height: auto;
}
#popinfos .modal-header {
border-bottom: none;
}
#popinfos .modal-footer {
border-top: none;
}
#popinfos .modal-content {
background: #000 !important;
color: #fff;
text-align: center;
}
.modal-header .close {
position: absolute;
right: 0;
top: 0;
margin: 0;
}
.modal-backdrop.show {
opacity: 0.8;
}
.modal-md {
max-width: 50%;
}
.modal-lg {
max-width: 80%;
}
.modal-title{width:95%;}
.modal-title .btn {
font-size: 0.5em;
float: right;
}
.qua-col .quantity {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.qua-col .pro-qty .qtybtn {
font-size: 2.5em;
float: left;
line-height: 1em;
cursor: pointer;
width: 25px;
text-align: center;
}
.qua-col .pro-qty .qtybtn.dec {
font-size: 2.5em;
}
.qua-col .pro-qty {
width: 125px;
height: 46px;
border: none;
padding: 0 5px;
float: left;
}
.qua-col .pro-qty input {
text-align: center;
width: 52px;
font-size: 14px;
font-weight: 700;
border: none;
color: #4c4c4c;
line-height: 40px;
float: left;
}
.cart-table table tr td.cart-pic {
width: 15%;text-align: center;
}
.cart-table table tr td.cart-pic img{max-width: 80px;}
.cart-table table tr td.p-price {
width: 15%; color: var(--primary); font-size:1.4em;
}
.cart-table table tr td.p-name {
font-weight: 700;
width: 25%;text-align: center;
}
.table th, .table td{vertical-align: middle;}
.table thead th{text-align: center;}
.modal-content {
background-color: rgba(255,255,255,0.9);
border: solid 4px var(--secondary);
border-radius: 0;
}
.vignette{max-height: 80px; width: auto; vertical-align: middle;margin-right:4px;display: block; margin: 0 auto;}
.cart-name {
text-align: center;
}
/*+++ CHEMIN PANIER +++*/
#progressbar {
margin-bottom: 3rem;
overflow: hidden;
color: var(--dark);
padding-left: 0px;
margin-top: 3rem;
width: auto;
display: flex;
justify-content: center;
}
#progressbar li {
list-style-type: none;
width: 16.66%;
float: left;
position: relative;
font-weight: 600;
}
#progressbar li a {
position: relative;
width: 40px;
height: 40px;
border-radius: 100%;
background: rgba(0,0,0,0);
transition: all 1s;
display: block;
align-self: center;
justify-self: center;
margin: -40px auto 0;
}
#progressbar li a:hover {background: rgba(0,0,0,0.6);}
#progressbar #step1:before {
content: "\f291";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar #step2:before {
content: "\f2bb";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar #step3:before {
content: "\f0d1";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar #step4:before {
content: "\f09d";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar #step5:before {
content: "\f733";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar.resa #step1:before {
content: "\f737";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar.resa #step2:before {
content: "\f073";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar.resa #step3:before {
content: "\f274";font-family: "Font Awesome 5 Pro"; font-weight: 300;
}
#progressbar li:before {
width: 40px;
height: 40px;
line-height: 45px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: var(--dark);
border-radius: 50%;
margin: auto;
color: #fff;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: var(--dark);
position: absolute;
left: 0;
top: 21px;
z-index: -1
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
position: absolute;
left: -50%
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
position: absolute;
left: 50%
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px
}
#progressbar li.active:before,
#progressbar li.active:after {
background:  var(--primary);
}
/*++++++ CAROUSEL PANIER ++++++++*/
.reco .text-center {
position: relative;
}
.reco .badge.badge-primary {
position: absolute;
top: 0;
left: 35%;
border-radius: 0;
}
/*+++++ PHOTOS +++*/
.photos .photo-item {
position: relative
}
.photos .photo-item:after {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
opacity: 0;
visibility: hidden
}
.photos .photo-item .photo-text-more {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 30px;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
opacity: 0;
visibility: hidden;
text-align: center
}
.photos .photo-item .photo-text-more .icon {
color: #fff;
font-size: 20px
}
.photos .photo-item .photo-text-more .heading {
font-size: 16px;
color: #fff;
margin-bottom: 0;
text-transform: uppercase
}
.photos .photo-item .photo-text-more .meta {
color: #cccccc;
text-transform: uppercase;
font-size: 12px
}
.photos .photo-item img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 300px;
margin-bottom: 5px
}
.fancybox-button svg path {
stroke: var(--secondary) !important;
stroke-linejoin: round;
stroke-width: 2 !important;
}
.fancybox-thumbs {
background: #000 !important;
}
.fancybox-thumbs>ul>li:before {
border: 4px solid var(--primary) !important;
}
.fancybox-button.disabled svg path, .fancybox-button.disabled:hover svg path, .fancybox-button[disabled] svg path, .fancybox-button[disabled]:hover svg path{
color: #888 !important;
stroke: #888 !important;
cursor: default;
}
.langues img {
max-width: 30px;transition: all 0.8s;
}
.langues img:hover {
opacity:0.7;background: #fff;
} 
.langues .active img {
opacity:0.9;background: var(--secondary);border:solid 2px #fff;
}
@media (max-width:575.98px) {
.photos .photo-item img {
height: 200px
}
}
.photos .photo-item:hover:after {
opacity: 1;
visibility: visible
}
.photos .photo-item:hover .photo-text-more {
margin-top: 0;
opacity: 1;
visibility: visible
}
/*++++++++++*/
/*++++++++ STYLES DE FORMULAIRES +++++++++++++*/
.btn-link {
font-weight: 600;
color: var(--primary);
text-decoration: none;
font-size: 70%;
margin-left: 5px;
text-transform: uppercase;
letter-spacing: 0.25em;display:inline-block; padding:0.25em;
}
.btn-link:hover{background: var(--dark); text-decoration: none;}
.btn{border-radius: 0;text-transform: uppercase;font-weight: 700;}
.input-group-text {
color: #ccc;
white-space: nowrap;
background-color: transparent;
border: none;
}
.form-control {
border: none;
border-radius: 0;
color: #666;
padding-left: 0.25rem;
padding-right: 0;
font-size:0.9em; padding:0.25em 0.75rem;
transition: all 0.5s;
}
.formulaire {
background: var(--light);
padding: 1rem;
margin: 1rem;
}
.form-control:active,
.form-control:focus {
color: var(--primary);
background: var(--dark);
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border-color: #fff
}
.form-control::-webkit-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::-moz-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::-ms-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::placeholder {
color: var(--gray);
opacity: 1;
}
label{font-weight: 500;}
.modal-content .formulaire {
padding: 0;
margin: 1rem 0;
}
/*++++++++++++++++
++++++++++*/
/*++++++++ FOOTER +++++++++++++*/
.footer a {
color: var(--secondary);
}
.mentions {
margin-top: 2rem;
margin-bottom: 0;
font-size: 0.75em;
letter-spacing: 0.15em;
padding-top: 1rem;
}
.mentions a{color:#fff;}
.logos-certif img {
max-height: 80px;
width: auto;
margin: 0 5px;
}
.menu-footer ul{
list-style-type: none;margin-left:0; padding-left:0;
}
.menu-footer a{color:#fff;font-size: 0.9em; margin-bottom:10px;display: block;}
.reseaux-bottom {
border-left: solid 1px var(--dark);
}
#topcontrol{bottom:55px !important;z-index: 10;}
.navbar-toggler-icon {background-color:#000;font-family: "Font Awesome 5 Pro";
}
/*+++*/
/*++++++++ MEDIAS QUERIES +++++++++++++*/
@media only screen and (min-width:992px){.navbar-toggler{display:none;}}
@media only screen and (max-width:992px)
and (orientation:portrait){
.carousel-caption {
left: 5px;
top: 60vh;
padding: 1.5rem;
right: 5px;
}
.carousel-item img {
min-height: 100vh;
width: auto;
display: flex;
}
.header {
height: 45vh;
}
.video-content {
margin-top: 25%;
}
.header-content {
justify-content: center;
align-content: center;
display: flex;
}
.header-content h1 {
font-size: 2.5em;
margin-bottom: 6px;
line-height: 1em;
}
.header img {
width: auto;
display: flex;
} 
}
@media only screen and (max-width:992px){
.navbar {
position: relative !important;
}
}
@media only screen and (max-width:767px)
and (orientation:landscape){
.carousel-caption {
left: 15%;
top: 45vh;
padding: 0.5rem;
}
}
@media only screen and (max-width:980px){
.modal-md {
max-width: 90%;
}
body{font-size:14px;}
.sticky.is-sticky .navbar-brand {
margin-left: 50px;display: none;
}
header {
background: #000;
}
.btn-block-menu:hover{
opacity: 0;
}
.navbar-brand {
max-width: 25%;
}
}
@media only screen and (max-width:800px){
.sticky-wrapper {
/* display: none; */
height: 0 !important;
}
.navbar-collapse {
z-index: 6;
background: #000;
padding-top: 20px;
padding-bottom: 40px;
}
.top-bar {
background: #000 !important;
}
img.logo-footer {
max-height: 80px;
}
.title {
font-size: 2em;
}
body{font-size:14px;
}
.infos-gamme h3{
font-size: 1em;
font-weight: 600;
}
.navbar-brand h1 {
margin-bottom: 0;
margin-top: 0;
}
#Conception, #formations {
text-align: left;
}
.navbar{display:flex;}
}
.sticky.is-sticky .navbar-nav {
background: #000 !important;
}
@media only screen and (max-width:767px){
.copyright p{margin-bottom: 0;text-align: left !important;}
.video-content.hidden-xs{display: none;}
.assemblages h4{
font-size: 1.1em;
line-height: 1.1em;
letter-spacing: 0.1em;
}
.actu-responsive {
margin-bottom: 110px;
}
.photo-actu{margin-bottom:0;}
.reseaux-bottom {
border-left: 0;
}
body{font-size:13px;}
.intro {
width: 90%;
bottom: 10%;
left: 5%;
padding: 0.5rem;
}
.sticky.is-sticky .navbar-brand {
display: none;
}
.logo{max-width:70px; height:auto;}
.navbar-brand {display:block;
margin: 0 auto;
text-align: center;
max-height: 200px;
width: 100%;
max-width: none;}
.navbar-brand img{max-width: 180px;max-height: none;		display: block;
margin: 0 auto;}
.sticky.is-sticky .navbar-brand img{max-width: inherit;}
.collapse:not(.show) {
display: none !important;
}
.desktop{display:none !important;} .mobile{display:block;}
.cart-table table tr td.cart-pic,.cart-table table .btn i{display:none;}
.cart-table table tr td.p-price{font-size:1.1em !important;font-weight:700}
.cart-table table .btn{font-size:0.8em}
.header {
height: 70vh;
}
.mobile-visuel-bg.visible-xs {
display: block;
width: 100%;
background: url(../img/photo-replace-video-mobile.jpg) center center no-repeat;
background-size: cover;
}
}
@media only screen and (max-width:640px){
body{font-size:12px;}
.container-small {
max-width: 90%;}
}
@media only screen and (max-width: 320px){
.header {
height: 100vh;
}
}
@media print{
body{
-webkit-print-color-adjust: exact;
}
.print{display:block !important;}
.logo-footer{max-width: 180px;}
.no-print{display:none;}
}
.card-header .btn.btn-link.btn-faq {
text-transform: none;
}
.card-header .btn.btn-link.btn-faq:hover {
color: var(--secondary);
background: #fff;
text-decoration: none;
}
/*+++ Ajout 12/2021 +++++++++*/
.mentions img {
max-width: 60px;
height: auto;
margin-left: 10px;
transition: all 1.2s;
}
.mentions img:hover { opacity: 0.4; }
/*+++*/
@charset "utf-8";
/*++++++++ Typographies +++++++++++++*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/*++++++++ Body et html ++++++++*/
body {
max-width: 100%;
overflow-x: hidden !important;
margin: 0;
font-family: var(--font-family-sans-serif);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #101010;
text-align: left;
background-color: var(--black);
}
section {
z-index: 1;
}
button:focus {
outline: none;
}
.preloader {
background-color: #000;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s;
margin: 0 auto
}
.preloader .preloader-circle {
width: 100px;
height: 100px;
position: relative;
border-style: solid;
border-width: 1px;
border-top-color: var(--secondary);
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
z-index: 10;
border-radius: 50%;
-webkit-box-shadow: 0 1px 1px 0 rgba(var(--pink),1);
box-shadow: 0 1px 1px 0 rgba(var(--pink),1);
background-color: #000;
-webkit-animation: zoom 2000ms infinite ease;
animation: zoom 2000ms infinite ease;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
.preloader .preloader-circle2 {
border-top-color: #fff;
}
.preloader .preloader-img {
position: absolute;
top: 50%;
z-index: 200;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
display: inline-block;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding-top: 6px;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
.preloader .preloader-img img {
max-width: 55px
}
.preloader .pere-text strong {
font-weight: 800;
color: var(--primary);
text-transform: uppercase
}
@-webkit-keyframes zoom {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
}
@keyframes zoom {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
}
/*++++++++ TOP +++++++++++++*/
header {
z-index: 2;
display: block;
position: relative;
}
.header-content {
position: absolute;
top: 0;
z-index: 1;
width: 100%;
left: 0;
bottom: 0;
}
.langues {
top: 5px;
right: 5px;
}
.header {
height: 100vh;
}
.header img {
/*min-height: 100vh;*/
width: 100%;
display: flex;
}
.navbar-brand {
display: block;
max-width: 18%;
margin: 0 auto;
z-index: 2;
position: relative;
}
.sticky .navbar-brand {
display: none;
opacity: 0;
}
.btn {
font-size: 0.95em;
letter-spacing: 0.2em;
font-family: var(--font-family-serif);
font-weight: 600;
}
.btn-sm, .btn-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.60em !important;
}
.sticky.is-sticky .navbar-brand {
max-height: 120px;
display: block;
max-width: 180px;
height: 100%;
transition: all 0.8s;
opacity: 1;
float: none;
margin-top: -80px;
overflow-y: hidden;
}
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
width: 100%;
max-height: 80px;
background: #000 !important;
}
.top-bar {
background: transparent !important;
display: flex;
justify-content: center;
padding-top: .5rem;
padding-bottom: 0.5rem;
z-index: 6;
position: relative;
}
/*++++*/
nav {
background: transparent !important;
}
.navbar-nav {
background: transparent;
width: 100%;
justify-content: center;
}
.navbar {
z-index: 2;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
text-align: center;
cursor: pointer;
transition: all 0.8s;
background: rgba(0,0,0,0.7);
margin-left: 0.2em;
margin-right: 0.2em;
}
.navbar-dark .navbar-nav .nav-link::after {
content: '';
display: block;
height: 2px;
width: 10px;
background: transparent;
margin-left: auto;
margin-right: auto;
opacity: 0;
transition: all 0.8s;
}
.navbar-dark .navbar-nav .nav-link:hover::after {
content: '';
display: block;
height: 2px;
width: 60px;
background: var(--primary);
margin-left: auto;
margin-right: auto;
opacity: 11;
}
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
color: var(--primary);
font-weight: 600;
}
.nav-item {
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #fff;
}
.nav-item a {
color: #fff;
}
.navbar-toggler {
color: transparent;
border-color: transparent !important;
position: absolute;
top: 0;
left: 0;
float: left;
align-self: center;
border: none;
box-shadow: none;
}
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 2.5em;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0;
color: #fff !important;
}
.navbar-dark .navbar-toggler-icon {
background-image: none;
}
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
top: 95%;
}
.dropdown-menu {
border-radius: 0;
left: 15px;
}
.dropdown-item, .dropdown-menu h3 {
font-family: var(--font-family-sans-serif);
color: var(--primary) !important;
font-size: 1.1em;
font-weight: 500;
text-transform: none;
letter-spacing: 0.1em;
margin-bottom: 0.6rem;
margin-top: 0.6rem;
}
.dropdown-item.active, .dropdown-item:active {
color: #fff !important;
text-decoration: none;
background-color: var(--primary);
}
.dropdown-menu p {
font-family: var(--font-family-sans-serif);
font-size: 0.8em;
font-weight: 500;
text-transform: none;
letter-spacing: 0.1em;
}
.nav.nav-pills a {
color: var(--primary);
font-family: var(--font-family-serif);
font-weight: 600;
}
.nav.nav-pills a:hover {
text-decoration: none;
color: var(--secondary);
}
.nav.nav-pills li {
padding-bottom: 1.2rem;
display: block;
width: 100%;
}
.dropdown-menu .tab-content {
font-family: var(--font-family-sans-serif);
text-transform: none;
font-size: 0.9em;
letter-spacing: 0;
line-height: 1.4em;
}
.dropdown-toggle::before {
display: inline-block !important;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "+ ";
float: right;
font-size: 2em;
line-height: 0.8em;
font-weight: 300;
}
.dropdown-toggle::after {
border-top: none;
border-right: none;
border-bottom: 0;
border-left: none;
}
/*++++*/
/*++++++++ Styles de texte +++++++++++++*/
a .titre-actu {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transition: opacity 1s ease-in;
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.15s, transform 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.2s;
display: block;
position: absolute;
text-align: center;
max-width: 100%;
left: 0;
padding: 1rem 3rem;
color: #000;
}
a:hover .titre-actu {
text-decoration: none;
opacity: 0.9;
transform: translate3D(0, -40%, 0);
-webkit-transform: translate3D(0, -40%, 0);
-moz-transform: translate3D(0, -40%, 0);
-ms-transform: translate3D(0, -40%, 0);
-o-transform: translate3D(0, -40%, 0);
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1), transform 1s cubic-bezier(0.59, 0.01, 0.28, 1);
background: #000;
color: #fff;
}
a .titre-actu::before {
content: '+';
background: var(--primary);
padding: 0.5rem;
display: none;
position: relative;
margin: -1.8rem auto 10px;
font-size: 3em;
color: #fff;
font-weight: 100;
width: 39px;
}
a:hover .titre-actu::before {
display: block;
}
.liste-stylisee {
list-style-type: none;
line-height: 1.8em;
}
.liste-stylisee li::before {
content: '';
display: inline-block;
border: solid 1px var(--secondary);
width: 1.2rem;
margin-right: 0.4rem;
vertical-align: middle;
margin-left: -1.5rem;
}
.titre::after {
content: '';
display: inline-block;
border: solid 3px;
width: 2em;
}
.intro {
position: absolute;
width: 55%;
bottom: 10%;
left: 22.5%;
color: #fff;
text-align: center;
background: rgba(0,0,0,0.8);
font-weight: 300;
padding: 1.2rem;
right: auto;
z-index: 4;
font-size: 0.85em;
}
.ass-prct {
display: block;
font-size: 3em;
color: var(--primary);
font-family: var(--font-family-serif);
letter-spacing: 0;
margin-bottom: 2rem;
}
.serif {
font-family: var(--font-family-serif);
letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 1.20rem
}
h1, .h1 {
font-size: 2.5em;
line-height: 1.4em;
font-weight: 600;
white-space: normal;
font-family: var(--font-family-serif);
}
h2, .h2 {
font-size: 2.5em;
line-height: 1.2em;
font-weight: 400;
font-family: var(--font-family-serif);
}
h3, .h3 {
font-family: var(--font-family-sans-serif);
font-size: 1.6em;
line-height: 1.4em;
font-weight: 400;
letter-spacing: 0.15em;
}
h4, .h4 {
font-size: 1.2em;
line-height: 1.2em;
font-weight: 400;
letter-spacing: 0.3em;
}
h5, .h5 {
font-size: 0.9em;
line-height: 1.2em;
font-weight: 400;
letter-spacing: 0.3em;
}
.title {
text-transform: uppercase;
font-size: 2.8em;
text-align: center;
}
.title::after {
content: '';
display: inline-block;
height: 2px;
width: 0.75em;
background: var(--primary);
margin-right: auto;
vertical-align: middle;
margin-left: 5px;
}
.title::before {
content: '';
display: inline-block;
height: 2px;
width: 0.75em;
background: var(--primary);
margin-left: auto;
vertical-align: middle;
margin-right: 5px;
}
h4.description {
background: rgba(255,255,255,0.8);
padding: 1rem;
border-radius: 2.2rem;
border: dashed 2px #fff;
font-size: 1.2em;
line-height: 1.45em;
}
.copyright {
color: #fff;
font-size: 0.8em;
letter-spacing: 0.15em;
padding-top: 1rem;
}
a {
color: var(--primary);
}
hr {
color: inherit;
border-color: inherit;
border-style: dotted;
}
.text-gray {
color: var(--gray) !important;
}
.fa, .fab, .fad, .fal, .far, .fas {
vertical-align: middle;
}
b, strong {
font-weight: 900;
}
.text-fluid {
font-size: 1.2em;
}
.blockquote {
margin-bottom: 1rem;
font-size: 1.05rem;
padding-left: 0.75em;
border-left: solid 3px #efefef;
font-weight: 500;
}
/*++++++++ 
+++++ STYLES AUTRES CONTENUS DIVERS
(tableaux, sliders, galleries, etc.)+++++++++++++*/
/*+++++++ FLECHES +++++*/
.print {
display: none;
}
.container-lg {
max-width: 1600px;
}
.btn-down {
position: absolute;
bottom: 5px;
left: 0;
z-index: 10;
width: 100%;
text-align: center;
}
.fleche {
display: inline-block;
width: 25px;
height: 25px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
}
.fleche-white {
display: inline-block;
width: 15px;
height: 15px;
border-top: 2px solid #fff !important;
border-right: 2px solid #fff !important;
}
.fleche-bottom {
transform: rotate(135deg);
}
.btn-block-menu {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
transition: all 1.5s;
opacity: 0;
left: 0;
top: 0;
}
.btn-block-menu:hover {
opacity: 0.5;
}
.btn-block-menu.active {
opacity: 0.5;
border: solid 2px var(--secondary);
}
section {
position: relative;
width: 100%;
min-width: 100vw;
max-width: 100vw;
overflow: hidden;
}
.container-small {
max-width: 50%;
margin-left: auto;
margin-right: auto;
background: rgba(255,255,255,0.8);
}
.ph-btn {
max-height: 150px;
overflow: hidden;
}
.block-oeno {
background: rgba(0,0,0,0.8);
color: #fff !important;
padding: 1.5rem;
margin: 0 10px 10px;
}
.block-oeno h3 {
font-size: 1.3em;
font-weight: 600;
}
.block-image {
position: relative;
width: 100%;
border: solid 2px transparent;
cursor: pointer;
}
.image {
display: block;
width: 100%;
height: auto;
}
.block-image .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 2s;
background-color: rgba(0,0,0,0.8);
text-align: center;
padding-top: 30%;
padding-left: 2%;
padding-right: 2%;
color: #fff !important;
font-size: 0.8em;
min-height: 222px;
min-width: 200px;
cursor: default;
}
.block-image:hover .overlay {
opacity: 1;
border-color: var(--primary);
border-radius: 0;
}
section#gamme .block-image .overlay {
padding-top: 80%;
}
/*.block-image:hover .image {
-webkit-animation: kenburns-top 5s ease-out both;
animation: kenburns-top 5s ease-out both;
}*/
.block-image .overlay.div-actu {
background: transparent;
}
.block-image .overlay.div-actu .text a {
background: rgba(0,0,0,0.8);
display: block;
color: #fff;
padding: 1.5rem;
margin-top: 25%;
position: relative;
}
.block-image .overlay.div-actu .text a::before {
content: '+';
background: var(--primary);
padding: 0.5rem;
display: none;
position: absolute;
font-size: 3em;
color: #fff;
font-weight: 100;
width: 39px;
left: 45%;
height: 39px;
top: -29px;
line-height: 1em;
}
.block-image .overlay.div-actu .text a:hover {
text-decoration: none;
}
.block-image .overlay.div-actu .text a:hover::before {
display: block;
}
/**
* ----------------------------------------
* animation kenburns-top
* ----------------------------------------
*/
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
.block-image .overlay .text {
cursor: default;
transform: translate3d(0, -40%, 0);
-webkit-transform: translate3d(0, -40%, 0);
-moz-transform: translate3d(0, -40%, 0);
-ms-transform: translate3d(0, -40%, 0);
-o-transform: translate3d(0, -40%, 0);
transition: opacity 0.2s ease-in;
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.15s, transform 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.2s;
}
.block-image:hover .overlay .text {
opacity: 1;
transform: translate3D(0, -40%, 0);
-webkit-transform: translate3D(0, -40%, 0);
-moz-transform: translate3D(0, -40%, 0);
-ms-transform: translate3D(0, -40%, 0);
-o-transform: translate3D(0, -40%, 0);
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1), transform 1s cubic-bezier(0.59, 0.01, 0.28, 1);
}
.video-content::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
}
#oenotourisme {
padding-top: 10%;
padding-bottom: 10%;
}
.bg-image {
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.kenburns-top {
-webkit-animation: kenburns-top 20s ease-in-out infinite alternate both;
animation: kenburns-top 20s ease-in-out infinite alternate both;
}
/**
* ----------------------------------------
* animation kenburns-top
* ----------------------------------------
*/
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
.bounce-animate {
animation-name: float-bob;
animation-duration: 2s;
animation-iteration-count: infinite;
-moz-animation-name: float-bob;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear
}
@-webkit-keyframes float-bob {
0% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
50% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
100% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
}
.heartbeat {
animation: heartbeat 1s infinite alternate
}
@-webkit-keyframes heartbeat {
to {
-webkit-transform: scale(1.03);
transform: scale(1.03)
}
}
.rotateme {
-webkit-animation-name: rotateme;
animation-name: rotateme;
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear
}
@keyframes rotateme {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes rotateme {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg)
}
}
.date {
display: block;
position: absolute;
top: 0;
left: 15px;
z-index: 1;
background: var(--secondary);
padding: 1rem;
font-size: 0.8em;
font-weight: 600;
color: #fff;
}
.photo-actu {
max-width: 100%;
overflow: hidden;
text-align: center;
position: relative;
display: flex;
align-content: center;
justify-items: center;
justify-content: center;
/*height: 100%;*/
z-index: 0;
}
.photo-actu img {
position: relative;
margin: 0 auto;
display: flex;
align-self: center;
justify-self: center;
filter: grayscale(0);
transition: 0.5s ease-in-out;
min-height: 100%;
width: 100%;
}
#actualites .photo-actu img {
position: relative;
margin: 0 auto;
display: flex;
align-self: center;
justify-self: center;
filter: grayscale(0);
transition: 0.5s ease-in-out;
min-height: 100%;
width: 100%;
max-height: 300px;
}
#actualites a .titre-actu {
padding: 1rem;
font-size: 1em;
}
.page-item.disabled .page-link {
color: var(--light);
border-color: transparent;
}
.page-link {
line-height: 1.25;
color: var(--primary);
border: none;
}
.page-link:hover {
z-index: 2;
color: var(--secondary);
background-color: var(--light);
border-color: transparent;
}
/*+++++ PANIER TOP +++*/
li.cart-icon, li.compt-icon {
position: relative;
}
li.cart-icon:hover .cart-hover, li.compt-icon:hover .compt-hover {
opacity: 1;
visibility: visible;
top: 60px;
}
li.cart-icon.nav-item a.nav-link {
color: var(--secondary);
position: relative;
display: inline-block;
}
li.compt-icon.nav-item a.nav-link {
color: var(--white);
position: relative;
display: inline-block;
}
li.cart-icon a span, li.compt-icon a span {
position: absolute;
right: 5px;
top: -1px;
height: 20px;
width: 20px;
background: var(--primary);
color: #ffffff;
border-radius: 50%;
font-size: 0.7em;
font-weight: 700;
text-align: center;
}
li.cart-icon .cart-hover {
position: absolute;
left: -200%;
top: 100px;
width: 320px;
background: #ffffff;
z-index: 99;
text-align: left;
padding: 30px;
opacity: 0;
visibility: hidden;
-webkit-box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
li.compt-icon .compt-hover {
position: absolute;
right: -110px;
top: 40px;
width: 220px;
background: #ffffff;
z-index: 99;
text-align: left;
padding: 10px 15px;
opacity: 0;
visibility: hidden;
-webkit-box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: #000;
}
.compt-hover .form-control {
color: #000;
border-bottom: solid 1px #000;
padding: 2px;
}
.compt-hover label {
text-transform: none;
font-size: 85%;
}
li.cart-icon .cart-hover .select-items table {
width: 100%;
}
li.cart-icon .cart-hover .select-items table tr td {
padding-bottom: 20px;
}
.si-pic img {
border: 1px solid #ebebeb;
width: 100%;
height: auto;
max-width: 50px;
}
.si-pic {
max-height: 150px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text {
padding-left: 18px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text .product-selected p {
color: #e7ab3c;
line-height: 30px;
margin-bottom: 7px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text .product-selected h6 {
color: #000;
font-size: 0.7em;
}
li.cart-icon .cart-hover .select-items table tr td.si-close {
color: #252525;
font-size: 16px;
cursor: pointer;
}
li.cart-icon .cart-hover .select-total {
overflow: hidden;
border-top: 1px solid #e5e5e5;
padding-top: 26px;
margin-bottom: 30px;
}
li.cart-icon .cart-hover .select-total span {
font-size: 14px;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.5px;
float: left;
}
li.cart-icon .cart-hover .select-total h5 {
color: var(--primary);
float: right;
}
li.cart-icon .cart-hover .select-button .view-card {
font-size: 12px;
letter-spacing: 2px;
display: block;
text-align: center;
color: #ffffff;
padding: 15px 30px 12px;
margin-bottom: 10px;
}
li.cart-icon .cart-hover .select-button .checkout-btn {
font-size: 12px;
letter-spacing: 2px;
display: block;
text-align: center;
padding: 15px 30px 12px;
}
li.cart-price {
font-size: 18px;
font-weight: 700;
}
.cart-hover::before, .compt-hover::before {
content: '';
display: block;
position: absolute;
width: 0;
border-right: 10px solid transparent;
border-bottom: 20px solid #fff;
border-left: 10px solid transparent;
top: -20px;
left: 42%;
}
.btn-home:hover i {
-webkit-animation: bounce-right 0.8s both;
animation: bounce-right 0.8s both;
}
.desktop {
display: block;
}
.mobile {
display: none !important;
}
.photo-article {
justify-content: center;
overflow: hidden;
align-items: center;
align-content: center;
display: flex;
}
.photo-article img {
display: flex;
align-self: stretch;
}
a:focus {
outline: none;
}
.compt-hover h4 {
font-size: 80%;
font-weight: 700;
text-align: center;
color: var(--gray);
}
.compte .nav-tabs .nav-item {
margin-bottom: -1px;
color: var(--dark);
border-radius: 0;
}
.compte .nav-tabs .nav-link.active {
border-top: solid 3px var(--secondary);
}
.compte .nav-tabs .nav-item i {
color: var(--secondary);
}
/*+++++++++++++++ GAMME ++*/
.gamme {
overflow: hidden;
}
.gamme a {
display: block;
padding: 1.8rem 0.5em;
background: rgba(0,0,0,0);
transition: all 1s;
text-align: center;
max-width: 260px;
margin: 0 auto;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s
}
.gamme img {
width: 100%;
height: auto;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s
}
.gamme a:hover img {
transform: scale(1.2)
}
.gamme a:hover {
background: url("../img/bg-cuvee.png") top center no-repeat;
background-size: contain;
}
.infos-gamme {
background: rgba(0,0,0,0);
position: relative;
padding: 1.2rem 1rem;
-webkit-transition: all .3s ease-out 0s;
-moz-transition: all .3s ease-out 0s;
-ms-transition: all .3s ease-out 0s;
-o-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s
}
.plus-btn {
position: absolute;
right: 0;
top: -1.8em;
;
display: inline-block;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease-out 0s;
-moz-transition: all .3s ease-out 0s;
-ms-transition: all .3s ease-out 0s;
-o-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s
}
.plus-btn i {
color: var(--primary);
background: transparent;
width: 50px;
height: 50px;
display: inline-block;
line-height: 50px;
text-align: center;
font-size: 1.8em;
margin-left: 10px;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s
}
.gamme a:hover {
text-decoration: none;
}
.gamme a:hover .plus-btn {
opacity: 1;
visibility: visible
}
.gamme a:hover .infos-gamme {
background: rgba(0,0,0,0.8);
color: #fff !important;
}
.visuel-gamme {
background: url("../img/bg-cuvee.png") top center no-repeat;
background-size: contain;
}
.assemblages {
text-align: center;
}
.assemblages .col-4, .assemblages .col-md-3 {
padding: 1.5rem;
}
.assemblages .col-4, .assemblages .col-md-3 {
border-right: solid 1px #ccc;
}
.assemblages .col-4:last-child, .assemblages .col-md-3:last-child {
border-right: none;
}
.no-overflow {
overflow: hidden;
}
.bg-opacity {
background: rgba(0,0,0,0.8) !important;
}
.bg-black {
color: #fff;
background: var(--black);
}
.picto-conseils {
max-width: 60px;
height: auto;
}
/*+++++++*/
.accordion h2 {
font-size: 1.9em;
}
.accordion h2 a {
display: block;
text-align: left;
}
.accordion > .card > .card-header {
border-radius: 0;
margin-bottom: -1px;
background-color: transparent;
}
.card {
border-radius: 0;
}
.logo-infos {
max-width: 200px;
height: auto;
}
#popinfos .modal-header {
border-bottom: none;
}
#popinfos .modal-footer {
border-top: none;
}
#popinfos .modal-content {
background: #000 !important;
color: #fff;
text-align: center;
}
.modal-header .close {
position: absolute;
right: 0;
top: 0;
margin: 0;
}
.modal-backdrop.show {
opacity: 0.8;
}
.modal-md {
max-width: 50%;
}
.modal-lg {
max-width: 80%;
}
.modal-title {
width: 95%;
}
.modal-title .btn {
font-size: 0.5em;
float: right;
}
.qua-col .quantity {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.qua-col .pro-qty .qtybtn {
font-size: 2.5em;
float: left;
line-height: 1em;
cursor: pointer;
width: 25px;
text-align: center;
}
.qua-col .pro-qty .qtybtn.dec {
font-size: 2.5em;
}
.qua-col .pro-qty {
width: 125px;
height: 46px;
border: none;
padding: 0 5px;
float: left;
}
.qua-col .pro-qty input {
text-align: center;
width: 52px;
font-size: 14px;
font-weight: 700;
border: none;
color: #4c4c4c;
line-height: 40px;
float: left;
}
.cart-table table tr td.cart-pic {
width: 15%;
text-align: center;
}
.cart-table table tr td.cart-pic img {
max-width: 80px;
}
.cart-table table tr td.p-price {
width: 15%;
color: var(--primary);
font-size: 1.4em;
}
.cart-table table tr td.p-name {
font-weight: 700;
width: 25%;
text-align: center;
}
.table th, .table td {
vertical-align: middle;
}
.table thead th {
text-align: center;
}
.modal-content {
background-color: rgba(255,255,255,0.9);
border: solid 4px var(--secondary);
border-radius: 0;
}
.vignette {
max-height: 80px;
width: auto;
vertical-align: middle;
margin-right: 4px;
display: block;
margin: 0 auto;
}
.cart-name {
text-align: center;
}
/*+++ CHEMIN PANIER +++*/
#progressbar {
margin-bottom: 3rem;
overflow: hidden;
color: var(--dark);
padding-left: 0px;
margin-top: 3rem;
width: auto;
display: flex;
justify-content: center;
}
#progressbar li {
list-style-type: none;
width: 16.66%;
float: left;
position: relative;
font-weight: 600;
}
#progressbar li a {
position: relative;
width: 40px;
height: 40px;
border-radius: 100%;
background: rgba(0,0,0,0);
transition: all 1s;
display: block;
align-self: center;
justify-self: center;
margin: -40px auto 0;
}
#progressbar li a:hover {
background: rgba(0,0,0,0.6);
}
#progressbar #step1:before {
content: "\f291";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar #step2:before {
content: "\f2bb";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar #step3:before {
content: "\f0d1";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar #step4:before {
content: "\f09d";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar #step5:before {
content: "\f733";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar.resa #step1:before {
content: "\f737";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar.resa #step2:before {
content: "\f073";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar.resa #step3:before {
content: "\f274";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar li:before {
width: 40px;
height: 40px;
line-height: 45px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: var(--dark);
border-radius: 50%;
margin: auto;
color: #fff;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: var(--dark);
position: absolute;
left: 0;
top: 21px;
z-index: -1
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
position: absolute;
left: -50%
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
position: absolute;
left: 50%
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px
}
#progressbar li.active:before,
#progressbar li.active:after {
background: var(--primary);
}
/*++++++ CAROUSEL PANIER ++++++++*/
.reco .text-center {
position: relative;
}
.reco .badge.badge-primary {
position: absolute;
top: 0;
left: 35%;
border-radius: 0;
}
/*+++++ PHOTOS +++*/
.photos .photo-item {
position: relative
}
.photos .photo-item:after {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
opacity: 0;
visibility: hidden
}
.photos .photo-item .photo-text-more {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 30px;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
opacity: 0;
visibility: hidden;
text-align: center
}
.photos .photo-item .photo-text-more .icon {
color: #fff;
font-size: 20px
}
.photos .photo-item .photo-text-more .heading {
font-size: 16px;
color: #fff;
margin-bottom: 0;
text-transform: uppercase
}
.photos .photo-item .photo-text-more .meta {
color: #cccccc;
text-transform: uppercase;
font-size: 12px
}
.photos .photo-item img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 300px;
margin-bottom: 5px
}
.fancybox-button svg path {
stroke: var(--secondary) !important;
stroke-linejoin: round;
stroke-width: 2 !important;
}
.fancybox-thumbs {
background: #000 !important;
}
.fancybox-thumbs > ul > li:before {
border: 4px solid var(--primary) !important;
}
.fancybox-button.disabled svg path, .fancybox-button.disabled:hover svg path, .fancybox-button[disabled] svg path, .fancybox-button[disabled]:hover svg path {
color: #888 !important;
stroke: #888 !important;
cursor: default;
}
.langues img {
max-width: 30px;
transition: all 0.8s;
}
.langues img:hover {
opacity: 0.7;
background: #fff;
}
.langues .active img {
opacity: 0.9;
background: var(--secondary);
border: solid 2px #fff;
}
@media (max-width:575.98px) {
.photos .photo-item img {
height: 200px
}
}
.photos .photo-item:hover:after {
opacity: 1;
visibility: visible
}
.photos .photo-item:hover .photo-text-more {
margin-top: 0;
opacity: 1;
visibility: visible
}
/*++++++++++*/
/*++++++++ STYLES DE FORMULAIRES +++++++++++++*/
.btn-link {
font-weight: 600;
color: var(--primary);
text-decoration: none;
font-size: 70%;
margin-left: 5px;
text-transform: uppercase;
letter-spacing: 0.25em;
display: inline-block;
padding: 0.25em;
}
.btn-link:hover {
background: var(--dark);
text-decoration: none;
}
.btn {
border-radius: 0;
text-transform: uppercase;
font-weight: 700;
}
.input-group-text {
color: #ccc;
white-space: nowrap;
background-color: transparent;
border: none;
}
.form-control {
border: none;
border-radius: 0;
color: #666;
padding-left: 0.25rem;
padding-right: 0;
font-size: 0.9em;
padding: 0.25em 0.75rem;
transition: all 0.5s;
}
.formulaire {
background: var(--light);
padding: 1rem;
margin: 1rem;
}
.form-control:active,
.form-control:focus {
color: var(--primary);
background: var(--dark);
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border-color: #fff
}
.form-control::-webkit-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::-moz-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::-ms-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::placeholder {
color: var(--gray);
opacity: 1;
}
label {
font-weight: 500;
}
.modal-content .formulaire {
padding: 0;
margin: 1rem 0;
}
/*++++++++++++++++
++++++++++*/
/*++++++++ FOOTER +++++++++++++*/
.footer a {
color: var(--secondary);
}
.mentions {
margin-top: 2rem;
margin-bottom: 0;
font-size: 0.75em;
letter-spacing: 0.15em;
padding-top: 1rem;
}
.mentions a {
color: #fff;
}
.logos-certif img {
max-height: 80px;
width: auto;
margin: 0 5px;
}
.menu-footer ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
.menu-footer a {
color: #fff;
font-size: 0.9em;
margin-bottom: 10px;
display: block;
}
.reseaux-bottom {
border-left: solid 1px var(--dark);
}
#topcontrol {
bottom: 55px !important;
z-index: 10;
}
.navbar-toggler-icon {
background-color: #000;
font-family: "Font Awesome 5 Pro";
}
/*+++*/
/*++++++++ MEDIAS QUERIES +++++++++++++*/
@media only screen and (min-width:992px) {
.navbar-toggler {
display: none;
}
}
@media only screen and (max-width:992px) and (orientation:portrait) {
.carousel-caption {
left: 5px;
top: 60vh;
padding: 1.5rem;
right: 5px;
}
.carousel-item img {
min-height: 100vh;
width: auto;
display: flex;
}
.header {
height: 45vh;
}
.video-content {
margin-top: 25%;
}
.header-content {
justify-content: center;
align-content: center;
display: flex;
}
.header-content h1 {
font-size: 2.5em;
margin-bottom: 6px;
line-height: 1em;
}
.header img {
width: auto;
display: flex;
}
}
@media only screen and (max-width:992px) {
.navbar {
position: relative !important;
}
}
@media only screen and (max-width:767px) and (orientation:landscape) {
.carousel-caption {
left: 15%;
top: 45vh;
padding: 0.5rem;
}
}
@media only screen and (max-width:980px) {
.modal-md {
max-width: 90%;
}
body {
font-size: 14px;
}
.sticky.is-sticky .navbar-brand {
margin-left: 50px;
display: none;
}
header {
background: #000;
}
.btn-block-menu:hover {
opacity: 0;
}
.navbar-brand {
max-width: 25%;
}
}
@media only screen and (max-width:800px) {
.sticky-wrapper {
/* display: none; */
height: 0 !important;
}
.navbar-collapse {
z-index: 6;
background: #000;
padding-top: 20px;
padding-bottom: 40px;
}
.top-bar {
background: #000 !important;
}
img.logo-footer {
max-height: 80px;
}
.title {
font-size: 2em;
}
body {
font-size: 14px;
}
.infos-gamme h3 {
font-size: 1em;
font-weight: 600;
}
.navbar-brand h1 {
margin-bottom: 0;
margin-top: 0;
}
#Conception, #formations {
text-align: left;
}
.navbar {
display: flex;
}
}
.sticky.is-sticky .navbar-nav {
background: #000 !important;
}
@media only screen and (max-width:767px) {
.copyright p {
margin-bottom: 0;
text-align: left !important;
}
.video-content.hidden-xs {
display: none;
}
.assemblages h4 {
font-size: 1.1em;
line-height: 1.1em;
letter-spacing: 0.1em;
}
.actu-responsive {
margin-bottom: 110px;
}
.photo-actu {
margin-bottom: 0;
}
.reseaux-bottom {
border-left: 0;
}
body {
font-size: 13px;
}
.intro {
width: 90%;
bottom: 10%;
left: 5%;
padding: 0.5rem;
}
.sticky.is-sticky .navbar-brand {
display: none;
}
.logo {
max-width: 70px;
height: auto;
}
.navbar-brand {
display: block;
margin: 0 auto;
text-align: center;
max-height: 200px;
width: 100%;
max-width: none;
}
.navbar-brand img {
max-width: 180px;
max-height: none;
display: block;
margin: 0 auto;
}
.sticky.is-sticky .navbar-brand img {
max-width: inherit;
}
.collapse:not(.show) {
display: none !important;
}
.desktop {
display: none !important;
}
.mobile {
display: block;
}
.cart-table table tr td.cart-pic, .cart-table table .btn i {
display: none;
}
.cart-table table tr td.p-price {
font-size: 1.1em !important;
font-weight: 700
}
.cart-table table .btn {
font-size: 0.8em
}
.header {
height: 70vh;
}
.mobile-visuel-bg.visible-xs {
display: block;
width: 100%;
background: url(../img/photo-replace-video-mobile.jpg) center center no-repeat;
background-size: cover;
}
}
@media only screen and (max-width:640px) {
body {
font-size: 12px;
}
.container-small {
max-width: 90%;
}
}
@media only screen and (max-width: 320px) {
.header {
height: 100vh;
}
}
@media print {
body {
-webkit-print-color-adjust: exact;
}
.print {
display: block !important;
}
.logo-footer {
max-width: 180px;
}
.no-print {
display: none;
}
}
.card-header .btn.btn-link.btn-faq {
text-transform: none;
}
.card-header .btn.btn-link.btn-faq:hover {
color: var(--secondary);
background: #fff;
text-decoration: none;
}
/*+++ Ajout 12/2021 +++++++++*/
.mentions img {
max-width: 60px;
height: auto;
margin-left: 10px;
transition: all 1.2s;
}
.mentions img:hover {
opacity: 0.4;
}
/*+++*/
@charset "utf-8";
/*++++++++ Typographies +++++++++++++*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Source+Code+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/*++++++++ Body et html ++++++++*/
body {
max-width: 100%;
overflow-x: hidden !important;
margin: 0;
font-family: var(--font-family-sans-serif);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #101010;
text-align: left;
background-color: var(--black);
}
section {
z-index: 1;
}
button:focus {
outline: none;
}
.preloader {
background-color: #000;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s;
margin: 0 auto
}
.preloader .preloader-circle {
width: 100px;
height: 100px;
position: relative;
border-style: solid;
border-width: 1px;
border-top-color: var(--secondary);
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
z-index: 10;
border-radius: 50%;
-webkit-box-shadow: 0 1px 1px 0 rgba(var(--pink),1);
box-shadow: 0 1px 1px 0 rgba(var(--pink),1);
background-color: #000;
-webkit-animation: zoom 2000ms infinite ease;
animation: zoom 2000ms infinite ease;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
.preloader .preloader-circle2 {
border-top-color: #fff;
}
.preloader .preloader-img {
position: absolute;
top: 50%;
z-index: 200;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
display: inline-block;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding-top: 6px;
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
.preloader .preloader-img img {
max-width: 55px
}
.preloader .pere-text strong {
font-weight: 800;
color: var(--primary);
text-transform: uppercase
}
@-webkit-keyframes zoom {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
}
@keyframes zoom {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: .6s;
-o-transition: .6s;
transition: .6s
}
}
/*++++++++ TOP +++++++++++++*/
header {
z-index: 2;
display: block;
position: relative;
}
.header-content {
position: absolute;
top: 0;
z-index: 1;
width: 100%;
left: 0;
bottom: 0;
}
.langues {
top: 5px;
right: 5px;
}
.header {
height: 100vh;
}
.header img {
/*min-height: 100vh;*/
width: 100%;
display: flex;
}
.navbar-brand {
display: block;
max-width: 18%;
margin: 0 auto;
z-index: 2;
position: relative;
}
.sticky .navbar-brand {
display: none;
opacity: 0;
}
.btn {
font-size: 0.95em;
letter-spacing: 0.2em;
font-family: var(--font-family-serif);
font-weight: 600;
}
.btn-sm, .btn-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.60em !important;
}
.sticky.is-sticky .navbar-brand {
max-height: 120px;
display: block;
max-width: 180px;
height: 100%;
transition: all 0.8s;
opacity: 1;
float: none;
margin-top: -80px;
overflow-y: hidden;
}
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
width: 100%;
max-height: 80px;
background: #000 !important;
}
.top-bar {
background: transparent !important;
display: flex;
justify-content: center;
padding-top: .5rem;
padding-bottom: 0.5rem;
z-index: 6;
position: relative;
}
/*++++*/
nav {
background: transparent !important;
}
.navbar-nav {
background: transparent;
width: 100%;
justify-content: center;
}
.navbar {
z-index: 2;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
text-align: center;
cursor: pointer;
transition: all 0.8s;
background: rgba(0,0,0,0.7);
margin-left: 0.2em;
margin-right: 0.2em;
}
.navbar-dark .navbar-nav .nav-link::after {
content: '';
display: block;
height: 2px;
width: 10px;
background: transparent;
margin-left: auto;
margin-right: auto;
opacity: 0;
transition: all 0.8s;
}
.navbar-dark .navbar-nav .nav-link:hover::after {
content: '';
display: block;
height: 2px;
width: 60px;
background: var(--primary);
margin-left: auto;
margin-right: auto;
opacity: 11;
}
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active {
color: var(--primary);
font-weight: 600;
}
.nav-item {
font-size: 0.9em;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #fff;
}
.nav-item a {
color: #fff;
}
.navbar-toggler {
color: transparent;
border-color: transparent !important;
position: absolute;
top: 0;
left: 0;
float: left;
align-self: center;
border: none;
box-shadow: none;
}
.navbar-toggler {
padding: 0.25rem 0.75rem;
font-size: 2.5em;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0;
color: #fff !important;
}
.navbar-dark .navbar-toggler-icon {
background-image: none;
}
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
top: 95%;
}
.dropdown-menu {
border-radius: 0;
left: 15px;
}
.dropdown-item, .dropdown-menu h3 {
font-family: var(--font-family-sans-serif);
color: var(--primary) !important;
font-size: 1.1em;
font-weight: 500;
text-transform: none;
letter-spacing: 0.1em;
margin-bottom: 0.6rem;
margin-top: 0.6rem;
}
.dropdown-item.active, .dropdown-item:active {
color: #fff !important;
text-decoration: none;
background-color: var(--primary);
}
.dropdown-menu p {
font-family: var(--font-family-sans-serif);
font-size: 0.8em;
font-weight: 500;
text-transform: none;
letter-spacing: 0.1em;
}
.nav.nav-pills a {
color: var(--primary);
font-family: var(--font-family-serif);
font-weight: 600;
}
.nav.nav-pills a:hover {
text-decoration: none;
color: var(--secondary);
}
.nav.nav-pills li {
padding-bottom: 1.2rem;
display: block;
width: 100%;
}
.dropdown-menu .tab-content {
font-family: var(--font-family-sans-serif);
text-transform: none;
font-size: 0.9em;
letter-spacing: 0;
line-height: 1.4em;
}
.dropdown-toggle::before {
display: inline-block !important;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "+ ";
float: right;
font-size: 2em;
line-height: 0.8em;
font-weight: 300;
}
.dropdown-toggle::after {
border-top: none;
border-right: none;
border-bottom: 0;
border-left: none;
}
/*++++*/
/*++++++++ Styles de texte +++++++++++++*/
a .titre-actu {
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transition: opacity 1s ease-in;
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.15s, transform 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.2s;
display: block;
position: absolute;
text-align: center;
max-width: 100%;
left: 0;
padding: 1rem 3rem;
color: #000;
}
a:hover .titre-actu {
text-decoration: none;
opacity: 0.9;
transform: translate3D(0, -40%, 0);
-webkit-transform: translate3D(0, -40%, 0);
-moz-transform: translate3D(0, -40%, 0);
-ms-transform: translate3D(0, -40%, 0);
-o-transform: translate3D(0, -40%, 0);
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1), transform 1s cubic-bezier(0.59, 0.01, 0.28, 1);
background: #000;
color: #fff;
}
a .titre-actu::before {
content: '+';
background: var(--primary);
padding: 0.5rem;
display: none;
position: relative;
margin: -1.8rem auto 10px;
font-size: 3em;
color: #fff;
font-weight: 100;
width: 39px;
}
a:hover .titre-actu::before {
display: block;
}
.liste-stylisee {
list-style-type: none;
line-height: 1.8em;
}
.liste-stylisee li::before {
content: '';
display: inline-block;
border: solid 1px var(--secondary);
width: 1.2rem;
margin-right: 0.4rem;
vertical-align: middle;
margin-left: -1.5rem;
}
.titre::after {
content: '';
display: inline-block;
border: solid 3px;
width: 2em;
}
.intro {
position: absolute;
width: 55%;
bottom: 10%;
left: 22.5%;
color: #fff;
text-align: center;
background: rgba(0,0,0,0.8);
font-weight: 300;
padding: 1.2rem;
right: auto;
z-index: 4;
font-size: 0.85em;
}
.ass-prct {
display: block;
font-size: 3em;
color: var(--primary);
font-family: var(--font-family-serif);
letter-spacing: 0;
margin-bottom: 2rem;
}
.serif {
font-family: var(--font-family-serif);
letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 1.20rem
}
h1, .h1 {
font-size: 2.5em;
line-height: 1.4em;
font-weight: 600;
white-space: normal;
font-family: var(--font-family-serif);
}
h2, .h2 {
font-size: 2.5em;
line-height: 1.2em;
font-weight: 400;
font-family: var(--font-family-serif);
}
h3, .h3 {
font-family: var(--font-family-sans-serif);
font-size: 1.6em;
line-height: 1.4em;
font-weight: 400;
letter-spacing: 0.15em;
}
h4, .h4 {
font-size: 1.2em;
line-height: 1.2em;
font-weight: 400;
letter-spacing: 0.3em;
}
h5, .h5 {
font-size: 0.9em;
line-height: 1.2em;
font-weight: 400;
letter-spacing: 0.3em;
}
.title {
text-transform: uppercase;
font-size: 2.8em;
text-align: center;
}
.title::after {
content: '';
display: inline-block;
height: 2px;
width: 0.75em;
background: var(--primary);
margin-right: auto;
vertical-align: middle;
margin-left: 5px;
}
.title::before {
content: '';
display: inline-block;
height: 2px;
width: 0.75em;
background: var(--primary);
margin-left: auto;
vertical-align: middle;
margin-right: 5px;
}
h4.description {
background: rgba(255,255,255,0.8);
padding: 1rem;
border-radius: 2.2rem;
border: dashed 2px #fff;
font-size: 1.2em;
line-height: 1.45em;
}
.copyright {
color: #fff;
font-size: 0.8em;
letter-spacing: 0.15em;
padding-top: 1rem;
}
a {
color: var(--primary);
}
hr {
color: inherit;
border-color: inherit;
border-style: dotted;
}
.text-gray {
color: var(--gray) !important;
}
.fa, .fab, .fad, .fal, .far, .fas {
vertical-align: middle;
}
b, strong {
font-weight: 900;
}
.text-fluid {
font-size: 1.2em;
}
.blockquote {
margin-bottom: 1rem;
font-size: 1.05rem;
padding-left: 0.75em;
border-left: solid 3px #efefef;
font-weight: 500;
}
/*++++++++ 
+++++ STYLES AUTRES CONTENUS DIVERS
(tableaux, sliders, galleries, etc.)+++++++++++++*/
/*+++++++ FLECHES +++++*/
.print {
display: none;
}
.container-lg {
max-width: 1600px;
}
.btn-down {
position: absolute;
bottom: 5px;
left: 0;
z-index: 10;
width: 100%;
text-align: center;
}
.fleche {
display: inline-block;
width: 25px;
height: 25px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
}
.fleche-white {
display: inline-block;
width: 15px;
height: 15px;
border-top: 2px solid #fff !important;
border-right: 2px solid #fff !important;
}
.fleche-bottom {
transform: rotate(135deg);
}
.btn-block-menu {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
transition: all 1.5s;
opacity: 0;
left: 0;
top: 0;
}
.btn-block-menu:hover {
opacity: 0.5;
}
.btn-block-menu.active {
opacity: 0.5;
border: solid 2px var(--secondary);
}
section {
position: relative;
width: 100%;
min-width: 100vw;
max-width: 100vw;
overflow: hidden;
}
.container-small {
max-width: 50%;
margin-left: auto;
margin-right: auto;
background: rgba(255,255,255,0.8);
}
.ph-btn {
max-height: 150px;
overflow: hidden;
}
.block-oeno {
background: rgba(0,0,0,0.8);
color: #fff !important;
padding: 1.5rem;
margin: 0 10px 10px;
}
.block-oeno h3 {
font-size: 1.3em;
font-weight: 600;
}
.block-image {
position: relative;
width: 100%;
border: solid 2px transparent;
cursor: pointer;
}
.image {
display: block;
width: 100%;
height: auto;
}
.block-image .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: all 2s;
background-color: rgba(0,0,0,0.8);
text-align: center;
padding-top: 30%;
padding-left: 2%;
padding-right: 2%;
color: #fff !important;
font-size: 0.8em;
min-height: 222px;
min-width: 200px;
cursor: default;
}
.block-image:hover .overlay {
opacity: 1;
border-color: var(--primary);
border-radius: 0;
}
section#gamme .block-image .overlay {
padding-top: 80%;
}
/*.block-image:hover .image {
-webkit-animation: kenburns-top 5s ease-out both;
animation: kenburns-top 5s ease-out both;
}*/
.block-image .overlay.div-actu {
background: transparent;
}
.block-image .overlay.div-actu .text a {
background: rgba(0,0,0,0.8);
display: block;
color: #fff;
padding: 1.5rem;
margin-top: 25%;
position: relative;
}
.block-image .overlay.div-actu .text a::before {
content: '+';
background: var(--primary);
padding: 0.5rem;
display: none;
position: absolute;
font-size: 3em;
color: #fff;
font-weight: 100;
width: 39px;
left: 45%;
height: 39px;
top: -29px;
line-height: 1em;
}
.block-image .overlay.div-actu .text a:hover {
text-decoration: none;
}
.block-image .overlay.div-actu .text a:hover::before {
display: block;
}
/**
* ----------------------------------------
* animation kenburns-top
* ----------------------------------------
*/
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
.block-image .overlay .text {
cursor: default;
transform: translate3d(0, -40%, 0);
-webkit-transform: translate3d(0, -40%, 0);
-moz-transform: translate3d(0, -40%, 0);
-ms-transform: translate3d(0, -40%, 0);
-o-transform: translate3d(0, -40%, 0);
transition: opacity 0.2s ease-in;
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.15s, transform 1s cubic-bezier(0.59, 0.01, 0.28, 1) 0.2s;
}
.block-image:hover .overlay .text {
opacity: 1;
transform: translate3D(0, -40%, 0);
-webkit-transform: translate3D(0, -40%, 0);
-moz-transform: translate3D(0, -40%, 0);
-ms-transform: translate3D(0, -40%, 0);
-o-transform: translate3D(0, -40%, 0);
transition: opacity 1s cubic-bezier(0.59, 0.01, 0.28, 1), transform 1s cubic-bezier(0.59, 0.01, 0.28, 1);
}
.video-content::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
}
#oenotourisme {
padding-top: 10%;
padding-bottom: 10%;
}
.bg-image {
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.kenburns-top {
-webkit-animation: kenburns-top 20s ease-in-out infinite alternate both;
animation: kenburns-top 20s ease-in-out infinite alternate both;
}
/**
* ----------------------------------------
* animation kenburns-top
* ----------------------------------------
*/
@-webkit-keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
@keyframes kenburns-top {
0% {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
-webkit-transform-origin: 50% 16%;
transform-origin: 50% 16%;
}
100% {
-webkit-transform: scale(1.25) translateY(-15px);
transform: scale(1.25) translateY(-15px);
-webkit-transform-origin: top;
transform-origin: top;
}
}
.bounce-animate {
animation-name: float-bob;
animation-duration: 2s;
animation-iteration-count: infinite;
-moz-animation-name: float-bob;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: float-bob;
-ms-animation-duration: 2s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-name: float-bob;
-o-animation-duration: 2s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear
}
@-webkit-keyframes float-bob {
0% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
50% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
100% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
}
.heartbeat {
animation: heartbeat 1s infinite alternate
}
@-webkit-keyframes heartbeat {
to {
-webkit-transform: scale(1.03);
transform: scale(1.03)
}
}
.rotateme {
-webkit-animation-name: rotateme;
animation-name: rotateme;
-webkit-animation-duration: 30s;
animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear
}
@keyframes rotateme {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes rotateme {
from {
-webkit-transform: rotate(0deg)
}
to {
-webkit-transform: rotate(360deg)
}
}
.date {
display: block;
position: absolute;
top: 0;
left: 15px;
z-index: 1;
background: var(--secondary);
padding: 1rem;
font-size: 0.8em;
font-weight: 600;
color: #fff;
}
.photo-actu {
max-width: 100%;
overflow: hidden;
text-align: center;
position: relative;
display: flex;
align-content: center;
justify-items: center;
justify-content: center;
/*height: 100%;*/
z-index: 0;
}
.photo-actu img {
position: relative;
margin: 0 auto;
display: flex;
align-self: center;
justify-self: center;
filter: grayscale(0);
transition: 0.5s ease-in-out;
min-height: 100%;
width: 100%;
}
#actualites .photo-actu img {
position: relative;
margin: 0 auto;
display: flex;
align-self: center;
justify-self: center;
filter: grayscale(0);
transition: 0.5s ease-in-out;
min-height: 100%;
width: 100%;
max-height: 300px;
}
#actualites a .titre-actu {
padding: 1rem;
font-size: 1em;
}
.page-item.disabled .page-link {
color: var(--light);
border-color: transparent;
}
.page-link {
line-height: 1.25;
color: var(--primary);
border: none;
}
.page-link:hover {
z-index: 2;
color: var(--secondary);
background-color: var(--light);
border-color: transparent;
}
/*+++++ PANIER TOP +++*/
li.cart-icon, li.compt-icon {
position: relative;
}
li.cart-icon:hover .cart-hover, li.compt-icon:hover .compt-hover {
opacity: 1;
visibility: visible;
top: 60px;
}
li.cart-icon.nav-item a.nav-link {
color: var(--secondary);
position: relative;
display: inline-block;
}
li.compt-icon.nav-item a.nav-link {
color: var(--white);
position: relative;
display: inline-block;
}
li.cart-icon a span, li.compt-icon a span {
position: absolute;
right: 5px;
top: -1px;
height: 20px;
width: 20px;
background: var(--primary);
color: #ffffff;
border-radius: 50%;
font-size: 0.7em;
font-weight: 700;
text-align: center;
}
li.cart-icon .cart-hover {
position: absolute;
left: -200%;
top: 100px;
width: 320px;
background: #ffffff;
z-index: 99;
text-align: left;
padding: 30px;
opacity: 0;
visibility: hidden;
-webkit-box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
li.compt-icon .compt-hover {
position: absolute;
right: -110px;
top: 40px;
width: 220px;
background: #ffffff;
z-index: 99;
text-align: left;
padding: 10px 15px;
opacity: 0;
visibility: hidden;
-webkit-box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
box-shadow: 0 13px 32px rgb(51 51 51 / 10%);
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: #000;
}
.compt-hover .form-control {
color: #000;
border-bottom: solid 1px #000;
padding: 2px;
}
.compt-hover label {
text-transform: none;
font-size: 85%;
}
li.cart-icon .cart-hover .select-items table {
width: 100%;
}
li.cart-icon .cart-hover .select-items table tr td {
padding-bottom: 20px;
}
.si-pic img {
border: 1px solid #ebebeb;
width: 100%;
height: auto;
max-width: 50px;
}
.si-pic {
max-height: 150px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text {
padding-left: 18px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text .product-selected p {
color: #e7ab3c;
line-height: 30px;
margin-bottom: 7px;
}
li.cart-icon .cart-hover .select-items table tr td.si-text .product-selected h6 {
color: #000;
font-size: 0.7em;
}
li.cart-icon .cart-hover .select-items table tr td.si-close {
color: #252525;
font-size: 16px;
cursor: pointer;
}
li.cart-icon .cart-hover .select-total {
overflow: hidden;
border-top: 1px solid #e5e5e5;
padding-top: 26px;
margin-bottom: 30px;
}
li.cart-icon .cart-hover .select-total span {
font-size: 14px;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.5px;
float: left;
}
li.cart-icon .cart-hover .select-total h5 {
color: var(--primary);
float: right;
}
li.cart-icon .cart-hover .select-button .view-card {
font-size: 12px;
letter-spacing: 2px;
display: block;
text-align: center;
color: #ffffff;
padding: 15px 30px 12px;
margin-bottom: 10px;
}
li.cart-icon .cart-hover .select-button .checkout-btn {
font-size: 12px;
letter-spacing: 2px;
display: block;
text-align: center;
padding: 15px 30px 12px;
}
li.cart-price {
font-size: 18px;
font-weight: 700;
}
.cart-hover::before, .compt-hover::before {
content: '';
display: block;
position: absolute;
width: 0;
border-right: 10px solid transparent;
border-bottom: 20px solid #fff;
border-left: 10px solid transparent;
top: -20px;
left: 42%;
}
.btn-home:hover i {
-webkit-animation: bounce-right 0.8s both;
animation: bounce-right 0.8s both;
}
.desktop {
display: block;
}
.mobile {
display: none !important;
}
.photo-article {
justify-content: center;
overflow: hidden;
align-items: center;
align-content: center;
display: flex;
}
.photo-article img {
display: flex;
align-self: stretch;
}
a:focus {
outline: none;
}
.compt-hover h4 {
font-size: 80%;
font-weight: 700;
text-align: center;
color: var(--gray);
}
.compte .nav-tabs .nav-item {
margin-bottom: -1px;
color: var(--dark);
border-radius: 0;
}
.compte .nav-tabs .nav-link.active {
border-top: solid 3px var(--secondary);
}
.compte .nav-tabs .nav-item i {
color: var(--secondary);
}
/*+++++++++++++++ GAMME ++*/
.gamme {
overflow: hidden;
}
.gamme a {
display: block;
padding: 1.8rem 0.5em;
background: rgba(0,0,0,0);
transition: all 1s;
text-align: center;
max-width: 260px;
margin: 0 auto;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s
}
.gamme img {
width: 100%;
height: auto;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s
}
.gamme a:hover img {
transform: scale(1.2)
}
.gamme a:hover {
background: url("../img/bg-cuvee.png") top center no-repeat;
background-size: contain;
}
.infos-gamme {
background: rgba(0,0,0,0);
position: relative;
padding: 1.2rem 1rem;
-webkit-transition: all .3s ease-out 0s;
-moz-transition: all .3s ease-out 0s;
-ms-transition: all .3s ease-out 0s;
-o-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s
}
.plus-btn {
position: absolute;
right: 0;
top: -1.8em;
;
display: inline-block;
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease-out 0s;
-moz-transition: all .3s ease-out 0s;
-ms-transition: all .3s ease-out 0s;
-o-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s
}
.plus-btn i {
color: var(--primary);
background: transparent;
width: 50px;
height: 50px;
display: inline-block;
line-height: 50px;
text-align: center;
font-size: 1.8em;
margin-left: 10px;
-webkit-transition: all .4s ease-out 0s;
-moz-transition: all .4s ease-out 0s;
-ms-transition: all .4s ease-out 0s;
-o-transition: all .4s ease-out 0s;
transition: all .4s ease-out 0s
}
.gamme a:hover {
text-decoration: none;
}
.gamme a:hover .plus-btn {
opacity: 1;
visibility: visible
}
.gamme a:hover .infos-gamme {
background: rgba(0,0,0,0.8);
color: #fff !important;
}
.visuel-gamme {
background: url("../img/bg-cuvee.png") top center no-repeat;
background-size: contain;
}
.assemblages {
text-align: center;
}
.assemblages .col-4, .assemblages .col-md-3 {
padding: 1.5rem;
}
.assemblages .col-4, .assemblages .col-md-3 {
border-right: solid 1px #ccc;
}
.assemblages .col-4:last-child, .assemblages .col-md-3:last-child {
border-right: none;
}
.no-overflow {
overflow: hidden;
}
.bg-opacity {
background: rgba(0,0,0,0.8) !important;
}
.bg-black {
color: #fff;
background: var(--black);
}
.picto-conseils {
max-width: 60px;
height: auto;
}
/*+++++++*/
.accordion h2 {
font-size: 1.9em;
}
.accordion h2 a {
display: block;
text-align: left;
}
.accordion > .card > .card-header {
border-radius: 0;
margin-bottom: -1px;
background-color: transparent;
}
.card {
border-radius: 0;
}
.logo-infos {
max-width: 200px;
height: auto;
}
#popinfos .modal-header {
border-bottom: none;
}
#popinfos .modal-footer {
border-top: none;
}
#popinfos .modal-content {
background: #000 !important;
color: #fff;
text-align: center;
}
.modal-header .close {
position: absolute;
right: 0;
top: 0;
margin: 0;
}
.modal-backdrop.show {
opacity: 0.8;
}
.modal-md {
max-width: 50%;
}
.modal-lg {
max-width: 80%;
}
.modal-title {
width: 95%;
}
.modal-title .btn {
font-size: 0.5em;
float: right;
}
.qua-col .quantity {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.qua-col .pro-qty .qtybtn {
font-size: 2.5em;
float: left;
line-height: 1em;
cursor: pointer;
width: 25px;
text-align: center;
}
.qua-col .pro-qty .qtybtn.dec {
font-size: 2.5em;
}
.qua-col .pro-qty {
width: 125px;
height: 46px;
border: none;
padding: 0 5px;
float: left;
}
.qua-col .pro-qty input {
text-align: center;
width: 52px;
font-size: 14px;
font-weight: 700;
border: none;
color: #4c4c4c;
line-height: 40px;
float: left;
}
.cart-table table tr td.cart-pic {
width: 15%;
text-align: center;
}
.cart-table table tr td.cart-pic img {
max-width: 80px;
}
.cart-table table tr td.p-price {
width: 15%;
color: var(--primary);
font-size: 1.4em;
}
.cart-table table tr td.p-name {
font-weight: 700;
width: 25%;
text-align: center;
}
.table th, .table td {
vertical-align: middle;
}
.table thead th {
text-align: center;
}
.modal-content {
background-color: rgba(255,255,255,0.9);
border: solid 4px var(--secondary);
border-radius: 0;
}
.vignette {
max-height: 80px;
width: auto;
vertical-align: middle;
margin-right: 4px;
display: block;
margin: 0 auto;
}
.cart-name {
text-align: center;
}
/*+++ CHEMIN PANIER +++*/
#progressbar {
margin-bottom: 3rem;
overflow: hidden;
color: var(--dark);
padding-left: 0px;
margin-top: 3rem;
width: auto;
display: flex;
justify-content: center;
}
#progressbar li {
list-style-type: none;
width: 16.66%;
float: left;
position: relative;
font-weight: 600;
}
#progressbar li a {
position: relative;
width: 40px;
height: 40px;
border-radius: 100%;
background: rgba(0,0,0,0);
transition: all 1s;
display: block;
align-self: center;
justify-self: center;
margin: -40px auto 0;
}
#progressbar li a:hover {
background: rgba(0,0,0,0.6);
}
#progressbar #step1:before {
content: "\f291";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar #step2:before {
content: "\f2bb";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar #step3:before {
content: "\f0d1";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar #step4:before {
content: "\f09d";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar #step5:before {
content: "\f733";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar.resa #step1:before {
content: "\f737";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar.resa #step2:before {
content: "\f073";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar.resa #step3:before {
content: "\f274";
font-family: "Font Awesome 5 Pro";
font-weight: 300;
}
#progressbar li:before {
width: 40px;
height: 40px;
line-height: 45px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: var(--dark);
border-radius: 50%;
margin: auto;
color: #fff;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: var(--dark);
position: absolute;
left: 0;
top: 21px;
z-index: -1
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
position: absolute;
left: -50%
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
position: absolute;
left: 50%
}
#progressbar li:last-child:after {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px
}
#progressbar li:first-child:after {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px
}
#progressbar li.active:before,
#progressbar li.active:after {
background: var(--primary);
}
/*++++++ CAROUSEL PANIER ++++++++*/
.reco .text-center {
position: relative;
}
.reco .badge.badge-primary {
position: absolute;
top: 0;
left: 35%;
border-radius: 0;
}
/*+++++ PHOTOS +++*/
.photos .photo-item {
position: relative
}
.photos .photo-item:after {
position: absolute;
content: "";
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
opacity: 0;
visibility: hidden
}
.photos .photo-item .photo-text-more {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 30px;
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
opacity: 0;
visibility: hidden;
text-align: center
}
.photos .photo-item .photo-text-more .icon {
color: #fff;
font-size: 20px
}
.photos .photo-item .photo-text-more .heading {
font-size: 16px;
color: #fff;
margin-bottom: 0;
text-transform: uppercase
}
.photos .photo-item .photo-text-more .meta {
color: #cccccc;
text-transform: uppercase;
font-size: 12px
}
.photos .photo-item img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
height: 300px;
margin-bottom: 5px
}
.fancybox-button svg path {
stroke: var(--secondary) !important;
stroke-linejoin: round;
stroke-width: 2 !important;
}
.fancybox-thumbs {
background: #000 !important;
}
.fancybox-thumbs > ul > li:before {
border: 4px solid var(--primary) !important;
}
.fancybox-button.disabled svg path, .fancybox-button.disabled:hover svg path, .fancybox-button[disabled] svg path, .fancybox-button[disabled]:hover svg path {
color: #888 !important;
stroke: #888 !important;
cursor: default;
}
.langues img {
max-width: 30px;
transition: all 0.8s;
}
.langues img:hover {
opacity: 0.7;
background: #fff;
}
.langues .active img {
opacity: 0.9;
background: var(--secondary);
border: solid 2px #fff;
}
@media (max-width:575.98px) {
.photos .photo-item img {
height: 200px
}
}
.photos .photo-item:hover:after {
opacity: 1;
visibility: visible
}
.photos .photo-item:hover .photo-text-more {
margin-top: 0;
opacity: 1;
visibility: visible
}
/*++++++++++*/
/*++++++++ STYLES DE FORMULAIRES +++++++++++++*/
.btn-link {
font-weight: 600;
color: var(--primary);
text-decoration: none;
font-size: 70%;
margin-left: 5px;
text-transform: uppercase;
letter-spacing: 0.25em;
display: inline-block;
padding: 0.25em;
}
.btn-link:hover {
background: var(--dark);
text-decoration: none;
}
.btn {
border-radius: 0;
text-transform: uppercase;
font-weight: 700;
}
.input-group-text {
color: #ccc;
white-space: nowrap;
background-color: transparent;
border: none;
}
.form-control {
border: none;
border-radius: 0;
color: #666;
padding-left: 0.25rem;
padding-right: 0;
font-size: 0.9em;
padding: 0.25em 0.75rem;
transition: all 0.5s;
}
.formulaire {
background: var(--light);
padding: 1rem;
margin: 1rem;
}
.form-control:active,
.form-control:focus {
color: var(--primary);
background: var(--dark);
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border-color: #fff
}
.form-control::-webkit-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::-moz-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::-ms-input-placeholder {
color: var(--gray);
opacity: 1;
}
.form-control::placeholder {
color: var(--gray);
opacity: 1;
}
label {
font-weight: 500;
}
.modal-content .formulaire {
padding: 0;
margin: 1rem 0;
}
/*++++++++++++++++
++++++++++*/
/*++++++++ FOOTER +++++++++++++*/
.footer a {
color: var(--secondary);
}
.mentions {
margin-top: 2rem;
margin-bottom: 0;
font-size: 0.75em;
letter-spacing: 0.15em;
padding-top: 1rem;
}
.mentions a {
color: #fff;
}
.logos-certif img {
max-height: 80px;
width: auto;
margin: 0 5px;
}
.menu-footer ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
.menu-footer a {
color: #fff;
font-size: 0.9em;
margin-bottom: 10px;
display: block;
}
.reseaux-bottom {
border-left: solid 1px var(--dark);
}
#topcontrol {
bottom: 55px !important;
z-index: 10;
}
.navbar-toggler-icon {
background-color: #000;
font-family: "Font Awesome 5 Pro";
}
/*+++*/
/*++++++++ MEDIAS QUERIES +++++++++++++*/
@media only screen and (min-width:992px) {
.navbar-toggler {
display: none;
}
}
@media only screen and (max-width:992px) and (orientation:portrait) {
.carousel-caption {
left: 5px;
top: 60vh;
padding: 1.5rem;
right: 5px;
}
.carousel-item img {
min-height: 100vh;
width: auto;
display: flex;
}
.header {
height: 45vh;
}
.video-content {
margin-top: 25%;
}
.header-content {
justify-content: center;
align-content: center;
display: flex;
}
.header-content h1 {
font-size: 2.5em;
margin-bottom: 6px;
line-height: 1em;
}
.header img {
width: auto;
display: flex;
}
}
@media only screen and (max-width:992px) {
.navbar {
position: relative !important;
}
}
@media only screen and (max-width:767px) and (orientation:landscape) {
.carousel-caption {
left: 15%;
top: 45vh;
padding: 0.5rem;
}
}
@media only screen and (max-width:980px) {
.modal-md {
max-width: 90%;
}
body {
font-size: 14px;
}
.sticky.is-sticky .navbar-brand {
margin-left: 50px;
display: none;
}
header {
background: #000;
}
.btn-block-menu:hover {
opacity: 0;
}
.navbar-brand {
max-width: 25%;
}
}
@media only screen and (max-width:800px) {
.sticky-wrapper {
/* display: none; */
height: 0 !important;
}
.navbar-collapse {
z-index: 6;
background: #000;
padding-top: 20px;
padding-bottom: 40px;
}
.top-bar {
background: #000 !important;
}
img.logo-footer {
max-height: 80px;
}
.title {
font-size: 2em;
}
body {
font-size: 14px;
}
.infos-gamme h3 {
font-size: 1em;
font-weight: 600;
}
.navbar-brand h1 {
margin-bottom: 0;
margin-top: 0;
}
#Conception, #formations {
text-align: left;
}
.navbar {
display: flex;
}
}
.sticky.is-sticky .navbar-nav {
background: #000 !important;
}
@media only screen and (max-width:767px) {
.copyright p {
margin-bottom: 0;
text-align: left !important;
}
.video-content.hidden-xs {
display: none;
}
.assemblages h4 {
font-size: 1.1em;
line-height: 1.1em;
letter-spacing: 0.1em;
}
.actu-responsive {
margin-bottom: 110px;
}
.photo-actu {
margin-bottom: 0;
}
.reseaux-bottom {
border-left: 0;
}
body {
font-size: 13px;
}
.intro {
width: 90%;
bottom: 10%;
left: 5%;
padding: 0.5rem;
}
.sticky.is-sticky .navbar-brand {
display: none;
}
.logo {
max-width: 70px;
height: auto;
}
.navbar-brand {
display: block;
margin: 0 auto;
text-align: center;
max-height: 200px;
width: 100%;
max-width: none;
}
.navbar-brand img {
max-width: 180px;
max-height: none;
display: block;
margin: 0 auto;
}
.sticky.is-sticky .navbar-brand img {
max-width: inherit;
}
.collapse:not(.show) {
display: none !important;
}
.desktop {
display: none !important;
}
.mobile {
display: block;
}
.cart-table table tr td.cart-pic, .cart-table table .btn i {
display: none;
}
.cart-table table tr td.p-price {
font-size: 1.1em !important;
font-weight: 700
}
.cart-table table .btn {
font-size: 0.8em
}
.header {
height: 70vh;
}
.mobile-visuel-bg.visible-xs {
display: block;
width: 100%;
background: url(../img/photo-replace-video-mobile.jpg) center center no-repeat;
background-size: cover;
}
}
@media only screen and (max-width:640px) {
body {
font-size: 12px;
}
.container-small {
max-width: 90%;
}
}
@media only screen and (max-width: 320px) {
.header {
height: 100vh;
}
}
@media print {
body {
-webkit-print-color-adjust: exact;
}
.print {
display: block !important;
}
.logo-footer {
max-width: 180px;
}
.no-print {
display: none;
}
}
.card-header .btn.btn-link.btn-faq {
text-transform: none;
}
.card-header .btn.btn-link.btn-faq:hover {
color: var(--secondary);
background: #fff;
text-decoration: none;
}
/*+++ Ajout 12/2021 +++++++++*/
.mentions img {
max-width: 60px;
height: auto;
margin-left: 10px;
transition: all 1.2s;
}
.mentions img:hover {
opacity: 0.4;
}
/*+++*/