@charset 'utf-8';
/*++++++++ TYPOGRAPHIES ++++++++++++++++++++++++++++++++++++++++++*/
@import url(https://fonts.googleapis.com/css2?family=Allura&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
/*++++++++ BODY ET HTML ++++++++++++++++++++++++++++++++++++++++++*/
::selection {
background-color: var(--secondary);
}
:focus-visible {
outline: none;
}
body {
font-weight: 400;
line-height: 1.5em;
font-size: 15px;
color: var(--white);
background-color: var(--dark);
overflow-x: hidden !important;
}
label {
margin-bottom: 0;
cursor: pointer;
}
.print {
display: none;
}
.preloader {
background-color: rgba(0, 0, 0, 0.95);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
margin: 0 auto;
}
.preloader .preloader-circle {
width: 100px;
height: 100px;
position: relative;
border-style: solid;
border-width: 1px;
border-top-color: var(--gray-light);
border-bottom-color: var(--secondary);
border-left-color: transparent;
border-right-color: transparent;
z-index: 10;
border-radius: 50%;
-webkit-box-shadow: 0 1px 1px 0 rgba(var(--gray-light), 1);
box-shadow: 0 1px 1px 0 rgba(var(--secondary), 1);
background-color: transparent;
-webkit-animation: zoom 2000ms infinite ease;
animation: zoom 2000ms infinite ease;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.preloader .preloader-circle2 {
border-top-color: var(--secondary);
}
.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: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
.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: 0.6s;
-o-transition: 0.6s;
transition: 0.6s
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s
}
}
@keyframes zoom {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s
}
}
/*++++++++ TOP ++++++++++++++++++++++++++++++++++++++++++*/
.logo {
max-width: 110px;
height: auto;
transition: all 0.25s;
display: inline-block;
position: relative;
width: 100%;
}
.logo-home {
width: 100% !important;
margin: 0 auto;
max-width: 360px;
}
.co-brand {
max-width: 120px;
height: auto;
vertical-align: middle;
}
.navbar-brand span {
display: inline-block;
position: relative;
vertical-align: middle;
}
.navbar-brand {
display: inline-block;
max-width: 100%;
padding: 0;
font-size: 1rem;
margin-right: 0rem;
}
.sticky .navbar-brand {
display: none;
opacity: 0;
}
.sticky.is-sticky .navbar-brand {
display: block;
height: 100%;
transition: all 0.25s;
opacity: 1;
}
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
width: 100%;
max-height: 80px;
background: #000 !important;
}
nav {
background: transparent !important;
}
.navbar-nav {
background: transparent;
width: 100%;
justify-content: center;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
text-align: center;
cursor: pointer;
transition: all 0.25s;
}
.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(--secondary);
font-weight: 600;
}
.dropdown-menu .nav-item {
padding-right: 0;
}
.nav-item {
font-size: 0.9em;
color: #fff;
padding-left: 0.5em;
padding-right: 0.5em;
}
.dropdown-menu .nav-item a::before {
content: "\f061";
margin-left: -25px;
margin-right: 10px;
font-family: "Font Awesome 5 Pro";
font-weight: normal;
}
.navbar-expand-lg .navbar-nav .nav-link {
font-weight: 700;
}
.nav-item a {
color: #fff;
transition: all 0.25s;
}
.nav-item a:hover {
color: var(--secondary) !important;
}
.navbar-dark .navbar-toggler {
border-color: transparent !important;
position: absolute;
top: 0;
right: 0;
box-shadow: none;
}
.navbar-toggler {
padding: 0.25rem 0.75rem 0.25rem 0rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0;
}
.dropdown-item {
font-family: 'Raleway', sans-serif;
font-size: 0.8em;
font-weight: 500;
text-transform: none;
letter-spacing: 0.1em;
}
.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus {
color: var(--secondary) !important;
text-decoration: none;
background-color: var(--primary);
}
.dropdown-toggle::after {
display: inline-block !important;
margin-left: 0.255em;
vertical-align: middle;
border-top: none;
border-right: none;
border-bottom: 0;
border-left: none;
font-family: flaticon !important;
content: "";
font-weight: 900;
color: var(--secondary);
transition: all 0.25s;
}
.dropdown-menu p {
font-family: 'Raleway', sans-serif;
font-size: 0.8em;
font-weight: 500;
text-transform: none;
letter-spacing: 0.1em;
}
.megamenu {
position: static;
}
.dropdown-menu.show {
display: block;
left: 0;
left: auto;
min-width: 300px;
}
.nav-item.dropdown.show a.nav-link.dropdown-toggle {
color: var(--secondary);
}
.nav-item.dropdown.show .dropdown-toggle::after {
content: "";
}
.megamenu .dropdown-menu {
background: none;
border: none;
width: 100%;
box-shadow: none;
border-radius: unset;
}
.navbar-collapse {
padding-top: 1rem;
padding-bottom: 1rem;
border-top-left-radius: 1.75rem;
border-bottom-right-radius: 1.75rem;
min-width: 100%;
align-self: flex-end;
transition: all 0.25s;
}
.navbar-collapse.collapse.show {
margin-top: 50px;
}
.top-bar {
min-width: 100%;
padding: 0.25rem 1rem;
background: var(--light);
border-bottom-left-radius: 1.75rem;
border-top-right-radius: 1.75rem;
}
.menu-compte {
list-style-type: none;
padding-left: 0;
text-transform: uppercase;
font-size: 90%;
width: 80%;
margin: 0 auto;
display: block;
position: relative;
}
.nav-item.nom-compte {
text-transform: none;
text-align: center;
background: var(--dark);
padding: 1rem;
}
.menu-compte li a {
display: block;
position: relative;
padding: 1rem 1.5rem 1.5rem;
letter-spacing: 0.25em;
font-weight: 500;
}
.menu-compte li.active a {
color: var(--secondary);
}
.menu-compte li a::after {
content: '';
display: block;
position: relative;
width: 100%;
height: 1px;
transition: all 0.25s;
background: var(--secondary);
margin-top: 1rem;
}
.menu-compte li.active a::after {
background: var(--light);
width: 10%;
}
.menu-compte li a:hover {
text-decoration: none;
color: var(--secondary);
}
.menu-compte li a:hover::after {
width: 0;
}
/* AUTRE TYPE DE STICKY NAV*/
.ftco-navbar-dark.scrolled .logo {
background: #fff;
max-width: 40px;
margin-right: 10px;
}
.navbar {
padding: 0 1rem;
}
.navbar-nav {
width: 96%;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
align-items: center;
}
.navbar .container, .navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
display: block;
}
.ftco-navbar-dark {
background: transparent !important;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
@media (max-width: 991.98px) {
.ftco-navbar-dark {
position: relative !important;
top: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 15px;
padding-right: 15px;
}
}
.ftco-navbar-dark .container {
width: 100%;
margin: 0 auto;
padding: 0;
}
.ftco-navbar-dark .navbar-brand {
color: var(--light);
}
.ftco-navbar-dark .navbar-brand:hover, .ftco-navbar-dark .navbar-brand:focus {
color: var(--secondary) !important;
}
@media (max-width: 991.98px) {
.ftco-navbar-dark .navbar-brand {
color: var(--light);
}
}
@media (max-width: 991.98px) {
.ftco-navbar-dark .navbar-nav {
padding-bottom: 20px;
margin-right: 0;
}
}
.ftco-navbar-dark .navbar-nav > .nav-item > .nav-link {
padding-top: .7rem;
padding-bottom: .7rem;
padding-left: 0;
padding-right: 0;
color: var(--light);
font-weight: 500;
opacity: 1 !important;
text-transform: uppercase;
font-size: 0.95em;
}
.ftco-navbar-dark .navbar-nav > .nav-item > .nav-link span {
position: relative;
display: block;
padding: 0 0.25em 2px;
}
@media (max-width: 1199.98px) {
.ftco-navbar-dark .navbar-nav > .nav-item > .nav-link span {
display: inline-block;
}
}
.ftco-navbar-dark .navbar-nav > .nav-item > .nav-link span:before {
content: "";
position: absolute;
width: 200%;
height: 3px;
bottom: 0;
left: -50%;
z-index: -1;
background: var(--secondary);
visibility: visible;
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-ms-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;
}
.ftco-navbar-dark .navbar-nav > .nav-item > .nav-link:hover span:before {
visibility: visible;
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform: scaleX(1);
}
.ftco-navbar-dark .navbar-nav > .nav-item > .nav-link {
display: inline-block;
position: relative;
/*-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
transform: perspective(1000px) rotate3d(0,1,0,0deg);
-webkit-transition: -webkit-transform 0.25s, color 0.25s;
transition: transform 0.25s, color 0.25s;*/
}
.ftco-navbar-dark .navbar-nav > .nav-item > .nav-link:hover {
color: var(--secondary);
/*	-webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
transform: perspective(1000px) rotate3d(0,1,0,360deg);*/
}
@media (max-width: 991.98px) {
.ftco-navbar-dark .navbar-nav > .nav-item > .nav-link {
padding-left: 0;
padding-right: 0;
padding-bottom: 1rem;
padding-top: 0;
color: #fff;
}
}
.ftco-navbar-dark .navbar-nav > .nav-item.cta > a {
color: #fff;
border: 1px solid var(--secondary);
padding-top: .7rem;
padding-bottom: .7rem;
padding-left: 18px;
padding-right: 18px;
background: var(--secondary);
margin-top: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
.ftco-navbar-dark .navbar-nav > .nav-item.cta > a span {
display: inline-block;
color: #fff;
}
.ftco-navbar-dark .navbar-nav > .nav-item.cta > a:hover {
background: var(--secondary);
border: 1px solid var(--secondary);
}
.ftco-navbar-dark .navbar-nav > .nav-item.cta.cta-colored a {
border: 1px solid #a0f669;
background: #a0f669 !important;
}
.ftco-navbar-dark .navbar-nav > .nav-item .nav-link.active {
border: 1px solid White !important;
background: Transparent !important;
color: White !important;
border-top-left-radius: 8px;
border-bottom-right-radius: 8px;
padding-left: 5px;
padding-right: 5px;
}
.ftco-navbar-dark .navbar-nav > .nav-item .nav-link.active span:before {
visibility: visible;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
@media (max-width: 991.98px) {
.ftco-navbar-dark .navbar-nav > .nav-item.active > a {
color: #fff;
}
}
.ftco-navbar-dark .navbar-toggler {
border: none;
color: rgba(255, 255, 255, 0.5) !important;
cursor: pointer;
width: 1.5em;
height: 1.5em;
background: no-repeat center center;
background-size: auto;
background-size: 100% 100%;
color: var(--primary) !important;
font-size: 2em;
justify-content: center;
align-items: center;
float: right;
margin-right: 20px;
margin-top: 20px;
}
.ftco-navbar-dark .navbar-toggler:hover, .ftco-navbar-dark .navbar-toggler:focus {
text-decoration: none;
color: var(--secondary);
outline: none !important;
}
.ftco-navbar-dark.scrolled {
position: fixed !important;
right: 0;
left: 0;
top: 0;
margin-top: -130px;
background: #fff !important;
-webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
padding: 0 0 0 15px;
border-bottom-right-radius: 2.5rem;
}
.ftco-navbar-dark.scrolled .nav-item > .nav-link {
font-size: 0.75rem;
font-weight: 700;
padding-bottom: 0 !important;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
@media (max-width: 991.98px) {
.ftco-navbar-dark.scrolled .nav-item > .nav-link {
/*padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 20px !important;*/
}
}
.ftco-navbar-dark.scrolled .nav-item.active > a {
color: var(--secondary) !important;
background: #fff;
}
.ftco-navbar-dark.scrolled .nav-item.cta > a {
color: #fff !important;
background: var(--secondary);
border: none !important;
padding-top: 0.5rem !important;
padding-bottom: .5rem !important;
padding-left: 20px !important;
padding-right: 20px !important;
margin-top: 5px !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
.ftco-navbar-dark.scrolled .nav-item.cta > a span {
display: inline-block;
color: #fff !important;
}
.ftco-navbar-dark.scrolled .nav-item.cta.cta-colored span {
border-color: var(--secondary);
}
@media (max-width: 991.98px) {
.ftco-navbar-dark.scrolled .navbar-nav {
background: none;
border-radius: 0px;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
}
}
.ftco-navbar-dark.scrolled .navbar-toggler {
border: none;
border-color: rgba(0, 0, 0, 0.5) !important;
cursor: pointer;
width: 1.5em;
height: 1.5em;
background: no-repeat center center;
background-size: auto;
background-size: 100% 100%;
color: var(--primary) !important;
font-size: 2em;
justify-content: center;
align-items: center;
float: right;
margin-right: 40px;
margin-top: 10px;
}
.ftco-navbar-dark.scrolled .nav-link {
/*color: #fff !important;*/
}
.ftco-navbar-dark.scrolled .nav-link.active {
color: var(--secondary) !important;
background: #fff !important;
}
.ftco-navbar-dark.scrolled .navbar-nav > .nav-item .nav-link.active span::before {
display: none;
}
.ftco-navbar-dark.scrolled.awake {
margin-top: 0px;
-webkit-transition: 0.25s all ease-out;
-o-transition: 0.25s all ease-out;
transition: 0.25s all ease-out;
}
.ftco-navbar-dark.scrolled.sleep {
-webkit-transition: 0.25s all ease-out;
-o-transition: 0.25s all ease-out;
transition: 0.25s all ease-out;
}
.ftco-navbar-dark.scrolled .navbar-brand {
color: #fff;
font-size: 0.85em;
font-weight: 700;
}
.ftco-navbar-dark.scrolled .top-bar {
display: none;
}
.ftco-navbar-dark.scrolled .navbar-collapse {
font-size: 0.8em;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.dropdown-menu {
color: initial;
border: none;
border-radius: 0;
background-color: var(--primary);
padding: 0.75em;
}
.dropdown-menu h6 span {
font-size: 1.3em;
font-weight: 900;
}
.dropdown-menu h6 {
font-size: 0.9em !important;
line-height: 1.2em;
font-weight: 700;
}
li.nav-item.dropdown.megamenu.show .dropdown-menu .nav-link.active {
border: none !important;
color: #000 !important;
font-weight: 700;
background: rgba(255, 255, 255, 0.5) !important;
border-radius: 4px !important;
}
/*++++++++++++++++++++*/
.wrap {
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
@media (max-width: 991.98px) {
.wrap {
display: none;
}
}
.wrap p {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
}
.wrap .phone {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
}
.wrap .phone a {
color: white;
font-size: 12px;
}
.wrap .phone .fa {
color: rgba(255, 255, 255, 0.8);
}
.wrap .phone .mailus {
color: rgba(255, 255, 255, 0.6);
}
.social-media a i {
position: relative;
display: inline-block;
transition: all 0.25s !important;
color: var(--gray) !important;
}
.social-media a:hover i {
color: var(--secondary) !important;
}
/*+++++++++++ MENU +++++++++++++*/
.ftco-navbar-light {
background: transparent !important;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
padding: 0;
}
@media (max-width: 1198.98px) {
.ftco-navbar-light {
background: #000000 !important;
position: relative;
top: 0;
padding: 10px 15px;
}
}
.ftco-navbar-light .container {
width: 1110px;
margin: 0 auto;
padding: 0;
}
@media (min-width: 992px) {
.ftco-navbar-light .container {
background: rgba(0, 0, 0, 0.4);
border-radius: 5px;
}
}
.ftco-navbar-light .navbar-brand {
color: var(--secondary);
}
.ftco-navbar-light .navbar-brand span {
color: #fff;
}
@media (max-width: 991.98px) {
.ftco-navbar-light .navbar-brand {
color: #fff;
padding-left: 0;
}
}
@media (max-width: 991.98px) {
.ftco-navbar-light .navbar-nav {
padding-bottom: 10px;
}
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
font-size: 13px;
padding-top: 1.8rem;
padding-bottom: 1.8rem;
font-weight: 500;
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 1 !important;
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover {
color: var(--secondary);
}
@media (max-width: 991.98px) {
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
padding-left: 0;
padding-right: 0;
padding-top: .9rem;
padding-bottom: .9rem;
color: rgba(255, 255, 255, 0.7);
outline: none;
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover {
color: #fff;
}
}
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu {
border: none;
background: rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 10px 34px -20px rgba(0, 0, 0, 0.41);
-moz-box-shadow: 0px 10px 34px -20px rgba(0, 0, 0, 0.41);
box-shadow: 0px 10px 34px -20px rgba(0, 0, 0, 0.41);
margin-top: -5px;
}
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu .dropdown-item {
font-size: 14px;
}
.ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu .dropdown-item:hover, .ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu .dropdown-item:focus {
background: transparent;
color: #000000;
}
.ftco-navbar-light .navbar-nav > .nav-item.ftco-seperator {
position: relative;
margin-left: 20px;
padding-left: 20px;
}
@media (max-width: 991.98px) {
.ftco-navbar-light .navbar-nav > .nav-item.ftco-seperator {
padding-left: 0;
margin-left: 0;
}
}
.ftco-navbar-light .navbar-nav > .nav-item.ftco-seperator:before {
position: absolute;
content: "";
top: 10px;
bottom: 10px;
left: 0;
width: 2px;
background: rgba(255, 255, 255, 0.05);
}
@media (max-width: 991.98px) {
.ftco-navbar-light .navbar-nav > .nav-item.ftco-seperator:before {
display: none;
}
}
.ftco-navbar-light .navbar-nav > .nav-item.cta > a {
color: #000000;
}
@media (max-width: 767.98px) {
.ftco-navbar-light .navbar-nav > .nav-item.cta > a {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 991.98px) {
.ftco-navbar-light .navbar-nav > .nav-item.cta > a {
color: #fff;
background: var(--secondary);
}
}
.ftco-navbar-light .navbar-nav > .nav-item.active > a {
color: var(--secondary);
}
@media (max-width: 991.98px) {
.ftco-navbar-light .navbar-nav > .nav-item.active > a {
color: #fff;
}
}
.ftco-navbar-light .navbar-toggler {
border: none;
color: rgba(255, 255, 255, 0.5) !important;
cursor: pointer;
padding-right: 0;
text-transform: uppercase;
font-size: 16px;
letter-spacing: .1em;
}
.ftco-navbar-light .navbar-toggler:focus {
outline: none !important;
}
.ftco-navbar-light.scrolled {
position: fixed;
right: 0;
left: 0;
top: 0;
margin-top: -130px;
background: #fff !important;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
max-width: 100vw;
}
@media (min-width: 992px) {
.ftco-navbar-light.scrolled .container {
background: transparent;
}
}
.ftco-navbar-light.scrolled .nav-item.active > a {
color: var(--secondary) !important;
}
.ftco-navbar-light.scrolled .nav-item.cta > a {
color: #fff !important;
background: var(--secondary);
border: none !important;
}
.ftco-navbar-light.scrolled .nav-item.cta > a span {
display: inline-block;
color: #fff !important;
}
.ftco-navbar-light.scrolled .nav-item.cta.cta-colored span {
border-color: var(--secondary);
}
@media (max-width: 991.98px) {
.ftco-navbar-light.scrolled .navbar-nav {
background: none;
border-radius: 0px;
padding-left: 0rem !important;
padding-right: 0rem !important;
}
}
@media (max-width: 767.98px) {
.ftco-navbar-light.scrolled .navbar-nav {
background: none;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
.ftco-navbar-light.scrolled .navbar-toggler {
border: none;
color: rgba(0, 0, 0, 0.5) !important;
border-color: rgba(0, 0, 0, 0.5) !important;
cursor: pointer;
padding-right: 0;
text-transform: uppercase;
font-size: 16px;
letter-spacing: .1em;
}
.ftco-navbar-light.scrolled .nav-link {
padding-top: 0.9rem !important;
padding-bottom: 0.9rem !important;
color: #000000 !important;
}
.ftco-navbar-light.scrolled .nav-link.active {
color: var(--secondary) !important;
}
.ftco-navbar-light.scrolled.awake {
margin-top: 0px;
-webkit-transition: 0.25s all ease-out;
-o-transition: 0.25s all ease-out;
transition: 0.25s all ease-out;
}
.ftco-navbar-light.scrolled.sleep {
-webkit-transition: 0.25s all ease-out;
-o-transition: 0.25s all ease-out;
transition: 0.25s all ease-out;
}
.ftco-navbar-light.scrolled .navbar-brand {
color: #000000;
}
.navbar-brand {
font-weight: 900;
font-size: 20px;
}
#hamburger-icon {
width: 35px;
height: 15px;
}
#hamburger-icon .line {
display: block;
background: #ccc;
width: 100%;
height: 2px;
position: absolute;
left: 0;
border-radius: 4px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
}
#hamburger-icon .line.line-1 {
top: 0;
}
#hamburger-icon .line.line-2 {
top: 50%;
}
#hamburger-icon .line.line-3 {
top: 100%;
}
#hamburger-icon:hover .line-1, #hamburger-icon:focus .line-1 {
transform: translateY(-4px);
-webkit-transform: translateY(-4px);
-moz-transform: translateY(-4px);
}
#hamburger-icon:hover .line-3, #hamburger-icon:focus .line-3 {
transform: translateY(4px);
-webkit-transform: translateY(4px);
-moz-transform: translateY(4px);
}
.relative-position {
position: relative !important;
}
.top {
position: absolute;
right: 5px;
padding-right: 50px;
z-index: 2;
}
.top-menu {
padding-right: 0px;
}
.top .navbar-nav {
flex-direction: row;
align-items: center;
}
.s-15 {
font-size: 15px!important;
}
.hero-wrap {
width: 100%;
height: 100%;
position: inherit;
background-size: cover;
background-repeat: no-repeat;
background-position: center center !important;
position: relative;
}
@media (max-width: 1199.98px) {
.hero-wrap {
background-position: center center !important;
}
}
.hero-wrap .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
opacity: .4;
background: #000000;
}
.hero-wrap.hero-wrap-2 {
height: 60vh;
display: flex;
}
.hero-compte {
height: 40vh !important;
background-position: right center !important;
}
.hero-wrap.hero-wrap-2 .overlay {
opacity: .3;
background: #000000;
}
.hero-wrap.hero-wrap-2 .slider-text {
height: 100%;
}
.hero-wrap.hero-wrap-2 .slider-text h1 {
color: #fff;
font-size: 4.5em;
}
.hero-wrap .slider-text p {
font-size: 18px;
line-height: 1.5em;
color: rgba(255, 255, 255, 0.7);
}
.hero-wrap .slider-text p strong {
font-weight: 700;
}
.hero-wrap .slider-text p strong a {
color: #000000;
}
.hero-wrap .slider-text .bread {
color: #fff;
}
.hero-wrap .slider-text .breadcrumbs {
font-size: 16px;
font-weight: 700;
margin-bottom: 20px;
z-index: 99;
text-transform: uppercase;
}
.hero-wrap .slider-text .breadcrumbs span {
color: rgba(255, 255, 255, 0.9);
}
.hero-wrap .slider-text .breadcrumbs span i {
color: rgba(255, 255, 255, 0.9);
}
.hero-wrap .slider-text .breadcrumbs span a {
color: white;
}
.hero-wrap .slider-text .breadcrumbs span a:hover, .hero-wrap .slider-text .breadcrumbs span a:focus {
color: var(--secondary);
}
.hero-wrap .slider-text .breadcrumbs span a:hover i, .hero-wrap .slider-text .breadcrumbs span a:focus i {
color: var(--secondary);
}
#section-counter {
position: relative;
z-index: 0;
}
#section-counter:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
z-index: -1;
opacity: .5;
background: #000000;
}
.ftco-counter {
padding: 15em 0;
}
@media (max-width: 1199.98px) {
.ftco-counter {
background-position: center center !important;
}
}
.ftco-counter .block-18 {
display: block;
width: 100%;
text-align: center;
}
.ftco-counter .text strong.number {
font-weight: 500;
font-size: 4em;
color: #fff;
display: block;
line-height: 1.2em;
}
.ftco-counter .text span {
display: block;
font-size: 1.1em;
color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 767.98px) {
.ftco-counter .counter-wrap {
margin-bottom: 20px;
}
}
.ftco-counter .ftco-number {
display: block;
font-size: 72px;
font-weight: bold;
color: #e52b34;
}
.ftco-counter .ftco-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .1em;
}
.owl-carousel {
position: relative;
}
.owl-carousel .owl-item {
opacity: 1;
}
.owl-carousel .owl-item.active {
opacity: 1;
}
.owl-carousel .owl-dots {
text-align: center;
}
.owl-carousel .owl-dots .owl-dot {
width: 30px;
height: 3px;
margin: 5px;
border-radius: 0;
background: var(--light);
position: relative;
}
.owl-carousel .owl-dots .owl-dot:after {
/*position: absolute;
top: -2px;
left: -2px;
right: 0;
bottom: 0;
width: 14px;
height: 14px;
content: '';
border: 1px solid #4d4d4d;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%; */
}
.owl-carousel .owl-dots .owl-dot:hover, .owl-carousel .owl-dots .owl-dot:focus {
outline: none !important;
}
.owl-carousel .owl-dots .owl-dot.active {
background: var(--secondary);
}
.owl-carousel .owl-dots .owl-dot.active:after {
border-color: #fff;
}
.owl-carousel.home-slider {
position: relative;
height: 700px;
z-index: 0;
}
.owl-carousel.home-slider .slider-item {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 700px;
position: relative;
z-index: 0;
overflow: hidden;
}
.owl-carousel.home-slider .slider-item .overlay {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: #000;
opacity: 0.55;
width: 100%;
z-index: -1;
}
@media (max-width: 1199.98px) {
.owl-carousel.home-slider .slider-item {
background-position: center center !important;
}
}
.owl-carousel.home-slider .slider-item .slider-text {
height: 700px;
position: relative;
}
.owl-carousel.home-slider .slider-item .slider-text .text {
z-index: 0;
color: rgba(255, 255, 255, 0.9);
}
.owl-carousel.home-slider .slider-item .slider-text h2 {
color: #fff;
line-height: 1;
font-size: 6em;
font-weight: 100;
margin-bottom: 40px;
margin-top: calc(25vh - 5rem);
}
.owl-carousel.home-slider .slider-item .slider-text h2 span {
color: var(--secondary);
}
.owl-carousel.home-slider .slider-item .slider-text .subheading {
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
font-weight: 900;
text-transform: uppercase;
letter-spacing: 5px;
display: inline-block;
margin-bottom: 10px;
border: 1px solid rgba(255, 255, 255, 0.5);
padding: 0 10px;
position: relative;
z-index: 0;
}
.owl-carousel.home-slider .slider-item .slider-text .subheading-2 {
font-size: 18px;
font-weight: 700;
color: var(--secondary);
display: inline-block;
position: relative;
z-index: 0;
text-transform: uppercase;
letter-spacing: 5px;
}
.owl-carousel.home-slider .slider-item .slider-text .subheading-2:after, .owl-carousel.home-slider .slider-item .slider-text .subheading-2:before {
position: absolute;
top: 50%;
z-index: -1;
content: '';
width: 85px;
height: 1px;
background: var(--secondary);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.owl-carousel.home-slider .slider-item .slider-text .subheading-2:before {
left: -115px;
}
.owl-carousel.home-slider .slider-item .slider-text .subheading-2:after {
right: -115px;
}
.owl-carousel.home-slider .slider-item .slider-text .btn-custom {
margin-top: 30px;
}
.owl-carousel.home-slider .slider-item .slider-text .btn-custom span {
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
font-size: 16px;
letter-spacing: 1px;
}
.owl-carousel.home-slider .slider-item .slider-text .btn-custom span.fa {
font-size: 30px;
color: #fff;
margin-right: 10px;
}
.owl-carousel.home-slider .owl-nav {
position: absolute;
top: 50%;
width: 100%;
}
.owl-carousel.home-slider .owl-nav .owl-prev, .owl-carousel.home-slider .owl-nav .owl-next {
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
outline: none !important;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity: 0;
}
.owl-carousel.home-slider .owl-nav .owl-prev span:before, .owl-carousel.home-slider .owl-nav .owl-next span:before {
font-size: 30px;
color: rgba(255, 255, 255, 0.5);
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.owl-carousel.home-slider .owl-nav .owl-prev:hover span:before, .owl-carousel.home-slider .owl-nav .owl-prev:focus span:before, .owl-carousel.home-slider .owl-nav .owl-next:hover span:before, .owl-carousel.home-slider .owl-nav .owl-next:focus span:before {
color: #fff;
}
.owl-carousel.home-slider .owl-nav .owl-prev {
left: 0;
margin-left: 0;
}
.owl-carousel.home-slider .owl-nav .owl-next {
right: 0;
margin-right: 0;
}
.owl-carousel.home-slider:hover .owl-nav .owl-prev, .owl-carousel.home-slider:hover .owl-nav .owl-next {
opacity: 1;
}
.owl-carousel.home-slider:hover .owl-nav .owl-prev {
margin-left: 50px;
}
.owl-carousel.home-slider:hover .owl-nav .owl-next {
margin-right: 50px;
}
.owl-carousel.home-slider .owl-dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
text-align: center;
}
@media (max-width: 767.98px) {
.owl-carousel.home-slider .owl-dots {
bottom: 15%;
}
}
.owl-carousel.home-slider .owl-dots .owl-dot {
width: 30px;
height: 3px;
margin: 5px;
border-radius: 0;
background: var(--light);
}
.owl-carousel.home-slider .owl-dots .owl-dot.active {
background: var(--secondary);
}
.owl-carousel.owl-drag .owl-item {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
/*+++++ PAGINATION++++++++++*/
.page-link {
border: none;
font-size: 1.5em;
}
.page-item {
display: flex;
align-self: center;
}
.previous .page-link, .next .page-link {
font-size: 0.8em;
}
.page-item.disabled .page-link {
color: var(--gray-light);
}
.page-item.active .page-link {
border-top-right-radius: 0.75rem;
border-bottom-left-radius: 0.75rem;
}
/*++*/
/*++++++++ STYLES DE TEXTE ++++++++++++++++++++++++++++++++++++*/
b, strong {
font-weight: 800;
}
.text-bold {
font-weight: 900;
}
i.fal {
vertical-align: middle;
}
h1, .h1 {
font-size: 2.9em;
line-height: 1.5em;
font-weight: 100;
white-space: normal;
font-family: var(--font-family-sans-serif);
}
h2, .h2 {
font-size: 2.6em;
line-height: 1.1em;
font-weight: 300;
font-family: var(--font-family-sans-serif);
white-space: normal;
}
.titre::before {
content: '';
display: block;
position: relative;
margin: 0 auto 10px;
height: 20px;
width: 30px;
background: var(--secondary);
}
.titre::after {
content: '';
display: block;
position: relative;
margin: 10px auto 0;
height: 20px;
width: 30px;
background: var(--secondary);
}
h3, .h3 {
font-size: 1.5em;
line-height: 1.1em;
font-weight: 600;
font-family: var(--font-family-sans-serif);
}
h4, .h4 {
font-size: 1.15em;
line-height: 1.1em;
font-weight: 800;
font-family: var(--font-family-sans-serif);
}
h5, .h5 {
font-size: 1.05em;
line-height: 1.1em;
font-weight: 800;
letter-spacing: 0.1em;
font-family: var(--font-family-sans-serif);
}
h6, .h6 {
font-size: 0.9em;
line-height: 1.2em;
font-weight: 700;
font-family: var(--font-family-sans-serif);
text-transform: uppercase;
letter-spacing: 0.15em;
margin-top: 10px;
margin-bottom: 10px;
}
.blockquote {
margin: 0 0 1rem;
padding-left: 1.5rem;
border-left: dotted 1px var(--secondary);
font-size: 1.1em;
line-height: 1.4em;
}
small, .small {
font-size: 65%;
}
.lead {
line-height: 1.5em;
font-size: 1.22em !important;
letter-spacing: normal !important;
font-weight: 500 !important;
}
code {
font-size: 85.5%;
color: rgba(var(--red), 1);
font-family: var(--font-family-monospace);
letter-spacing: 0.05em;
}
.liste-stylisee {
margin: 2rem auto;
}
.liste-stylisee li {
list-style-type: none;
padding-left: 1.5em;
margin-bottom: 1em;
}
.liste-stylisee li:before {
content: '-';
font-size: 1.2em;
margin-right: 0.70em;
margin-left: -1.5em;
color: var(--secondary);
font-weight: 500;
}
.liste-stylisee.liste-white li:before {
color: #fff;
}
.liste-stylisee a:hover {
margin-left: 5px;
}
li.reseaux::before {
content: '' !important;
display: none;
}
li.reseaux {
display: flex;
width: 100%;
position: relative;
}
li.reseaux a {
padding: 0.25em 0.75em 0.25em 0;
font-size: 0.8em;
text-align: center;
color: var(--primary);
margin-right: 10px;
transition: all 0.4s;
}
li.reseaux a:hover {
margin-left: 0;
color: var(--secondary);
}
.no-link {
cursor: default;
}
.no-link:hover {
color: inherit;
}
.accroche {
font-size: 2em !important;
width: 80%;
margin: 40px 0 20px -16%;
font-weight: 300;
padding-left: 11%;
}
.menu-title {
padding-top: .7rem;
padding-bottom: .7rem;
font-size: 1.8em;
font-weight: 400;
font-style: italic;
color: var(--secondary);
}
.font-size-small {
font-size: 0.75em !important;
line-height: 1.1em;
}
.font-size-medium {
font-size: 1.2em !important;
line-height: 1.4em;
}
.font-size-big {
font-size: 2em !important;
line-height: 1.25em;
}
.text-gray-light {
color: var(--gray-light) !important;
}
a.text-gray-light:hover, a.text-gray-light:focus {
color: #000 !important;
}
.text-black {
color: #000 !important;
}
a.text-black:hover, a.text-black:focus {
color: var(--dark-gray) !important;
}
.text-gray {
color: var(--gray) !important;
}
a.text-gray:hover, a.text-gray:focus {
color: #000 !important;
}
.bg-gray a {
font-weight: bold;
}
.bg-gray a:hover {
color: var(--dark);
}
/*++++++++ STYLES DE FORMULAIRE++++++++++++++++++++++++++++++++++++++++++*/
.formulaire {
position: relative;
}
/* Styles des boutons*/
.btn {
border-radius: 0 !important;
transition: all 0.8s;
text-transform: uppercase;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.15em;
padding: 1em 1.75em;
outline: none;
}
.btn-link {
font-weight: 700;
text-decoration: none;
font-size: 0.8em;
text-transform: none;
letter-spacing: 0.05em;
position: relative;
outline: none;
}
.btn-link::after {
content: '';
margin-top: 4px;
width: 0;
background: var(--secondary);
height: 2px;
display: block;
transition: all 0.8s;
}
.btn-link:hover {
color: var(--gray) !important;
text-decoration: none;
}
.btn-link:hover::after {
width: 100%;
}
.btn-lg, .btn-group-lg > .btn {
padding: 1.5em 2.2em;
font-size: 1.5em;
line-height: 1.65;
border-radius: 0.;
text-transform: uppercase;
}
.btn-top {
font-size: 0.82em;
padding-left: 0.25rem !important;
padding-right: 0.25rem !important;
}
.btn-outline-gray {
color: var(--gray);
border-color: var(--gray);
}
.btn-outline-gray:hover {
color: #fff;
background-color: var(--gray);
border-color: var(--gray);
}
.btn-outline-gray:focus, .btn-outline-gray.focus {
box-shadow: none;
}
.btn-outline-gray.disabled, .btn-outline-gray:disabled {
color: var(--gray);
background-color: transparent;
}
.btn-outline-gray:not(:disabled):not(.disabled):active, .btn-outline-gray:not(:disabled):not(.disabled).active, .show > .btn-outline-gray.dropdown-toggle {
color: #fff;
background-color: var(--gray);
border-color: var(--gray);
}
.btn-outline-gray:not(:disabled):not(.disabled):active:focus, .btn-outline-gray:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-gray.dropdown-toggle:focus {
box-shadow: none;
}
/*++++*/
/* Styles des inputs*/
.form-control:active, .form-control:focus {
color: var(--primary);
background: var(--light) !important;
-webkit-box-shadow: none;
box-shadow: none;
outline: none;
border-color: transparent;
border-radius: 0;
}
.formulaire textarea, .form-control {
border-radius: 0;
color: var(--gray);
position: relative;
transition: all 0.8s;
background: transparent;
border: none;
border-bottom: solid 1px var(--secondary);
transition: all 0.8s;
}
.custom-file-label::after {
color: #fff;
content: "Parcourir";
background-color: var(--secondary);
border-radius: 0;
}
.custom-file-input:lang(fr) ~ .custom-file-label::after {
content: "Parcourir";
}
.form-control::-webkit-input-placeholder {
color: var(--gray-light);
font-size: 0.8em;
font-style: italic;
opacity: 0.3;
}
.form-control::-moz-placeholder {
color: var(--gray-light);
font-size: 0.8em;
font-style: italic;
opacity: 0.3;
}
.form-control:-ms-input-placeholder {
color: var(--gray-light);
font-size: 0.8em;
font-style: italic;
opacity: 0.3;
}
.form-control::-ms-input-placeholder {
color: var(--gray-light);
font-size: 0.8em;
font-style: italic;
opacity: 0.3;
}
.form-control::placeholder {
color: var(--gray-light);
font-size: 0.8em;
font-style: italic;
opacity: 0.3;
}
.formulaire .custom-select {
border-radius: 0;
color: var(--gray);
position: relative;
transition: all 0.8s;
background: transparent;
border: none;
border-bottom: solid 1px var(--secondary);
transition: all 0.8s;
}
.formulaire label, .label {
text-transform: uppercase;
font-weight: 700;
font-size: 85%;
letter-spacing: 0.05em;
}
.custom-control-label::after {
position: absolute;
top: 15%;
left: -1rem;
display: block;
width: 1rem;
height: 1rem;
content: "";
background: center center no-repeat;
background-size: inherit;
}
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: var(--info);
background-color: var(-info);
}
.custom-control-input.custom-secondary:checked ~ .custom-control-label::before {
color: #fff;
border-color: var(--secondary);
background-color: var(--secondary);
}
.custom-control-label::before {
position: absolute;
top: 15%;
left: -1rem;
display: flex;
width: 1rem;
height: 1rem;
pointer-events: none;
content: "";
background-color: #fff;
border: var(--info) solid 1px;
vertical-align: middle;
text-align: center;
float: left;
margin-right: -0.5rem;
}
.custom-control-label.label-secondary::before {
border: var(--secondary) solid 1px !important;
}
.custom-control-label {
position: relative;
margin-bottom: 0;
vertical-align: middle;
text-transform: none !important;
font-weight: 500 !important;
padding-left: 0.25rem;
}
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
border-color: var(--gray);
background-color: var(--gray);
}
.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
color: var(--gray);
}
.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
background-color: var(--gray);
}
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: var(--secondary);
background-color: var(--secondary);
}
.form-control:disabled, .form-control[readonly] {
background-color: transparent;
opacity: 1;
padding: 0 !important;
border: none !important;
color: #fff !important;
cursor: not-allowed;
}
.RadInput > input, .RadInput_Default input {
background-color: transparent;
opacity: 1;
padding: 0 !important;
border: none !important;
color: #fff !important;
}
.form-control:disabled:hover, .form-control[readonly]:hover, .form-control:disabled:focus, .form-control[readonly]:focus {
background: transparent !important;
}
.form-control:disabled::-webkit-input-placeholder, .form-control[readonly]::-webkit-input-placeholder {
color: var(--gray-light);
font-size: 1em;
font-style: normal;
opacity: 0.9;
}
.form-control:disabled::-moz-placeholder, .form-control[readonly]::-moz-placeholder {
color: var(--gray-light);
font-size: 1em;
font-style: normal;
opacity: 0.9;
}
.form-control:disabled:-ms-input-placeholder, .form-control[readonly]:-ms-input-placeholder {
color: var(--gray-light);
font-size: 1em;
font-style: normal;
opacity: 0.9;
}
.form-control:disabled::-ms-input-placeholder, .form-control[readonly]::-ms-input-placeholder {
color: var(--gray-light);
font-size: 1em;
font-style: normal;
opacity: 0.9;
}
.form-control:disabled::placeholder, .form-control[readonly]::placeholder {
color: var(--gray-light);
font-size: 1em;
font-style: normal;
opacity: 0.9;
}
/*++++++ SELECT STYLISE +++++++*/
.nice-select {
-webkit-tap-highlight-color: transparent;
background-color: transparent;
border-radius: 0;
border: 1px solid var(--secondary);
box-sizing: border-box;
clear: both;
cursor: pointer;
display: flex;
font-family: inherit;
font-size: 14px;
font-weight: normal;
height: 42px;
line-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 30px;
position: relative;
text-align: left !important;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
width: auto;
}
.langues .nice-select{
border: none;
height: 30px;
line-height: 30px;
padding-left: 5px;
padding-right: 25px;
text-transform: uppercase;
}
.nice-select:hover {
border-color: var(--light);
}
.langues .nice-select .option {
padding-left: 5px;
padding-right: 5px;
}
.langues img {
width: 1.5em;
height: 1em;
margin-right: 0.5em;
vertical-align: text-top;
}
.nice-select:active, .nice-select.open, .nice-select:focus {
border-color: var(--gray);
}
.ftco-navbar-light.scrolled.awake .nice-select .current {
color: var(--gray);
}
.nice-select:after {
border-bottom: 2px solid var(--secondary);
border-right: 2px solid var(--secondary);
content: '';
display: block;
height: 5px;
margin-top: -4px;
pointer-events: none;
position: absolute;
right: 12px;
top: 50%;
-webkit-transform-origin: 66% 66%;
-ms-transform-origin: 66% 66%;
transform-origin: 66% 66%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
width: 5px;
}
.nice-select.open:after {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
min-width: 100%;
}
.nice-select.disabled {
border-color: var(--gray-light);
color: var(--gray-light);
pointer-events: none;
}
.nice-select.disabled:after {
border-color: var(--gray-light);
}
.nice-select.wide {
width: 100%;
}
.nice-select.wide .list {
left: 0 !important;
right: 0 !important;
}
.nice-select.right {
float: right;
}
.nice-select.right .list {
left: auto;
right: 0;
}
.nice-select.small {
font-size: 12px;
height: 36px;
line-height: 34px;
}
.nice-select.small:after {
height: 4px;
width: 4px;
}
.nice-select.small .option {
line-height: 34px;
min-height: 34px;
}
.nice-select .list {
background-color: #000;
border-radius: 0;
box-shadow: 0 0 0 1px rgba(68, 88, 112, 0.11);
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
-ms-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9;
max-height: 320px;
overflow-y: auto;
}
.nice-select .list:hover .option:not(:hover) {
background-color: transparent!important;
}
.nice-select .option {
cursor: pointer;
font-weight: 400;
line-height: 40px;
list-style: none;
min-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 29px;
text-align: left;
-webkit-transition: all 0.2s;
transition: all 0.2s;
color: white;
}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
background-color: var(--gray);
}
.nice-select .option.selected {
font-weight: bold;
}
.nice-select .option.disabled {
background-color: var(--gray-dark);
color: var(--gray);
cursor: default;
}
.no-csspointerevents .nice-select .list {
display: none;
}
.no-csspointerevents .nice-select.open .list {
display: block;
}
/*+++++++++++++++ CUSTOM FILE ++++++*/
.custom-file {
position: relative;
display: inline-block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
margin-bottom: 0;
}
.custom-file-input {
position: relative;
z-index: 2;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
margin: 0;
opacity: 0;
}
.custom-file-input:focus ~ .custom-file-label {
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label {
background-color: var(--light);
}
.custom-file-input:lang(en) ~ .custom-file-label::after {
content: "Browse";
}
.custom-file-input ~ .custom-file-label[data-browse]::after {
content: attr(data-browse);
}
.custom-file-label {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-weight: 400;
line-height: 1.5;
color: var(--gray);
background-color: #fff;
border: 1px solid var(--gray-light);
border-radius: 0.25rem;
}
.custom-file-label::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: calc(1.5em + 0.75rem);
padding: 0.375rem 0.75rem;
line-height: 1.5;
color: var(--gray);
content: "Browse";
background-color: var(--light);
border-left: inherit;
border-radius: 0 0.25rem 0.25rem 0;
}
/*++++++++ AUTRES CONTENUS DIVERS (tableaux, sliders, galleries, etc.)+++++*/
.container-xl {
max-width: 1311px;
position: relative;
}
.container-lg {
max-width: 1280px;
position: relative;
}
.container-fluid {
position: relative;
}
.quantity { /* .qua-col .quantity */
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.quantity .riSingle {
float: left;
display: block;
height: 46px;
padding: 0 5px;
border: none;
}
.quantity input {
width: 52px;
outline: none;
border: none;
line-height: 30px;
background: Transparent;
text-align: center;
font-size: 14px;
font-weight: 700;
color: var(--light);
transition: all 0.25s;
}
.quantity input:focus {
background: Black;
color: var(--secondary);
}
.quantity .riSingle a.riUp, .quantity .riSingle a.riDown {
position: relative;
width: 30px;
height: 30px;
margin: 0;
border: 1px solid CurrentColor;
border-radius: 100%;
color: var(--light);
cursor: pointer;
transition: all 0.25s;
}
.riSingle a.riDown {
float: left;
}
.quantity .riSingle a:hover {
color: var(--secondary);
}
.quantity .riSingle a:after, .quantity .riSingle a.riUp:before {
content: '';
position: absolute;
top: 13px;
left: 7px;
display: block;
width: 14px;
height: 2px;
background-color: CurrentColor;
}
.quantity .riUp:before {
transform: rotate(90deg);
transform-origin: center center;
}
.cart-table table tr td.cart-pic {
width: 15%;
text-align: center;
}
.cart-table::after {
content: '';
display: block;
width: 30%;
margin: 0 auto;
height: 5px;
background: var(--secondary);
}
.cart-table table tr td.cart-pic img {
max-width: 80px;
}
.cart-table table tr td.p-price {
color: var(--secondary);
font-size: 1.4em;
text-align: center;
}
.cart-table table {
color: inherit;
}
.cart-table table tr td.p-name {
color: inherit;
text-align: left;
font-size: 0.9em;
}
.cart-table .table {
box-shadow: 0 4px 12px rgb(0 0 0 / 50%);
margin-bottom: 0;
}
.table th, .table td {
vertical-align: middle;
}
.table thead {
border-bottom: dotted 1px;
color: var(--secondary)
}
.table thead th {
text-align: center;
font-weight: 700;
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 0.15em;
}
.modal-content {
border: 4px solid var(--secondary);
border-radius: 0;
color: var(--secondary);
}
.vignette {
max-height: 80px;
width: auto;
vertical-align: middle;
margin-right: 4px;
display: block;
margin: 0 auto;
}
.cart-name {
text-align: center;
font-size: 11px;
font-weight: 600;
}
.logos-paiement {
max-width: 220px;
height: auto;
width: 100%;
margin: 10px auto;
}
/*+++ CHEMIN PANIER +++*/
#progressbar {
margin-bottom: 3rem;
overflow: hidden;
color: var(--white);
padding-left: 0px;
width: auto;
display: flex;
justify-content: center;
z-index: 1;
position: relative;
}
#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 0.25s;
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: "";
font-family: flaticon !important;
font-weight: 300;
}
#progressbar #step2:before {
content: "";
font-family: flaticon !important;
font-weight: 300;
}
#progressbar #step3:before {
content: "";
font-family: flaticon !important;
font-weight: 300;
}
#progressbar #step4:before {
content: "";
font-family: flaticon !important;
font-weight: 300;
}
#progressbar #step5:before {
content: "";
font-family: flaticon !important;
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: 1px;
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(--secondary);
}
@media only screen and (max-width:800px) {
#progressbar li:before {
font-size: 1em;
}
#progressbar li::after {
top: 1.2em;
}
#progressbar2 li:before {
font-size: 1em;
}
#progressbar2 li::after {
top: 1.2em;
}
}
/*++*/
/*++++++++ Footer ++++++++++++++++++++++++++++++++++++++++++*/
footer {
position: relative;
padding-top: 130px;
}
footer::before {
content: '';
position: absolute;
display: block;
left: 50%;
top: 0;
transform: translateX(-100px);
width: 200px;
height: 120px;
background: var(--dark) url(/img/logo-footer.png) top center no-repeat;
background-size: contain;
}
footer .mentions {
font-size: 0.7em;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.15em;
}
.mentions::before, .mentions::after {
content: '';
display: block;
position: relative;
margin: 0 auto;
height: 20px;
width: 30px;
background: var(--secondary);
}
footer a {
color: var(--gray-light);
transition: all 0.8s;
text-decoration: none;
}
footer a:hover {
text-decoration: none;
color: var(--secondary);
}
.mentions .active a {
color: var(--secondary);
text-decoration: underline;
}
/*++*/
/*+++++++++++++++++++++++++++ ELEMENTS DIVERS +++++++*/
.close-page {
position: fixed;
right: 4em;
top: 4em;
z-index: 100;
display: block;
width: 6em;
height: 8em;
color: White;
font-size: 0.6em;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
}
.close-page span {
position: absolute;
top: 6em;
left: 0;
display: block;
width: 100%;
text-align: center;
opacity: 0;
transition: all 0.25s ease-in;
}
.close-page:before, .close-page:after {
content: '';
position: absolute;
top: 2.75em;
left: 0;
display: block;
width: 6em;
height: 0.5em;
border-radius: 0.25em;
background-color: var(--secondary);
transform-origin: center center;
transition: all 0.25s ease-in;
}
.close-page:before {
transform: rotate(45deg);
}
.close-page:after {
transform: rotate(-45deg);
}
.close-page:hover {
color: White;
}
.close-page:hover:before, .close-page:hover:after {
background-color: #CCCCCC;
}
.close-page:hover:before {
transform: rotate(135deg);
}
.close-page:hover:after {
transform: rotate(45deg);
}
.close-page:hover span {
opacity: 1;
}
/*++++++++++++++*/
.product-image-picture {
max-width: 60%;
max-height: 600px;
}
.img-fit-cover-center {
object-fit: cover;
height: 100%;
object-position: center;
width: 100%;
}
.img-fit-cover-left {
object-fit: cover;
height: 100%;
object-position: left;
width: 100%;
}
.img-fit-cover-right {
object-fit: cover;
height: 100%;
object-position: right;
width: 100%;
}
.bg-fixed {
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top right;
min-height: 100vh;
height: 100% !important;
}
a.down {
position: absolute;
padding-top: 80px;
bottom: 0;
left: 50%;
top: 94%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font: normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity 0.25s;
}
a.down:hover {
opacity: .5;
}
a.down span {
position: absolute;
top: 0;
left: 50%;
width: 14px;
height: 14px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb07 2s infinite;
animation: sdb07 2s infinite;
opacity: 0;
box-sizing: border-box;
}
a.down span:nth-of-type(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
a.down span:nth-of-type(2) {
top: 16px;
-webkit-animation-delay: .15s;
animation-delay: .15s;
}
a.down span:nth-of-type(3) {
top: 32px;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
}
@-webkit-keyframes sdb07 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes sdb07 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
a.framed-btn {
text-decoration: none;
padding: 1em 1.75em;
text-transform: uppercase;
text-align: center;
position: relative;
flex-grow: 1;
cursor: crosshair;
font-size: 0.8em;
letter-spacing: 0.25em;
}
a.framed-btn:hover {
color: inherit;
}
a.framed-btn:before {
content: "";
position: absolute;
width: calc(100% + 4px);
height: calc(100% + 4px);
top: calc(1px/-1);
left: calc(1px/-1);
background: linear-gradient(to right, #fff 0%, #fff 100%), linear-gradient(to top, #fff 50%, transparent 50%), linear-gradient(to top, #fff 50%, transparent 50%), linear-gradient(to right, #fff 0%, #fff 100%), linear-gradient(to left, #fff 0%, #fff 100%);
background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
background-repeat: no-repeat, no-repeat;
transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
transform: scaleX(0) rotate(0deg);
transition-delay: 0.6s, 0.3s, 0s;
}
a.framed-btn:hover:before {
background-size: 200% 1px, 1px 400%, 1px 400%, 55% 1px, 55% 1px;
background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
transform: scaleX(1) rotate(0deg);
transition-delay: 0s, 0.3s, 0.6s;
}
.scrolled.awake .logo-sticky {
display: block;
width: 100%;
height: auto;
max-width: 200px;
}
.scrolled.awake .block-sticky {
display: block;
height:80px;
}
.logo-sticky, .block-sticky {
display: none;
}
img.logo-pages {
width: 100%;
height: auto;
max-width: 180px;
}
.block-pages {
padding: 0;
}
.scrolled .block-pages {
display: none;
}
.map {
display: flex;
align-self: stretch;
filter: grayscale(100);
}
/*+++++ PANIER TOP +++*/
.cart-icon, li.connecte {
position: relative;
}
.cart-icon:hover .cart-hover, li.connecte:hover .compte-connecte, .cart-icon > a:focus ~ .cart-hover, li.connecte > a:focus ~ .compte-connecte {
opacity: 1;
visibility: visible;
top: 80px;
}
.cart-icon.nav-item a.nav-link {
color: var(--secondary);
position: relative;
display: inline-block;
}
.cart-icon a span, li.connecte 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;
}
.cart-icon .cart-hover {
position: absolute;
right: 0;
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.connecte .compte-connecte {
position: absolute;
right: -50px;
top: 100px;
width: auto;
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;
}
.cart-icon .cart-hover .select-items table {
width: 100%;
}
.cart-icon .cart-hover .select-items table tr td {
padding-bottom: 20px;
}
.si-pic img {
width: 100%;
height: auto;
max-width: 50px;
}
.si-pic {
max-height: 150px;
}
.cart-icon .cart-hover .select-items table tr td.si-text {
padding-left: 18px;
}
.cart-icon .cart-hover .select-items table tr td.si-text .product-selected p {
color: var(--gray);
line-height: 30px;
margin-bottom: 7px;
}
.cart-icon .cart-hover .select-items table tr td.si-text .product-selected h6 {
color: #000;
font-size: 0.7em;
}
.cart-icon .cart-hover .select-items table tr td.si-close {
color: #252525;
font-size: 16px;
cursor: pointer;
}
.cart-icon .cart-hover .select-total {
overflow: hidden;
border-top: 1px solid #e5e5e5;
padding-top: 26px;
margin-bottom: 30px;
}
.cart-icon .cart-hover .select-total span {
font-size: 14px;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.5px;
float: left;
}
.cart-icon .cart-hover .select-total h5 {
color: var(--primary);
float: right;
}
.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;
}
.cart-icon .cart-hover .select-button .checkout-btn {
font-size: 12px;
letter-spacing: 2px;
display: block;
text-align: center;
padding: 15px 30px 12px;
}
.cart-price {
font-size: 18px;
font-weight: 700;
}
.events {
list-style-type: none;
padding-left: 0;
}
.events li {
margin-bottom: 30px;
}
.events li a {
background: rgba(255,255,255,0);
text-decoration: none;
transition: all 0.25s;
padding: 0.5em 1em;
display: flex;
flex-direction: row;
border: 1px solid transparent;
}
.events.complete li {
background: rgba(255,255,255,0);
text-decoration: none;
transition: all 0.25s;
padding: 0.5em 1em;
display: flex;
flex-direction: row;
border: 1px solid transparent;
}
.events li a:hover {
background: rgba(255,255,255,0.5);
text-decoration: none;
transition: all 0.8s;
color: #000;
border-color: #fff;
}
.events .date {
font-weight: 500;
font-size: 0.8em;
text-align: center;
line-height: 1.2em;
width: 20%;
justify-content: center;
background: var(--gray);
height: 100px;
align-items: center;
display: flex;
text-transform: uppercase;
}
.events .date p::first-line {
font-size: 4em;
font-weight: 100;
line-height: 1em;
display: block;
position: relative;
}
.description-event {
padding: 0.5em 1.5em;
font-size: 0.85em;
line-height: 1.5em;
width: 80%;
}
#carouselEvents .carousel-indicators li {
height: 40px;
font-size: 2em;
text-indent: inherit;
color: #fff;
background: transparent;
line-height: 2em;
font-weight: 200;
text-align: center;
}
#carouselEvents .carousel-indicators {
bottom: -50px;
}
#carouselEvents .carousel-indicators::before {
content: '';
display: block;
position: absolute;
margin: 0 auto;
height: 2px;
width: 80px;
background: var(--secondary);
}
/*+++++++++ EFFETS CUVEES +++++++++*/
.block-image {
position: relative;
width: 100%;
border: 2px solid 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%;
min-height: 222px;
min-width: 100%;
padding: 80% 5% 0 5%;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
color: White !important;
opacity: 0;
transition: 0.25s ease-in;
}
.block-image:hover .overlay {
padding-top: 50%;
border-color: var(--primary);
border-radius: 0;
opacity: 1;
transition-timing-function: ease-out;
}
.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.25s ease-in;
transition: opacity 0.25s cubic-bezier(0.59, 0.01, 0.28, 1) 0.125s, transform 0.25s cubic-bezier(0.59, 0.01, 0.28, 1) 0.125s;
}
.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 0.25s cubic-bezier(0.59, 0.01, 0.28, 1), transform 0.25s cubic-bezier(0.59, 0.01, 0.28, 1);
}
.tarif {
display: inline-block;
width: auto;
margin: 0 auto 20px;
line-height: 1em;
font-size: clamp(1.2rem, 1rem + 0.6vw, 1.8rem);
text-align: left;
color: var(--secondary);
}
.tarif span {
font-size: 12px;
color: #fff;
font-weight: 400;
}
.new {
display: block;
position: absolute;
background: var(--secondary);
font-weight: 800;
text-transform: uppercase;
font-size: 0.8em;
letter-spacing: 0.25em;
padding: 2px 5px;
z-index: 2;
left: 2%;
top: 2%;
}
/*++++++++ Médias Queries ++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:1200px) {
.btn-lg, .btn-group-lg > .btn {
font-size: 95%;
}
}
@media only screen and (max-width:1024px) {
#carouselReponse .carousel-caption {
width: 55%;
bottom: 0;
left: 5%;
top: auto;
margin-bottom: 0;
right: auto;
padding-top: 0;
padding-bottom: 0;
}
.carousel-caption h2 {
font-size: 1.3em !important;
padding: 5px 0.55em !important;
line-height: 1.1em !important;
}
.carousel-caption .lead {
font-size: 1.3em !important;
}
}
@media only screen and (max-width:980px) {
body {
font-size: 14px;
}
.ftco-navbar-dark .navbar-nav > .nav-item > .nav-link {
color: #fff !important;
font-size: 1.4em;
line-height: 1.5em;
}
.ftco-navbar-dark.scrolled .navbar-collapse {
max-height: 100vh;
overflow-y: scroll;
}
.hidden-md {
display: none;
}
.top-bar {
border-bottom-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.liste-stylisee {
padding: 1em;
margin: 0.5rem auto;
}
}
@media only screen and (max-width:800px) {
body {
font-size: 13px;
}
.logo {
max-width: 70px;
}
}
@media only screen and (max-width:767px) {
.hidden-xs {
display: none;
}
.sticky.is-sticky .navbar-brand {
margin-top: -10px;
}
.navbar-brand {
display: inline-block;
margin: 0;
}
.collapse:not(.show) {
display: none !important;
}
h2, .h2 {
font-size: 2.6rem;
}
}
@media only screen and (max-width:640px) {
body {
font-size: 12px;
}
h2, .h2 {
font-size: 2em;
}
}
/*+++++++++ ORIENTATIONS +++++++++*/
@media only screen and (max-width:980px) and (orientation:portrait) {
.menu-compte {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
}
.menu-compte li a {
display: block;
position: relative;
padding: 1rem;
}
.txtCart {
display: none;
}
}
@media only screen and (max-width:767px) and (orientation:portrait) {
}
/*+ IPAD PRO +*/
@media only screen and (min-width:1023px) and (max-width:1024px) and (orientation:portrait) {
body {
font-size: 14px;
}
.nav-item {
padding-left: 1%;
padding-right: 1%;
}
.ftco-navbar-dark .navbar-nav > .nav-item > .nav-link {
font-size: 0.85em;
}
.top-bar {
font-size: 75%;
}
}
/*++*/
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
}
@media only screen and (max-width:1024px) and (orientation:portrait) {
/*footer::before {
content: '';
display: block;
margin: -5% 35% 100px;
padding: 0.1% 1%;
position: absolute;
width: 30%;
background: var(--dark) url("../img/logo-footer.png") top center no-repeat;
text-align: center;
height: 120px;
background-size: contain;
}*/
}
@media only screen and (max-width:767px) and (orientation:portrait) {
}
/*++++ FIN MEDIA QUERIES +++++++*/
.message-control > div {
background-color: white;
}
body .message-control > div > div[id$="_loading"] {
background-color: var(--secondary);
}
q {
font-style: italic;
}
html[lang="fr"] q::before {
margin-right: 0.5ex;
}
html[lang="fr"] q::after {
margin-left: 0.5ex;
}
span.text-danger[style="display: inline;"] ~ span.text-danger[style="display: inline;"] {
display: none !important;
}
/*+++++++++++++ BANDEAU COOKIES +++++++++++++*/
#cookies-bar {
top: auto;
bottom: 0;
height: auto;
}
#cookies-bar .modal-dialog {
width: 100%;
max-width: none;
margin: 0;
}
#cookies-bar p {
position: absolute;
top: 50%;
padding-right: 120px;
transform: translateY(-50%);
}
#cookies-bar a {
position: relative;
z-index: 1;
}
/*+++++++++++ FIN BANDEAU COOKIES +++++++++++*/
/*+++++++++++++++++ TOOLTIPS +++++++++++++++++*/
.tooltip-box {
position: relative;
padding: 0 0.5em;
cursor: default;
}
.tooltip-box > .tooltip-text {
display: none;
position: absolute;
bottom: calc(100% + 0.5em);
left: 0;
z-index: 1;
width: 30em;
width: max-content;
box-shadow: 0 0 0 2px var(--dark);
border: 2px solid var(--light);
border-radius: 0.25em;
background-color: var(--dark);
color: var(--light);
white-space: normal;
text-align: initial;
opacity: 0.95;
}
.tooltip-box > .tooltip-text:before {
content: '';
display: block;
position: absolute;
left: 1em;
bottom: -0.62em;
width: 1em;
height: 1em;
border: 2px solid var(--light);
border-width: 0 2px 2px 0;
background-color: var(--dark);
transform: rotate(45deg);
}
.tooltip-box > .tooltip-text > span {
position: relative;
display: inline-block;
min-width: 5em;
max-width: 25em;
padding: 0.5em;
}
.tooltip-box:hover > .tooltip-text {
display: block;
}
.tooltip-box:hover > .tooltip-text:hover {
display: none;
}
/*+++++++++++++++ FIN TOOLTIPS +++++++++++++++*/
@media only screen and (max-width: 360px) {
.block-image {
position: relative;
}
.block-image .overlay {
position: relative;
padding: 0 5% 5% 5%;
background-color: Transparent;
opacity: 1;
}
.block-image:hover .overlay {
padding-top: 0;
border-color: Transparent;
}
.block-image .overlay .text, .block-image:hover .overlay .text {
transform: none;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
}
}