:root {
--Turquoise: #168fa0;
--TurquoiseDark: #1e7887;
--TurquoiseLight: #79cbcb;
--GrisBleute: #a6a6b9;
--Bleu: #406985;
--BleuFonce: #214a63;
--Noir: #000000;
--Gris: #f4f4f7;
--GrisClair1: #ededed;
--Rouge: #d10f42;
--Creme: #f0f0f0;
}
/* ******************************* GENERAL */
html {font-size: 16px;}
body { margin: 0; padding: 0; font-family: "Open Sans", sans-serif; font-weight: 400; background: #fff; color: #000;}
p, ul, table {font-size: 1em;margin-bottom:1em;}
a {color: var(--TurquoiseDark);}
b, strong {font-weight:600;}
strong.stronger {font-weight: 800;}
h1, .h1 {font-size: 1.65em; margin-bottom: .8em; text-align: center; font-weight: 800; font-family: "Funnel Display", sans-serif; text-transform: uppercase;}
h1 .light, .h1 .light {font-weight: 400; }
h2, .h2 {font-size: 1.3em; margin-bottom: .75em; text-align: center; font-weight: 800; font-family: "Funnel Display", sans-serif; text-transform: uppercase;}
h2.h2-xs {text-align: left; text-transform: uppercase;margin-bottom: 0;font-size: 1.05em;}
body.home h2 {margin-bottom: 0; font-size: 1.4em;}
/*main {transition: all 1s ease-out;}*/
/*main {margin-top: 120px;}*/
@media (min-width: 480px) {
h1, .h1 {font-size: 1.65em;}
h2, .h2 {font-size: 1.4em;}
}
@media (min-width: 768px) {
h1, .h1 {font-size: 1.65em;}
h2, .h2 {font-size: 1.5em;}
}
@media (min-width: 992px) {
h1, .h1 {font-size:1.85em;}
h2, .h2 {font-size: 1.6em;}
h2.h2-xs {;font-size: 2em;}
}
@media (min-width: 1200px) {
/*main {margin-top: 155px;}*/
h1, .h1 {font-size: 2em;}
h2, .h2 {font-size: 1.66em;}
}
@media (min-width: 1500px) {
h1, .h1 {font-size: 2.1em;}
h2, .h2 {font-size: 1.7em;}
}
.img-rounded {border-radius: 10px;}
.btn {padding: 1em 2em; font-size: 13px; text-align: center; border-radius: 12px; margin-bottom: 0; text-transform: uppercase; font-weight: 500; font-family: "Funnel Display", sans-serif; background: linear-gradient(to right, var(--TurquoiseLight), var(--Turquoise)); color: #fff; font-size: 15px; font-weight: 600;}
.btn:hover {background: linear-gradient(to right, var(--TurquoiseDark), var(--Turquoise));}
.btn--hover-blanc:hover {background: #fff; color: var(--TurquoiseDark);}
.btn--blanc {color: var(--TurquoiseDark); border: solid 1px #fff; background: #fff;}
.btn--blanc:hover {background: linear-gradient(to right, var(--TurquoiseLight), var(--Turquoise)); color: #fff;}
.btn--blanc-cadre {color: var(--TurquoiseDark); border: solid 1px #fff; background: #fff; border: solid 1px var(--Turquoise);}
.btn--blanc-cadre:hover {background: linear-gradient(to right, var(--TurquoiseLight), var(--Turquoise)); color: #fff;}
.txt-TurquoiseDark {color: var(--TurquoiseDark);}
.txt-semibold {font-weight: 500;}
/*.btn-effet {position: relative; text-decoration: none; transition: background-color 0.3s ease; background: #fff;}
.btn-effet:before {background-color: var(--Bleu); bottom: 0;
content: "";
display: block;
left: 0;
position: absolute;
top: 0;
transition: width 0.3s ease;width: 0;}*/
/*.btn-effet:hover:before, .btn-effet.current:before {width: 100%;}
.btn-effet:hover, .btn-effet.current {color: #000;}
.btn-effet span {color: var(--Noir); display: block; position: relative; transition: color 0.3s ease; z-index: 1;}
.btn-effet:hover span,.btn-effet.current span {color: #fff;}
.btn--facebook span {display: inline-block; background-image: url(../images/facebook.svg); background-repeat: no-repeat; background-position: right center; background-size: 20px auto; padding-right: 30px;}
.btn--outline {color: var(--Noir); padding: .55em 1.5em;border: 1px solid var(--Noir); background: transparent;text-transform: none; font-weight: 600; border-radius: 30px; font-size: 12px;}
.btn--outline:hover, .btn--outline.current {color: #fff; background-color:var(--Noir);}
*/
.bg--grey {background-color: #f4f4f7;}
.section-title {margin-bottom: 2em;}
.section-title .section-title1 {color: var(--Noir); font-weight: 500; margin: 0; font-size: 0.77em; line-height: 1;}
.section-title .section-title2 {color: var(--Noir); font-weight: 500; margin: 0; font-size: 1.8em; line-height: 1;}
.section-title .section-title3 {color: var(--Noir); font-weight: 400; margin: 0; font-size: 0.95em; line-height: 1;}
.section-title .section-text {color: var(--Noir); font-weight: 300; margin: 0; font-size: 1rem; line-height: 1.4;}
ul.list-puces {margin:0; padding:0;}
ul.list-puces li {margin:0; padding:0; padding-left: 30px; padding-bottom: 7px; list-style: none;
background-image: url(../images/puce-list.svg);
background-repeat: no-repeat;
background-position: left top;
background-size: 24px;}
.section-text {font-weight: 300;}
#page {overflow: hidden;}
.msgJavascript {background: #fff; padding: 25px 25px;}
/* ******************************* HEADER */
/*.navbar-header {position: fixed; background: #fff; width: 100%; top: 0; z-index: 100;}*/
.navbar-header {background: #fff; width: 100%; z-index: 100; /*transition: all 0.5s;*/}
.navbar-header.position-fixed {/*position: fixed; top: 0; opacity:1;*/ top:0; opacity: 0;}
/*body.nav-is-open .navbar-header{position: absolute;}*/
.page-header {position: relative; z-index: 100;}
.header-toolbar {padding: 15px 0;}
.header-logo {padding: 10px 0; /*margin: 5px 0;*/}
.header-logo .img-logo {height: 70px;}
.header-logo a:hover {text-decoration: none;}
@media (max-width: 1199px) {
.header-links .btn--outline {font-size: 16px;}
}
@media (min-width: 768px) {
.header-logo .img-logo {height: 100px;}
}
@media (min-width: 1200px) {
.header-logo {padding: 15px 0;}
.header-logo .img-logo {height: 115px;}
}
@media (min-width: 1500px) {
.header-logo .img-logo {height: 115px;}
}
.body-home .navbar-header {position: absolute; background: transparent; left: 0; right: 0; top: 0;}
.body-home .navbar-header.position-fixed {background: #fff; box-shadow: 1px 1px 8px #555;}
/* ******************************* NAV */
.nav ul {margin: 0; padding: 0;}
ul.nav-menu a {display: block; font-family: "Funnel Display", sans-serif; font-weight: 400;text-decoration: none; font-size: 17px; line-height: 1;}
ul.nav-menu {margin: 0;}
ul.nav-menu li { display:block;position: relative;}
ul.nav-menu a:hover {text-decoration: none;}
ul.nav-menu ul.sub-menu a {text-transform: none;;}
.nav-toggle {display: block;}
.nav-icon {width: 40px; cursor: pointer;}
.nav-icon:after,
.nav-icon:before,
.nav-icon div {background-color: var(--Noir); -webkit-border-radius: 3px; border-radius: 3px; content: ''; display: block; height: 5px; margin: 7px 0; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.nav-toggle.is-open .nav-icon:before {transform: translateY(12px) rotate(135deg); -webkit-transform: translateY(12px) rotate(135deg); }
.nav-toggle.is-open .nav-icon:after {transform: translateY(-12px) rotate(-135deg); -webkit-transform: translateY(-12px) rotate(-135deg); }
.nav-toggle.is-open .nav-icon div {-webkit-transform: scale(0); transform: scale(0); }
@media (max-width:1199px) {
.header-links {display: none;position: absolute; left: 0; right: 0; top: 120px; z-index: 9999;background-color: var(--GrisClair1); bottom: 0; overflow-y: scroll;}
.header-links.is-open {display: flex; flex-direction: column;}
body.nav-is-open {overflow: hidden;}
body.nav-is-open .header-links {position: fixed; top: 120px; width: 100%}
body.nav-is-open .page-header {position: fixed; top: 0px; width: 100%; background: #fff;}
body.nav-is-open .navbar-header {}
.nav {text-align: center; padding: 0 ;font-size: 16px; padding-top: 22px;}
ul.nav-menu a {text-transform: uppercase;}
ul.nav-menu > li {margin-bottom: 0.75em;}
ul.nav-menu > li > a {padding: 10px; }
.nav a:hover {background-color: var(--Turquoise); color: #fff;}
ul.nav-menu .sub-menu a {padding: 5px 10px; text-transform: none; font-size: 0.92em;}
ul.nav-menu .sub-menu .sub-menu {background: #ff0000;}
ul.nav-menu .sub-menu .sub-menu a {padding-left: 15px;}
}
@media (min-width:1200px) {
.header-links {display: block !important;}
.nav {}
.nav a {color: var(--Noir);font-size: 17px;padding: 6px 0px; margin-left: 15px; margin-right: 15px; }
/*.nav li:not(.contact) {padding-top: 5px;}*/
/*.nav li.contact {border-radius: 10px; border: solid 1px #000; margin-left: 25px;}
.nav li.contact a {text-transform: uppercase; padding: 7px 10px;}*/
ul.nav-menu > li {display: inline-block;margin-right: 1px;}
ul.nav-menu > li.contact {border: solid 1px #000; border-radius: 8px; text-transform: uppercase; }
ul.nav-menu > li.contact a {/*font-size: 15.5px;*/}
ul.nav-menu > li:last-child {margin-right: 0;}
/*ul.nav-menu > li:first-child a {border-radius: 10px 0 0 10px;}
ul.nav-menu > li:last-child a {border-radius: 0 10px 10px 0;}*/
ul.nav-menu > li > a {}
ul.nav-menu li.active > a, ul.nav-menu li > a:hover, .nav-menu li:hover > a {text-decoration: none; color: var(--Turquoise);}
ul.nav-menu ul.sub-menu {top: 100%; background: var(--Turquoise); width: 210px; position: absolute; left: -999em;z-index: 999; color: #FFF;}
ul.nav-menu li:hover > ul.sub-menu {left: 0;}
ul.nav-menu ul.sub-menu a {border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; margin: 0; padding: 10px 15px;}
ul.nav-menu ul.sub-menu li:hover a,
ul.nav-menu ul.sub-menu a:hover {background-color: rgba(255, 255, 255, .1); color: #fff;}
}
.top-bar {color: var(--Noir); font-size: 14px; font-weight: 300; letter-spacing: 0.5px;}
.top-bar a {color: var(--Noir); font-size: 14px;}
.top-bar .language-switcher {background: #f2f2f2; height: 30px; padding: 5px 10px; margin-left: 10px;}
.top-bar .language-switcher a {padding:0 5px; font-weight: 300; color: #b2b2b2; text-decoration: none;}
.top-bar .language-switcher a.current {color: #000; font-weight: 600;}
.top-bar .language-switcher a:hover {color: #000; text-decoration: underline;}
.top-bar .separateur { padding-right: 15px; border-right: solid 1px #dbdbde;}
.top-bar .marge-gauche { padding-left: 15px; }
/* ******************************* MAIN SLIDER */
.main-slider {position: relative/*;margin-bottom: 20px; margin-top: 64px;*/}
.main-slider .text {position: absolute; left: 15px; right: 15px; text-align: center;top: 0; bottom: 0; color: #fff; font-weight: 600;}
.main-slider .text .titre {text-shadow: 0 0 4px rgba(0, 0, 0, .85);font-size: 1.5em; line-height: 1.15}
.main-slider .text .sous-titre {text-shadow: 0 0 4px rgba(0, 0, 0, .85);font-size: 1.8em; line-height: 1.2; font-weight: 400;}
.main-slider .text h1 {color: #fff;}
.main-slider .voile {position: absolute; top:0; width: 100%; height: 100%; background: rgba(0, 0, 0, .3);}
@media (min-width: 480px) {
.main-slider .text .titre {font-size: 2em;}
}
@media (min-width: 768px) {
.main-slider .text .titre {font-size: 2.9em;}
.main-slider .voile {background: url(../images/slider/bg-slider.svg) no-repeat left bottom rgba(0, 0, 0, .3); background-size: auto 100%;}
}
@media (min-width: 992px) {
.main-slider .text .titre {font-size: 3.3em;}
}
@media (min-width: 1200px) {
.main-slider .text .titre {font-size: 3.7em;}
}
.main-slider .form-search-home {width: 100%;}
.main-slider .form-search-home form {margin: 0 auto; max-width: 300px; margin-top: 30px; margin-bottom: 30px; box-shadow: 1px 1px 12px #555; border-radius: 12px;}
.main-slider .form-search-home form .donnees {background: #fff; border-top-left-radius: 12px; border-top-right-radius: 12px; padding: 15px 25px; font-size: 13px; }
.main-slider .form-search-home form .bouton button {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; background:linear-gradient(to right, var(--TurquoiseLight), var(--Turquoise)); width: 100%; padding: 12px 7px; line-height: 1; text-transform: uppercase; text-align: center; color: #fff; border: none;}
.main-slider .form-search-home form .bouton button:hover {background:linear-gradient(to right, var(--Turquoise), var(--TurquoiseLight)); }
.main-slider .form-search-home form .liste-choix {width: 100%; overflow: auto; border-radius: 9px; border: solid 1px #b8b8b8;}
.main-slider .form-search-home form .liste-choix .choix {display: inline-block; float: left; height: 36px; padding-top: 10px; cursor: pointer;}
.main-slider .form-search-home form .liste-choix-transaction .choix-1 {width:40%;}
.main-slider .form-search-home form .liste-choix-transaction .choix-2 {width: 60%;}
.main-slider .form-search-home form .liste-choix-type-vehicule .choix-1 {width: 50%;}
.main-slider .form-search-home form .liste-choix-type-vehicule .choix-2 {width: 50%;}
.main-slider .form-search-home form .liste-choix-type-vehicule .choix {padding-top: 6px;}
.main-slider .form-search-home form .liste-choix .choix-ok {background: var(--TurquoiseDark); color: #fff;}
.main-slider .form-search-home form .liste-choix .choix-1.choix-ok {box-shadow: 1px 0px 3px #555;}
.main-slider .form-search-home form .liste-choix .choix-2.choix-ok {box-shadow: -1px 0px 3px #555;}
.main-slider .form-search-home form select {width: 100%; padding: 10px 10px; background: #f4f4f7; border-radius: 8px; border: none; appearance: none; color: #888; /* supprime la flèche par défaut sur certains navigateurs */
-webkit-appearance: none; /* pour Safari */
-moz-appearance: none; /* pour Firefox */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center; /* décale la flèche à gauche */
background-size: 20px;}
.main-slider .form-search-home form .liste-radio .choix-radio {
display: flex;
align-items: center; /* centre verticalement input et label */
gap: 5px; /* espace entre la bulle radio et le texte, facultatif */
}
.main-slider .form-search-home form .liste-radio .choix-radio-1 {margin-bottom: 5px;}
.main-slider .form-search-home form .liste-radio .choix-radio input[type="radio"] {
transform: scale(1.15); /* agrandit de 25% */
margin-right: 6px; /* espace entre radio et texte, ajuste si besoin */
}
.range-slider {width: 100%;}
.price-labels {text-align: center;}
.slider-container {
position: relative;
height: 26px;
}
input[type="range"] {
position: absolute;
width: 100%;
top: 50%; /* ✅ Aligne verticalement avec .slider-track */
transform: translateY(-50%);
pointer-events: none;
appearance: none;
height: 6px;
background: none;
z-index: 3;
}
.slider-track {
position: absolute;
height: 6px;
background: #ddd;
border-radius: 3px;
top: 50%;
transform: translateY(-50%);
width: 100%;
z-index: 1;
}
.slider-container::before {
content: "";
position: absolute;
height: 6px;
background: var(--TurquoiseDark);
border-radius: 3px;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
input[type="range"]::-webkit-slider-thumb {
pointer-events: all;
appearance: none;
height: 13px;
width: 13px;
background: var(--TurquoiseDark);
border-radius: 50%;
cursor: pointer;
border: none;
z-index: 4;
}
input[type="range"]::-moz-range-thumb {
pointer-events: all;
height: 20px;
width: 20px;
background: var(--TurquoiseDark);
border-radius: 50%;
cursor: pointer;
border: none;
z-index: 4;
}
@media (min-width: 480px) {
.main-slider .form-search-home {position: absolute; top: 130px; margin-top: 0; margin-bottom: 0;}
.main-slider .form-search-home form {max-width: 420px; }
}
@media (min-width: 768px) {
.main-slider .form-search-home {position: absolute; top: 120px; /*height: 160px; */margin-top: 0; margin-bottom: 0;}
.main-slider .form-search-home form {max-width: 550px; top: calc(50% - 80px); }
.main-slider .form-search-home form .donnees {font-size: 15px;}
.main-slider .form-search-home form .liste-choix .choix {height : 44px;}
.main-slider .form-search-home form .liste-choix-type-vehicule .choix {padding-top: 10px;}
}
@media (min-width: 1200px) {
.main-slider .form-search-home {top: 170px;}
}
/* ******************************* VAGUES */
.section-vague1 {background: url(../images/vague1.png) top center no-repeat; background-size: 100%;}
.section-vague2 {background: url(../images/vague2.jpg) top center no-repeat; background-size: cover;}
/* ******************************* HOME */
/* CAROUSEL MARQUES */
#carousel-marques {width: 100%;margin-left: auto; margin-right: auto; position: relative;}
#carousel-marques li {padding: 20px 0;}
.listing-marques .item-marque {/*width: 280px; *//*height: 205px;*/ margin-left: auto; margin-right: auto; display: block; max-width: 330px; position: relative; box-shadow: 1px 1px 20px #ababab; border-radius: 12px; background: #fff; width: calc(100% - 20px); width: 222px; cursor: pointer;}
.listing-marques .item-marque a {text-decoration: none;}
.listing-marques .item-marque:hover { background:linear-gradient(to right, var(--TurquoiseLight), var(--Turquoise)); box-shadow: none;}
/*.listing-marques .item-marque .item-header {border-top-left-radius: 12px; border-top-right-radius: 12px; padding: 15px 10px; text-align: center;}
.listing-marques .item-marque .item-header img {max-width: 130px;}*/
.listing-marques .item-marque .item-header { height: 170px; margin-top: 10px;}
.listing-marques .item-marque .item-titre {padding: 15px 0; text-align: center; color: var(--GrisBleute);}
.listing-marques .item-marque:hover .item-titre { color: #fff;}
/* carousel */
.listing-marques .flex-direction-nav {bottom: 0; margin-bottom: -15px; height: 0; position: absolute; left: 0; right: 0; z-index: 80;}
.listing-marques .flex-direction-nav li {display: inline-block; zoom: 1; *display: inline; position: relative;}
.listing-marques .flex-direction-nav .flex-disabled {opacity: 0!important; filter:alpha(opacity=0); cursor: default;z-index: -1;}
.listing-marques .flex-direction-nav .flex-nav-prev {float: left;margin-left: 0px;}
.listing-marques .flex-direction-nav .flex-nav-next {float: right;margin-right: 0px;}
.listing-marques .flex-direction-nav a {font-size: 0; position: absolute;text-decoration: none !important; display: block; z-index: 10; overflow: hidden; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.listing-marques .flex-direction-nav .flex-nav-next a {right: 0;}
.listing-marques .flex-direction-nav a:before {content: ""; display: inline-block; width: 46px; height: 26px; background: url(../images/carousel-left.svg) center center no-repeat;;}
.listing-marques .flex-direction-nav a.flex-next:before {background: url(../images/carousel-right.svg) center center no-repeat;}
.listing-marques .flex-control-paging {bottom:0; margin-bottom: -50px;}
.listing-marques .flex-control-paging li a {border: solid 1px var(--GrisBleute); opacity: 1;}
.listing-marques .flex-control-paging li a.flex-active {background: var(--GrisBleute);}
@media (min-width: 480px) {
.listing-marques .item-marque {width: 182px;}
.listing-marques .item-marque .item-header { height: 130px;}
.listing-marques .flex-direction-nav {top: 50%; bottom: inherit; margin-bottom: inherit; margin-top: -30px; left: 0; right: 0; }
.listing-marques .flex-direction-nav a:before {width: 60px; height: 60px;}
.listing-marques .flex-direction-nav .flex-nav-prev {float: left;margin-left: -25px;}
.listing-marques .flex-direction-nav .flex-nav-next {float: right;margin-right: -15px;}
}
@media (min-width: 480px) {
.listing-marques .item-marque {width: 167px;}
.listing-marques .item-marque .item-header { height: 115px;}
}
@media (min-width: 768px) {
.listing-marques .item-marque {margin-left: 15px; margin-right: 15px; display: inline-block; width: 177px;}
.listing-marques .flex-direction-nav .flex-nav-prev {margin-left: -70px;}
.listing-marques .flex-direction-nav .flex-nav-next {margin-right: -70px;}
}
@media (min-width: 992px) {
.listing-marques .item-marque {margin-left: 30px; margin-right: 30px; display: inline-block; }
}
@media (min-width: 992px) {
.listing-marques .item-marque .item-header { height: 110px;}
.listing-marques .item-marque {width: 172px;}
}
/* CAROUSEL VEHICULES */
#carousel-vehicules {width: 100%;margin-left: auto; margin-right: auto; position: relative;}
#carousel-vehicules li {padding: 6px 0;
margin: 15px auto; /* pour l'ombre verticale */
}
.body-home .listing-vehicules .item-vehicule {/*width: 280px; *//*height: 205px;*/ margin-left: auto; margin-right: auto; display: block; width: 100%; max-width: 330px; position: relative; box-shadow: 1px 1px 20px #ababab; border-radius: 12px; background: #fff;}
.body-home .listing-vehicules .item-vehicule .item-img {display: block; aspect-ratio: 4/3; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.body-home .listing-vehicules .item-vehicule a:hover .carousel-bloc-layer {opacity: 1; background: url(../images/home/carousel-realisations/degrade.png) bottom repeat-x;}
.body-home .listing-vehicules .item-vehicule a .carousel-bloc-layer.current {opacity: 1; }
.body-home .listing-vehicules .item-vehicule .item-content {padding: 15px; padding-right: 0;}
.body-home .listing-vehicules .item-vehicule .item-content .row {margin-left: 0; margin-right: 0;}
.body-home .listing-vehicules .item-vehicule .item-content .row > div {padding-left: 0; padding-right: 0;}
.body-home .listing-vehicules .item-vehicule .modele-infos {padding-right: 15px; margin-bottom: 15px;}
.body-home .listing-vehicules .item-vehicule .modele1 {font-weight: 900; text-transform: uppercase; color: var(--TurquoiseDark); font-size: 1.18em;}
.body-home .listing-vehicules .item-vehicule .modele2 {text-transform: uppercase;}
.body-home .listing-vehicules .item-vehicule .infos-tarif {padding: 10px 6px; border-top-left-radius: 12px; border-bottom-left-radius: 12px;}
.body-home .listing-vehicules .item-vehicule .infos-tarif .prix {color: var(--TurquoiseDark); font-size: 1.42em; font-weight: 900; font-family: "Funnel Display", sans-serif;}
.body-home .listing-vehicules .item-vehicule .infos-tarif .mensualites {font-weight: 700; font-size: 1.0em; line-height: 1.1;}
.body-home .listing-vehicules .item-vehicule .infos-tarif .a-partir-de {font-weight: 400; font-size: 0.7em; line-height: 1; margin-top: 4px;}
.body-home .listing-vehicules .item-vehicule .infos-tarif .premier-loyer {font-size: 0.7em;}
.body-home .listing-vehicules .item-vehicule .caracteristique {position: relative; padding-left: 28px; font-size: 0.88em; margin-bottom: 2px;}
.body-home .listing-vehicules .item-vehicule .caracteristique:before {content:''; position: absolute; top:0; left:0; width: 22px; height: 18px; }
.body-home .listing-vehicules .item-vehicule .caracteristique-date:before {background: url(../images/vehicule/icone-date.svg) center center no-repeat; background-size: 100%;}
.body-home .listing-vehicules .item-vehicule .caracteristique-km:before {background: url(../images/vehicule/icone-km.svg) center center no-repeat; background-size: 100%;}
.body-home .listing-vehicules .item-vehicule .caracteristique-moteur:before {background: url(../images/vehicule/icone-moteur.svg) center center no-repeat; background-size: 100%;}
.body-home .listing-vehicules .item-vehicule .caracteristique-boite:before {background: url(../images/vehicule/icone-boite.svg) center center no-repeat; background-size: 100%;}
.body-home .listing-vehicules .item-vehicule .item-footer {margin: 0 18px; padding: 15px 8px; margin-top: 12px; font-size: 0.8em; font-weight: 600; text-transform: uppercase; border-top: solid 1px #808080;}
/* carousel */
.body-home .listing-vehicules .flex-direction-nav {bottom: 0; margin-bottom: -15px; height: 0; position: absolute; left: 0; right: 0; z-index: 80;}
.body-home .listing-vehicules .flex-direction-nav li {display: inline-block; zoom: 1; *display: inline; position: relative;}
.body-home .listing-vehicules .flex-direction-nav .flex-disabled {opacity: 0!important; filter:alpha(opacity=0); cursor: default;z-index: -1;}
.body-home .listing-vehicules .flex-direction-nav .flex-nav-prev {float: left;margin-left: 0px;}
.body-home .listing-vehicules .flex-direction-nav .flex-nav-next {float: right;margin-right: 0px;}
.body-home .listing-vehicules .flex-direction-nav a {font-size: 0; position: absolute;text-decoration: none !important; display: block; z-index: 10; overflow: hidden; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.body-home .listing-vehicules .flex-direction-nav .flex-nav-next a {right: 0;}
.body-home .listing-vehicules .flex-direction-nav a:before {content: ""; display: inline-block; width: 46px; height: 26px; background: url(../images/carousel-left.svg) center center no-repeat;;}
.body-home .listing-vehicules .flex-direction-nav a.flex-next:before {background: url(../images/carousel-right.svg) center center no-repeat;}
.body-home .listing-vehicules .flex-control-paging {bottom:0; margin-bottom: -50px;}
.body-home .listing-vehicules .flex-control-paging li a {border: solid 1px var(--GrisBleute); opacity: 1;}
.body-home .listing-vehicules .flex-control-paging li a.flex-active {background: var(--GrisBleute);}
@media (min-width: 480px) {
.body-home .listing-vehicules .flex-direction-nav {top: 50%; bottom: inherit; margin-bottom: inherit; margin-top: -30px; left: 0; right: 0; }
.body-home .listing-vehicules .flex-direction-nav a:before {width: 60px; height: 60px;}
.body-home .listing-vehicules .flex-direction-nav .flex-nav-prev {float: left;margin-left: -25px;}
.body-home .listing-vehicules .flex-direction-nav .flex-nav-next {float: right;margin-right: -15px;}
}
@media (min-width: 768px) {
.body-home .listing-vehicules .item-vehicule {width: calc(100% - 40px); /*margin-left: 10px; margin-right: 10px;*/margin-left: 20px; margin-right: auto; display: inline-block;}
.body-home .listing-vehicules .item-vehicule .item-content {height: 200px;}
.body-home .listing-vehicules .flex-direction-nav .flex-nav-prev {margin-left: -70px;}
.body-home .listing-vehicules .flex-direction-nav .flex-nav-next {margin-right: -70px;}
#carousel-vehicules li.flex-nav-next {margin-right: -70px;}
#carousel-vehicules li.flex-nav-prev {margin-left: -70px;}
}
@media (min-width: 992px) and (max-width: 1499.99px) {
.body-home .listing-vehicules .item-vehicule .infos-tarif {padding-left: 0; padding-right: 5px;}
.body-home .listing-vehicules .item-vehicule .infos-tarif .premier-loyer {font-size: 0.66em;}
.body-home .listing-vehicules .item-vehicule .infos-tarif .a-partir-de {font-size: 0.66em;}
}
/* CAROUSEL ACTUALITES */
#carousel-actualites {width: 100%;margin-left: auto; margin-right: auto; position: relative;}
#carousel-actualites li {padding: 6px 0;}
.listing-actualites .item-actualite {/*width: 280px; *//*height: 205px;*/ margin: 20px 0; margin-left: auto; margin-right: auto; display: block; max-width: 330px; position: relative; box-shadow: 1px 1px 15px #ababab; border-radius: 12px; background: #fff;}
.listing-actualites .item-actualite .item-img {display: block; aspect-ratio: 1.48; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.listing-actualites .item-actualite a:hover .carousel-bloc-layer {opacity: 1; background: url(../images/home/carousel-realisations/degrade.png) bottom repeat-x;}
.listing-actualites .item-actualite a .carousel-bloc-layer.current {opacity: 1; }
.listing-actualites .item-actualite .item-infos {position: relative;}
.listing-actualites .item-actualite .item-content {padding: 15px; padding-top: 35px; padding-left: 0; height: 310px;}
.listing-actualites .item-actualite .titre {padding-left: 15px; margin-bottom: 15px; border-left: solid 6px var(--TurquoiseDark); font-weight: 900; text-transform: uppercase; color: var(--TurquoiseDark); font-size: 1.18em;}
.listing-actualites .item-actualite .item-categorie {position: absolute; top:0; left: 20px; margin-top: -18px; background:var(--TurquoiseDark); color: #fff; text-transform: uppercase; font-weight: 600; display:inline-block; padding: 8px 25px; border-radius: 8px; font-size: 0.8em}
.listing-actualites .item-actualite .item-content .infos {padding-left: 22px; font-size: 0.92em;}
.listing-actualites .item-actualite .item-content .infos .texte {font-weight: 300;}
.listing-actualites .item-actualite .date {color: #999999; font-size: 0.95em; font-weight: 600; padding: 2px 0; padding-left: 25px; background: url(../images/actu-date.svg) center left no-repeat; background-size: 20px; margin-bottom: 12px;}
.listing-actualites .item-actualite .item-footer {margin: 0 18px; padding: 8px; margin-top: 2px; margin-bottom: 6px; }
.listing-actualites .item-actualite .item-footer a {display: block; margin-right:0; margin-left: auto; background: url(../images/actu-plus.svg) center center no-repeat; background-size: 100%; width: 40px; height: 40px;}
.listing-actualites .item-actualite .item-footer a:hover { background: url(../images/actu-plus-hover.svg) center center no-repeat; background-size: 100%;}
/* carousel */
.listing-actualites .flex-direction-nav {bottom: 0; margin-bottom: -15px; height: 0; position: absolute; left: 0; right: 0; z-index: 80;}
.listing-actualites .flex-direction-nav li {display: inline-block; zoom: 1; *display: inline; position: relative;}
.listing-actualites .flex-direction-nav .flex-disabled {opacity: 0!important; filter:alpha(opacity=0); cursor: default;z-index: -1;}
.listing-actualites .flex-direction-nav .flex-nav-prev {float: left;margin-left: 0px;}
.listing-actualites .flex-direction-nav .flex-nav-next {float: right;margin-right: 0px;}
.listing-actualites .flex-direction-nav a {font-size: 0; position: absolute;text-decoration: none !important; display: block; z-index: 10; overflow: hidden; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.listing-actualites .flex-direction-nav .flex-nav-next a {right: 0;}
.listing-actualites .flex-direction-nav a:before {content: ""; display: inline-block; width: 46px; height: 26px; background: url(../images/carousel-left.svg) center center no-repeat;;}
.listing-actualites .flex-direction-nav a.flex-next:before {background: url(../images/carousel-right.svg) center center no-repeat;}
.listing-actualites .flex-control-paging {bottom:0; margin-bottom: -50px;}
.listing-actualites .flex-control-paging li a {border: solid 1px var(--GrisBleute); opacity: 1;}
.listing-actualites .flex-control-paging li a.flex-active {background: var(--GrisBleute);}
@media (min-width: 480px) {
.listing-actualites .flex-direction-nav {top: 50%; bottom: inherit; margin-bottom: inherit; margin-top: -30px; left: 0; right: 0; }
.listing-actualites .flex-direction-nav a:before {width: 60px; height: 60px;}
.listing-actualites .flex-direction-nav .flex-nav-prev {float: left;margin-left: -25px;}
.listing-actualites .flex-direction-nav .flex-nav-next {float: right;margin-right: -15px;}
}
@media (min-width: 768px) {
.listing-actualites .item-actualite {/*margin-left: 10px; margin-right: 10px; */width: calc(100% - 40px); margin-left: 20px; margin-right: auto; display: inline-block;}
.listing-actualites .flex-direction-nav .flex-nav-prev {margin-left: -70px;}
.listing-actualites .flex-direction-nav .flex-nav-next {margin-right: -70px;}
}
@media (min-width: 992px) and (max-width: 1199px) {
.listing-actualites .item-actualite .item-content {height: 370px;}
}
@media (min-width: 1200px) {
/*.listing-actualites .item-actualite .item-content {height: 400px;}*/
}
/* CAROUSEL AVIS */
#carousel-avis {width: 100%;margin-left: auto; margin-right: auto; position: relative;}
#carousel-avis li {padding: 6px 0;}
.listing-avis .item-avis {/*width: 280px; *//*height: 205px;*/ margin-left: auto; margin-right: auto; display: block; max-width: 330px; position: relative; box-shadow: 1px 1px 8px #555; border-radius: 12px; background: #fff; width: calc(100% - 20px);}
.listing-avis .item-avis .item-header {border-top-left-radius: 12px; border-top-right-radius: 12px; padding: 10px 10px; text-align: center; text-transform: uppercase; font-size: 0.85em; font-weight: 600;}
.listing-avis .item-avis .item-header img {/*max-width: 70px; margin-right: 10px;*/ display: block; margin: 0 auto;}
.listing-avis .item-avis .item-infos {position: relative;}
.listing-avis .item-avis .item-content {padding: 15px; text-align: center;}
.listing-avis .item-avis .note {font-size: 1.1em;}
.listing-avis .item-avis .note span {font-weight: 700; font-size: 1.7em;}
.listing-avis .item-avis .nb_avis {color: #808080; font-size: 0.8em;}
@media (min-width: 1500px) {
.listing-avis .item-avis .item-header img {max-width: 70px; margin-right: 10px; display: inline;}
}
/* carousel */
.listing-avis .flex-direction-nav {bottom: 0; margin-bottom: -15px; height: 0; position: absolute; left: 0; right: 0; z-index: 80;}
.listing-avis .flex-direction-nav li {display: inline-block; zoom: 1; *display: inline; position: relative;}
.listing-avis .flex-direction-nav .flex-disabled {opacity: 0!important; filter:alpha(opacity=0); cursor: default;z-index: -1;}
.listing-avis .flex-direction-nav .flex-nav-prev {float: left;margin-left: 0px;}
.listing-avis .flex-direction-nav .flex-nav-next {float: right;margin-right: 0px;}
.listing-avis .flex-direction-nav a {font-size: 0; position: absolute;text-decoration: none !important; display: block; z-index: 10; overflow: hidden; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.listing-avis .flex-direction-nav .flex-nav-next a {right: 0;}
.listing-avis .flex-direction-nav a:before {content: ""; display: inline-block; width: 46px; height: 26px; background: url(../images/carousel-left.svg) center center no-repeat;;}
.listing-avis .flex-direction-nav a.flex-next:before {background: url(../images/carousel-right.svg) center center no-repeat;}
.listing-avis .flex-control-paging {bottom:0; margin-bottom: -50px;}
.listing-avis .flex-control-paging li a {border: solid 1px var(--GrisBleute); opacity: 1;}
.listing-avis .flex-control-paging li a.flex-active {background: var(--GrisBleute);}
@media (min-width: 480px) {
.listing-avis .flex-direction-nav {top: 50%; bottom: inherit; margin-bottom: inherit; margin-top: -30px; left: 0; right: 0; }
.listing-avis .flex-direction-nav a:before {width: 60px; height: 60px;}
.listing-avis .flex-direction-nav .flex-nav-prev {float: left;margin-left: -25px;}
.listing-avis .flex-direction-nav .flex-nav-next {float: right;margin-right: -15px;}
}
@media (min-width: 768px) {
.listing-avis .item-avis {margin-left: 10px; margin-right: 10px; display: inline-block;}
.listing-avis .flex-direction-nav .flex-nav-prev {margin-left: -70px;}
.listing-avis .flex-direction-nav .flex-nav-next {margin-right: -70px;}
}
/* ********************************* CAROUSEL PAGES INTERIEURES */
.carousel-pages-interieures {width: 280px;margin-left: auto; margin-right: auto;}
.carousel-pages-interieures li {text-align: center;}
.carousel-pages-interieures .carousel-bloc {width: 280px; height: 205px; margin-right: 10px; display: inline-block;position: relative;}
.carousel-pages-interieures .carousel-bloc a {display: block;width: 270px; height: 205px; background-repeat: no-repeat; background-position: 0 0;/*border-radius: 10px;*/}
@media (min-width: 400px) {
.carousel-pages-interieures {width: 340px;}
.carousel-pages-interieures .carousel-bloc {width: 340px; height: 235px; margin-right: 10px; }
.carousel-pages-interieures .carousel-bloc a {width: 330px; height: 235px; }
}
@media (min-width: 480px) {
.carousel-pages-interieures {width: 370px;}
.carousel-pages-interieures .carousel-bloc {width: 370px; height: 275px; margin-right: 10px; }
.carousel-pages-interieures .carousel-bloc a {width: 360px; height: 275px; }
}
@media (min-width: 768px) {
.carousel-pages-interieures {width: 540px;}
.carousel-pages-interieures .carousel-bloc {width: 540px; height: 375px; }
.carousel-pages-interieures .carousel-bloc a {width: 530px; height: 375px; }
}
@media (min-width: 992px) {
.carousel-pages-interieures {width: 370px;}
.carousel-pages-interieures .carousel-bloc {width: 370px; height: 275px; margin-right: 10px; }
.carousel-pages-interieures .carousel-bloc a {width: 360px; height: 275px; }
}
@media (min-width: 1240px) {
.carousel-pages-interieures {width: 540px;}
.carousel-pages-interieures .carousel-bloc {width: 540px; height: 375px; }
.carousel-pages-interieures .carousel-bloc a {width: 530px; height: 375px; }
}
/* carousel */
.carousel-pages-interieures .flex-direction-nav {bottom: 0; margin-bottom: -0px; height: 0;position: absolute; left: 0; right: 0; z-index: 80;}
.carousel-pages-interieures .flex-direction-nav li {display: inline-block; zoom: 1; *display: inline; position: relative;}
.carousel-pages-interieures .flex-direction-nav .flex-disabled {opacity: 0!important; filter:alpha(opacity=0); cursor: default;z-index: -1;}
.carousel-pages-interieures .flex-direction-nav .flex-nav-prev {float: left;margin-left: calc(50% - 75px);}
.carousel-pages-interieures .flex-direction-nav .flex-nav-next {float: right;margin-right: calc(50% - 75px);}
.carousel-pages-interieures .flex-direction-nav a {font-size: 0; position: absolute;text-decoration: none !important; display: block; z-index: 10; overflow: hidden; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.carousel-pages-interieures .flex-direction-nav .flex-nav-next a {right: 0;}
.carousel-pages-interieures .flex-direction-nav a:before {content: ""; display: inline-block; width: 69px; height: 62px; background: url(../images/carousel-interieur/gauche.svg) ;}
.carousel-pages-interieures .flex-direction-nav a.flex-next:before {background-image: url(../images/carousel-interieur/droite.svg) ;}
.carousel-pages-interieures .flex-direction-nav a:hover:before {width: 69px; height: 62px; background: url(../images/carousel-interieur/gauche-hover.svg);}
.carousel-pages-interieures .flex-direction-nav .flex-nav-next a:hover:before {width: 69px; height: 62px; background: url(../images/carousel-interieur/droite-hover.svg);}
/* ********************************* EVALUEZ */
.evaluez {background: url(../images/bg-evaluez.jpg) center left no-repeat; background-size: cover; color: #fff; border-radius: 12px;}
.evaluez > .row {justify-content: center;}
@media (min-width: 992px) {
.evaluez h1 {text-align: left; border-left: solid 9px #fff; padding-left: 20px;}
.evaluez > .row {justify-content: start;}
}
/* ********************************* PRENDRE RDV */
.prendre-rdv {background: url(../images/bg-prendre-rdv.jpg) center left no-repeat; background-size: cover; color: #000; }
.prendre-rdv > .row {justify-content: center;}
@media (min-width: 992px) {
.prendre-rdv h1 {text-align: left; border-left: solid 9px #000; padding-left: 20px;}
.prendre-rdv > .row {justify-content: start;}
}
/* ********************************* LE GROUPE */
.section-groupe {background: linear-gradient(45deg, var(--Turquoise) 30%, var(--TurquoiseDark) 80%); color: #fff; padding: 5px 0;}
.section-groupe .accroche {font-weight: 700; font-size: 1.4em;}
.section-groupe .fake-br {display: block;}
@media (max-width: 991.99px) {
.section-groupe li {list-style-position: inside; padding-left: 0;}
}
@media (min-width: 992px) {
.section-groupe {background: url(../images/bg-groupe.jpg) bottom left no-repeat; background-size: cover; padding: 35px 0;}
.section-groupe .container {background: url(../images/bg-groupe.png) top 45px right no-repeat; background-size: 300px; }
.section-groupe h1 {text-align: left; border-left: solid 9px #fff; padding-left: 20px; }
.section-groupe .fake-br {display: none;}
.section-groupe ul {margin-left: 0; padding-left: 15px;}
.section-groupe ul, .section-groupe li {margin-left: 0;}
}
@media (min-width: 1200px) {
.section-groupe .container {background: url(../images/bg-groupe.png) top 35px right no-repeat; background-size: 380px; }
.section-groupe .fake-br {display: block;}
}
@media (min-width: 1500px) {
.section-groupe .container {background: url(../images/bg-groupe.png) top right 110px no-repeat; background-size: 490px; }
}
/* ********************************* AVIS GOOGLE */
.avis-google h1 {position: relative; display: inline-block; margin-bottom: 5px; padding-left: 50px;}
.avis-google .maj {font-size: 1.2em; margin-bottom: 30px; color: #999999;}
.avis-google h1:before {position: absolute;
top: 4px;
left: 0px; /* ou ajuste selon la largeur du SVG */
background: url(../images/G-google.svg) center center no-repeat;
background-size: 100%;
width: 40px;
height: 40px;
content: '';
display: block;}
@font-face {
font-family:star-rating;
src:url(data:application/x-font-ttf;base64,AAEAAAALAIAAAwAwT1MvMigiLIYAAAC8AAAAYGNtYXAmCyZNAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZlNxiKoAAAF4AAABFGhlYWQBHDApAAACjAAAADZoaGVhA+IB6AAAAsQAAAAkaG10eAcAAAAAAALoAAAAHGxvY2EAjADoAAADBAAAABBtYXhwAAoAGAAAAxQAAAAgbmFtZYWP6p0AAAM0AAABaXBvc3QAAwAAAAAEoAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABAAAgAAAAAAAAAAAAAAAAAABAAAAl0AHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAEAAAAAMAAgAAgAEAAEAICXLJdD//f//AAAAAAAgJcslz//9//8AAf/j2jnaNgADAAEAAAAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACAAD/7QIAAdMACgAVAAABLwEPARcHNxcnNwUHNyc/AR8BBxcnAgCxT0+xgB6enh6A/wBwFlt9ODh9WxZwARkaoKAafLBTU7B8sjp8WBJxcRJYfDoAAAAAAQAA/+0CAAHTAAoAAAEvAQ8BFwc3Fyc3AgCxT0+xgB6enh6AARkaoKAafLBTU7B8AAAAAAIAAP/tAgAB0wAKABIAAAEvAQ8BFwc3Fyc3BTERHwEHFycCALFPT7GAHp6eHoD/ADh9WxZwARkaoKAafLBTU7B8sgEdcRJYfDoAAAABAAAAAQAA1qooUl8PPPUACwIAAAAAAM/+d7YAAAAAz/53tgAA/+0CAAHTAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAIAAAEAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAQAAAAIAAAACAAAAAgAAAAAAAAAACgAUAB4ASgBkAIoAAQAAAAcAFgACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABABYAAAABAAAAAAACAA4AYwABAAAAAAADABYALAABAAAAAAAEABYAcQABAAAAAAAFABYAFgABAAAAAAAGAAsAQgABAAAAAAAKADQAhwADAAEECQABABYAAAADAAEECQACAA4AYwADAAEECQADABYALAADAAEECQAEABYAcQADAAEECQAFABYAFgADAAEECQAGABYATQADAAEECQAKADQAhwBzAHQAYQByAC0AcgBhAHQAaQBuAGcAVgBlAHIAcwBpAG8AbgAgADEALgAwAHMAdABhAHIALQByAGEAdABpAG4AZ3N0YXItcmF0aW5nAHMAdABhAHIALQByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHMAdABhAHIALQByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype'),url(data:application/font-woff;base64,d09GRk9UVE8AAAUgAAoAAAAABNgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAWMAAAFjbsVsoU9TLzIAAAJYAAAAYAAAAGAoIiyGY21hcAAAArgAAABUAAAAVCYLJk1nYXNwAAADDAAAAAgAAAAIAAAAEGhlYWQAAAMUAAAANgAAADYBHDApaGhlYQAAA0wAAAAkAAAAJAPiAehobXR4AAADcAAAABwAAAAcBwAAAG1heHAAAAOMAAAABgAAAAYAB1AAbmFtZQAAA5QAAAFpAAABaYWP6p1wb3N0AAAFAAAAACAAAAAgAAMAAAEABAQAAQEBDHN0YXItcmF0aW5nAAECAAEAOvgcAvgbA/gYBB4KABlT/4uLHgoAGVP/i4sMB4tr+JT4dAUdAAAAjg8dAAAAkxEdAAAACR0AAAFaEgAIAQEMFxkbHiMoLXN0YXItcmF0aW5nc3Rhci1yYXRpbmd1MHUxdTIwdTI1Q0J1MjVDRnUyNUQwAAACAYkABQAHAQEEBwoNVn29/JQO/JQO/JQO+5QO+JT3rRX7RaU89zQ8+zT7RXH3FPsQbftE9zLe9zI4bfdE9xT3EAX7lPtGFfsEUaH3EDDj9xGdw/cFw/sF9xF5MDOh+xD7BMUFDviU960V+0WlPPc0PPs0+0Vx9xT7EG37RPcy3vcyOG33RPcU9xAFDviU960V+0WlPPc0PPs0+0Vx9xT7EG37RPcy3vcyOG33RPcU9xAF+5T7RhWLi4v3scP7BfcReTAzofsQ+wTFBQ74lBT4lBWLDAoAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAAQAAIAAAAAAAAAAAAAAAAAAAQAAAJdAB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABAAAAADAAIAAIABAABACAlyyXQ//3//wAAAAAAICXLJc///f//AAH/49o52jYAAwABAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAAOJjA1tfDzz1AAsCAAAAAADP/ne2AAAAAM/+d7YAAP/tAgAB0wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAABwAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAAAAFAAAAcAAAAAAA4ArgABAAAAAAABABYAAAABAAAAAAACAA4AYwABAAAAAAADABYALAABAAAAAAAEABYAcQABAAAAAAAFABYAFgABAAAAAAAGAAsAQgABAAAAAAAKADQAhwADAAEECQABABYAAAADAAEECQACAA4AYwADAAEECQADABYALAADAAEECQAEABYAcQADAAEECQAFABYAFgADAAEECQAGABYATQADAAEECQAKADQAhwBzAHQAYQByAC0AcgBhAHQAaQBuAGcAVgBlAHIAcwBpAG8AbgAgADEALgAwAHMAdABhAHIALQByAGEAdABpAG4AZ3N0YXItcmF0aW5nAHMAdABhAHIALQByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHMAdABhAHIALQByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff');
font-weight:normal;
font-style:normal;
}
.avis-google .rating {font-family:star-rating; color: #ffc107;}
.avis-google .etoiles li {float: left; list: none;}
/* ********************************* COMMUNAUTE */
.section-communaute .rezo a {
display: inline-block;
margin: 0 6px;
width: 35px;
height: 35px;
background-color: var(--TurquoiseDark);
border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
transition: background-image 0.3s ease;
}
.section-communaute .rezo a:hover {background-color: var(--Turquoise);}
.section-communaute .rezo a.facebook { background-image: url(../images/rezo-facebook.svg); background-size: 70%;}
.section-communaute .rezo a.linkedin { background-image: url(../images/rezo-linkedin.svg); background-size: 55%;}
.section-communaute .rezo a.instagram { background-image: url(../images/rezo-instagram.svg); background-size: 55%;}
.section-communaute .rezo a.tiktok { background-image: url(../images/rezo-tiktok.svg); background-size: 55%;}
.section-communaute .rezo a.youtube { background-image: url(../images/rezo-youtube.svg); background-size: 65%;}
/* POPUP RESEAU ******************/
.popup-reseau a {background: var(--GrisClair1); padding: 10px 15px; border-radius: 8px; color: #000; text-decoration: none; cursor: pointer; display: block; text-align: center;}
.popup-reseau a:hover {background: var(--Gris);}
.popup-reseau ul {padding: 0px; margin: 0; }
.popup-reseau li {padding: 0px; margin: 0; padding-bottom: 10px; font-size: 0.85em; font-weight: 600; text-transform: uppercase;}
.popup-reseau li img {max-width: 70px; margin-right: 10px;}
@media (min-width: 480px) {
}
/* POPUP TARIFS LIVRAISON ******************/
.popup-tarifs-livraison {font-size: 0.9em;}
.popup-tarifs-livraison .liste-tarifs-livraison .item-suivant {border-top: solid 1px #b2b2b2;}
.popup-tarifs-livraison .liste-tarifs-livraison .item .titre {color: var(--TurquoiseDark); font-weight: 700; font-size: 1.35em; margin-bottom: 4px;}
.popup-tarifs-livraison .liste-tarifs-livraison .item .titre .prix {color: #32bcb6;}
.popup-tarifs-livraison .liste-tarifs-livraison .item .titre .prix .ttc {font-size: 0.69em; font-weight: 500;}
.popup-tarifs-livraison .liste-tarifs-livraison .item .texte {font-weight: 300;}
.popup-tarifs-livraison .liste-tarifs-livraison .item .texte .label {font-weight: 600;}
/* ******************************* PAGES INTERIEURES */
/* Bandeau header */
.bandeau-header {color: #fff; font-weight: 400; font-family: "Funnel Display", sans-serif; }
.bandeau-header.bandeau-vierge {color: #000; font-weight: 600;}
.bandeau-header ul {margin: 0; padding: 0; font-size: 0.8em; text-transform: uppercase;}
.bandeau-header ul li span {opacity: 0.65;}
.bandeau-header ul li.active span, .bandeau-header ul li a span:hover {opacity: 1;}
.bandeau-header a {text-decoration: none; color: #fff;}
.bandeau-header.bandeau-vierge a {color: var(--GrisBleute); font-weight: 400;}
.bandeau-header h1 {color: #fff; font-weight: 800; margin: 0;}
.bandeau-header .sous-titre {font-size: 1.3em; font-weight: 300; margin-top: 0.5em;text-align: center;}
.bandeau-header .bandeau-txt {padding: 3em 0; margin: 0;}
@media (min-width: 768px) {
.bandeau-header .bandeau-txt {padding: 5em 0; }
}
@media (min-width: 992px) {
.bandeau-header .bandeau-txt {padding: 5.5em;}
}
@media (min-width: 1200px) {
.bandeau-header .bandeau-txt {padding: 6em;}
}
@media (min-width: 1500px) {
.bandeau-header .bandeau-txt {padding: 7em;}
}
/* ********************************* VEHICULES D'OCCASION */
.body-vo #formSearch {background: var(--Turquoise); padding: 16px; border-radius: 12px; --bs-gutter-x: 0;}
.body-vo #formSearch .colonne-icones .colonne-croix {border-right: solid 1px #fff;}
.body-vo #formSearch .colonne-icones .colonne-croix a {width: 30px; height: 32px; background: url(../images/vo/croix.svg) center center no-repeat; background-size: 100%; border: none;}
.body-vo #formSearch .colonne-icones .colonne-croix a:hover {background-size: 90%;}
.body-vo #formSearch .colonne-icones #go {width: 30px; height: 32px; background: url(../images/vo/loupe.svg) center center no-repeat; background-size: 100%; border: none;}
.body-vo #formSearch .colonne-icones #go:hover {background-size: 90%;}
.body-vo #formSearch .filtre {padding: 0.85em 1.2em; margin-right: 1em; font-size: 14px; line-height: 1; text-align: center; border-radius: 8px; margin-bottom: 0; font-weight: 500; color: #fff; text-decoration: none; border: solid 1px #bbb;}
.body-vo #formSearch .filtre.filtre--more {padding-right: 42px; position: relative; border: solid 1px #fff; }
.body-vo #formSearch .filtre.filtre--more:after {position: absolute; right: 8px; top: 6px; width: 25px; height: 25px; content: ''; background: url(../images/vo/filtre.svg) center center no-repeat; background-size: 100%;}
.body-vo #formSearch .filtre.filtre--more:hover {background: var(--TurquoiseDark);}
.body-vo #formSearch .filtre.filtre--case {background: #fff; color: #000;}
.body-vo #formSearch .filtre.filtre--case:hover {background: var(--TurquoiseDark); color: #fff;}
.body-vo #formSearch .liste-choix {/*width: 100%;*/ overflow: auto; padding: 0;}
.body-vo #formSearch .liste-choix .choix {display: inline-block; float: left; height: 37px; width: 54px; padding-top: 10px; cursor: pointer; }
/*.body-vo #formSearch .liste-choix .choix-ok, .body-vo #formSearch .liste-choix .choix:hover {background: var(--TurquoiseDark); color: #fff;}*/
.body-vo #formSearch .liste-choix .choix-1.choix-ok {box-shadow: 1px 0px 3px #555; background: url(../images/home/voiture-on.svg) center center no-repeat var(--TurquoiseDark); background-size: auto 24px;}
.body-vo #formSearch .liste-choix .choix-2.choix-ko {/*box-shadow: 1px 0px 3px #555; */background: url(../images/home/moto.svg) center center no-repeat #fff; background-size: auto 24px;}
.body-vo #formSearch .liste-choix .choix-2.choix-ok {/*box-shadow: 1px 0px 3px #555;*/ background: url(../images/home/moto-on.svg) center center no-repeat var(--TurquoiseDark); background-size: auto 24px;}
.body-vo #formSearch .liste-choix .choix-1.choix-ko {/*box-shadow: 1px 0px 3px #555; */background: url(../images/home/voiture.svg) center center no-repeat #fff; background-size: auto 24px;}
.body-vo #formSearch .liste-choix .choix-1.choix-ko:hover {background: url(../images/home/voiture-on.svg) center center no-repeat var(--TurquoiseDark); background-size: auto 24px;}
.body-vo #formSearch .liste-choix .choix-2.choix-ko:hover {background: url(../images/home/moto-on.svg) center center no-repeat var(--TurquoiseDark); background-size: auto 24px;}
/* Overlay masqué par défaut */
.body-vo #overlay {
background: #153542;
opacity: 0;
pointer-events: none; /* clics désactivés quand masqué */
position: fixed;
width: 100%;
height: 100%;
z-index: 99;
top: 0;
left: 0;
transition: opacity 0.3s ease; /* fondu */
}
/* Quand on ajoute .active */
.body-vo #overlay.active {
opacity: 0.75;
pointer-events: auto;
}
/* Panneau masqué (décalé à droite) */
.body-vo #panneau-lateral {
position: fixed;
width: 100%;
max-width: 480px;
top: 0;
right: 0;
height: 100%;
background-color: #fff;
z-index: 100;
transform: translateX(100%); /* hors de l’écran */
transition: transform 0.3s ease; /* glissement */
}
/* Quand actif : revient à sa place */
.body-vo #panneau-lateral.active {transform: translateX(0);}
.body-vo #panneau-lateral #panneau-zone {position: relative; height: 100%;}
.body-vo #panneau-lateral .panneau-header {height: 65px; padding: 20px; font-size: 19px; font-weight: 600; position: relative; border-bottom: solid 1px var(--TurquoiseDark);}
.body-vo #panneau-lateral .panneau-header .bt-fermer {position: absolute; top: 16px; right: 20px; background: url(../images/vo/croix-noire.svg) center center no-repeat; background-size: 100%; width: 30px; height: 30px;}
.body-vo #panneau-lateral .panneau-header .lien-retour {position: absolute; top: 22px; left: 20px; background: url(../images/vo/fleche-retour.svg) center center no-repeat; background-size: 100%; width: 22px; height: 22px;}
.body-vo #panneau-lateral .panneau-content {height: calc(100% - 130px); padding: 20px; overflow-y: auto;}
.body-vo #panneau-lateral .panneau-content .item {padding-bottom: 20px; margin-bottom: 20px; border-bottom: solid 1px #ccc; --bs-gutter-x: 15px}
.body-vo #panneau-lateral .panneau-content .item.item--niveau2 {border: none;}
.body-vo #panneau-lateral .panneau-content .item .item-titre {margin-bottom: 5px; color: var(--TurquoiseDark); font-weight: 600; padding-left: 26px; position: relative; padding-top: 2px; }
.body-vo #panneau-lateral .panneau-content .item .item-titre.item-titre-mb {margin-bottom: 12px;}
.body-vo #panneau-lateral .panneau-content .item .item-titre:before {content: ''; position: absolute; top: 2px; left: 0; width: 22px; height: 22px; }
.body-vo #panneau-lateral .panneau-content .item--prix .item-titre:before {background: url(../images/vo/filtre-prix.svg) center center no-repeat; background-size: 100%;}
.body-vo #panneau-lateral .panneau-content .item--marque .item-titre:before {background: url(../images/vo/filtre-marque.svg) center center no-repeat; background-size: 100%;}
.body-vo #panneau-lateral .panneau-content .item--modele .item-titre:before {background: url(../images/vo/filtre-modele.svg) center center no-repeat; background-size: 100%;}
.body-vo #panneau-lateral .panneau-content .item--boite .item-titre:before {background: url(../images/vo/filtre-boite.svg) center center no-repeat; background-size: 100%;}
.body-vo #panneau-lateral .panneau-content .item--kilometrage .item-titre:before {background: url(../images/vo/filtre-kilometrage.svg) center center no-repeat; background-size: 100%;}
.body-vo #panneau-lateral .panneau-content .item--carburant .item-titre:before {background: url(../images/vo/filtre-carburant.svg) center center no-repeat; background-size: 100%;}
.body-vo #panneau-lateral .panneau-content .item--energie .item-titre:before {background: url(../images/vo/filtre-energie.svg) center center no-repeat; background-size: 100%;}
.body-vo #panneau-lateral .panneau-content .item--id_tv .item-titre:before {background: url(../images/vo/filtre-id_tv.svg) center center no-repeat; background-size: 100%;}
.body-vo #panneau-lateral .panneau-content .item--tv-1 .item-titre:before {background: url(../images/vo/filtre-type-1.svg) center center no-repeat; background-size: 100%;}
.body-vo #panneau-lateral .panneau-content .item label {margin-bottom: 5px; font-size: 0.9em;}
.body-vo #panneau-lateral .panneau-content .item input, .body-vo #panneau-lateral .panneau-content .item .zone-choix {padding: 10px 10px; border: solid 1px #ced4da; border-radius: .25rem; position: relative;}
.body-vo #panneau-lateral .panneau-content .item .zone-choix {font-size: 0.9em; cursor: pointer;}
.body-vo #panneau-lateral .panneau-content .item .zone-choix:after {content: ''; position: absolute; top: 10px; right: 10px; background: url(../images/vo/fleche-choix.svg) center center no-repeat; background-size: 100%; width: 20px; height: 20px;}
.body-vo #panneau-lateral .panneau-content .item .input-with-suffix input {border-top-right-radius: 0; border-bottom-right-radius: 0;}
.body-vo #panneau-lateral .panneau-content .item .list-checkbox {
display: flex;
align-items: center; /* centre verticalement */
gap: 8px; margin-bottom: 10px;}
.body-vo #panneau-lateral .panneau-content .item .list-checkbox input {width: 20px; height: 20px; }
.body-vo #panneau-lateral .panneau-content .item .list-checkbox label {cursor: pointer; font-size: 1.05em;}
.body-vo #panneau-lateral .panneau-footer {height: 65px; padding: 20px; font-size: 16px; font-weight: 600; position: relative; border-top: solid 1px var(--TurquoiseDark);}
.body-vo #panneau-lateral .panneau-footer a, .body-vo #panneau-lateral .panneau-footer button {border-radius: 12px; padding: 8px 12px; font-weight: 600; text-decoration: none; border: solid 1px var(--TurquoiseDark);}
.body-vo #panneau-lateral .panneau-footer .bt-search {background: var(--TurquoiseDark); color: #fff;}
.body-vo #panneau-lateral .panneau-footer .bt-search:hover {background: var(--TurquoiseLight);}
.body-vo .section-resultats .select-ordre-affichage {appearance: none; /* masque la flèche par défaut */
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,");
background-repeat: no-repeat;
background-position: right 0.5rem center; /* ici tu choisis la distance */
background-size: 2rem;
padding-right: 2rem; /* pour que le texte ne chevauche pas la flèche */
font-size: 19px; border-radius: 11px; padding: 12px 17px; padding-right: 40px;
}
.body-vo .section-resultats .listing-vehicules {--bs-gutter-x: 0.25rem; --bs-gutter-y: 1.6rem;}
.body-vo .section-resultats .listing-vehicules .item-vehicule {/*width: 280px; *//*height: 205px;*/ margin-left: auto; margin-right: auto; display: block; width: 100%; max-width: 330px; position: relative; box-shadow: 1px 1px 8px #555; border-radius: 12px; background: #fff;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .item-img {display: block; aspect-ratio: 4/3; border-top-left-radius: 12px; border-top-right-radius: 12px; position: relative; border-bottom: solid 1px #999;}
/*
.body-vo .section-resultats .listing-vehicules .item-vehicule .item-img .bandeau {position: absolute; bottom: 0; width: 100%; height: 32px; color: #fff; font-style: italic; text-align: center; background: linear-gradient(to right, var(--TurquoiseLight), var(--Turquoise)); padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1;}*/
.body-vo .section-resultats .listing-vehicules .item-vehicule .bandeau {height: 32px; color: #fff; font-style: italic; text-align: center; background: linear-gradient(to right, var(--TurquoiseLight), var(--Turquoise)); padding: 0 10px; /* petit padding horizontal */
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1;}
.body-vo .section-resultats .listing-vehicules .item-vehicule a:hover .carousel-bloc-layer {opacity: 1; background: url(../images/home/carousel-realisations/degrade.png) bottom repeat-x;}
.body-vo .section-resultats .listing-vehicules .item-vehicule a .carousel-bloc-layer.current {opacity: 1; }
.body-vo .section-resultats .listing-vehicules .item-vehicule .item-content {padding: 15px; padding-left: 0;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .item-content .row {margin-left: 0; margin-right: 0;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .item-content .row > div {padding-left: 0; padding-right: 0;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .prix-infos {padding-left: 15px; margin-bottom: 15px;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .infos-modele {padding: 10px 15px; border-top-right-radius: 12px; border-bottom-right-radius: 12px;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .modele1 {font-weight: 900; text-transform: uppercase; color: var(--TurquoiseDark); font-size: 1.08em;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .prix {font-weight: 900; font-family: "Funnel Display", sans-serif; text-transform: uppercase; color: var(--TurquoiseDark); font-size: 1.67em;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .mensualites {font-weight: 700; font-size: 1.12em; line-height: 1.1;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .a-partir-de {font-weight: 400; font-size: 0.7em; line-height: 1; margin-top: 4px;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .premier-loyer {font-size: 0.7em;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .caracteristique {position: relative; padding-left: 28px; font-size: 0.88em; margin-bottom: 2px;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .caracteristique:before {content:''; position: absolute; top:0; left:0; width: 22px; height: 18px; }
.body-vo .section-resultats .listing-vehicules .item-vehicule .caracteristique-date:before {background: url(../images/vehicule/icone-date.svg) center center no-repeat; background-size: 100%;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .caracteristique-km:before {background: url(../images/vehicule/icone-km.svg) center center no-repeat; background-size: 100%;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .caracteristique-moteur:before {background: url(../images/vehicule/icone-moteur.svg) center center no-repeat; background-size: 100%;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .caracteristique-boite:before {background: url(../images/vehicule/icone-boite.svg) center center no-repeat; background-size: 100%;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .item-footer {margin: 0 18px; padding: 15px 8px; margin-top: 12px; font-size: 0.8em; font-weight: 600; text-transform: uppercase; border-top: solid 1px #AAA;}
.body-vo .section-resultats .listing-vehicules .item-publicite {height: 100%; background: url(../images/vo/pub-tmp.jpg) center center no-repeat; background-size: cover; aspect-ratio: 308/539;}
@media (min-width: 768px) {
.body-vo .section-resultats .listing-vehicules .item-vehicule {width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; display: inline-block;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .item-content {height: 200px;}
.body-vo .section-resultats .listing-vehicules .item-publicite { aspect-ratio: inherit;}
}
@media (min-width: 992px) {
.body-vo .section-resultats .listing-vehicules .item-vehicule {width: 100%; margin-left: auto; margin-right: auto; display: block; max-width: 400px;}
.body-vo .section-resultats .listing-vehicules { --bs-gutter-y: 3.7rem;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .item-content {height: 180px;}
}
@media (min-width: 1200px) and (max-width: 1499.99px) {
.body-vo .section-resultats .listing-vehicules .item-vehicule .infos-tarif {padding-left: 0; padding-right: 5px;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .infos-tarif .premier-loyer {font-size: 0.66em;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .a-partir-de {font-size: 0.66em;}
}
@media (min-width: 1200px) {
.body-vo .section-resultats .listing-vehicules .item-vehicule {width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; display: inline-block; max-width: 330px;}
.body-vo .section-resultats .listing-vehicules { --bs-gutter-y: 2.3rem;}
.body-vo .section-resultats .listing-vehicules .item-vehicule .item-content {height: 200px;}
}
@media (min-width: 1500px) {
.body-vo .section-resultats .listing-vehicules { --bs-gutter-y: 1.6rem;}
}
.body-vo .pagination {color: #AAA; font-size: 1.2em;}
.body-vo .pagination a {padding: 0 10px; color: #AAA; text-decoration: none;}
.body-vo .pagination a.current {font-weight: 500; color: #000;}
.body-vo .pagination a.gauche {padding-right: 25px;}
.body-vo .pagination a.droite {padding-left: 25px;}
/* ********************************* FICHE VEHICULE */
.body-vehicule .section-partager a {position: relative; text-decoration: none; color: var(--GrisBleute); font-weight: 500; padding-left: 31px;}
.body-vehicule .section-partager a:before {content: ''; background: url(../images/vehicule/icone-partager.svg) center center no-repeat; background-size: 100%; width: 26px; height: 21px; top: 3px; left: 0; position: absolute;}
#slider-vehicule {
position: relative; /* <--- important pour que les flèches soient à l'intérieur */
}
#slider-vehicule .slides li {
position: relative;
}
#slider-vehicule .slide-bg {
width: 100%;
/* height: 500px; *//* hauteur fixe */
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
border-top-left-radius: 8px; border-top-right-radius: 8px;
}
/* Carousel wrapper (contient flèches + thumbnails) */
#carousel-wrapper-vehicule {
position: relative;
display: flex;
align-items: center; background: #f4f4f7;
padding: 15px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
/* Flexslider thumbnails */
#carousel-thumbs {
flex: 1;
margin: 0 35px; /* laisse la place aux flèches */
}
#carousel-thumbs .slides li {
position: relative;
}
#carousel-thumbs .thumb-bg {
width: 100%;
/*height: 80px;*/
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
border-radius: 4px;
}
/* Boutons prev/next */
.carousel-prev,
.carousel-next {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
/* background supprimé, plus de rond semi-transparent */
border-radius: 50%;
text-decoration: none;
cursor: pointer;
z-index: 10;
/* on peut garder la transition pour le fill du SVG */
transition: all 0.2s ease;
}
.carousel-next svg {
transform: rotate(180deg);
}
/* supprime l'ancien hover qui change le background */
.carousel-prev:hover,
.carousel-next:hover {
background: none;
}
.carousel-prev svg .arrow,
.carousel-next svg .arrow {
fill: var(--GrisBleute); /* couleur normale */
transition: fill 0.2s ease;
}
.carousel-prev:hover svg .arrow,
.carousel-next:hover svg .arrow {
fill: #666688; /* couleur plus foncée au survol */
}
.carousel-prev svg,
.carousel-next svg {
width: 20px;
height: 20px;
}
/* Positionnement des flèches */
.carousel-prev {
left: 0;
}
.carousel-next {
right: 0;
}
#carousel-thumbs .thumb-bg {
position: relative;
cursor: pointer;
}
#carousel-thumbs .thumb-bg::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(255,255,255,0.4);
border-radius: 4px;
transition: background 0.3s ease;
}
/* vignette active → pas de voile */
#carousel-thumbs .flex-active-slide .thumb-bg::after {
background: transparent;
}
/* curseur "main" */
#carousel-thumbs .thumb-bg {
cursor: pointer;
}
#carousel-thumbs .thumb-bg {
cursor: pointer;
}
/* Caption sur la photo principale */
.slide-caption {
position: absolute;
font-weight: 400; font-family: "Funnel Display", sans-serif; font-size: 1em;
bottom: 12px; /* espace par rapport au bas */
left: 12px; /* espace par rapport à gauche */
color: white;
text-shadow: 0 2px 4px rgba(0,0,0,0.6); /* pour lisibilité sur fonds clairs */
pointer-events: none; /* le texte ne bloque pas le clic sur la slide */
text-transform: uppercase;
}
/* Flèches du slider principal */
.slider-prev,
.slider-next {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
text-decoration: none;
cursor: pointer;
z-index: 20;
transition: all 0.2s ease;
}
.slider-prev svg,
.slider-next svg {
width: 50px;
height: 50px;
}
.slider-next svg {
transform: rotate(180deg);
}
.slider-prev svg .arrow,
.slider-next svg .arrow {
fill: #ccc;
transition: fill 0.2s ease;
}
.slider-prev:hover svg .arrow,
.slider-next:hover svg .arrow {
fill: #fff;
}
.slider-prev {
left: 12px;
}
.slider-next {
right: 12px;
}
.body-vehicule .bloc {border: 1px solid var(--GrisBleute); border-radius: 12px; padding: 1em;}
.body-vehicule .bloc .bloc-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding-bottom: 1em; border-bottom :solid 1px var(--GrisBleute); margin-bottom: 1em; text-transform: uppercase; color: var(--Turquoise); font-weight: 700; font-family: "Funnel Display", sans-serif;
}
.body-vehicule .bloc .bloc-content { overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; max-height: 3000px; /* valeur max pour l’animation */}
.body-vehicule .bloc .bloc-content.collapsed { max-height: 0;}
.body-vehicule .bloc .toggle-arrow { transition: transform 0.3s ease; transform: rotate(90deg); fill: var(--GrisBleute);}
.body-vehicule .bloc .toggle-arrow.down {transform: rotate(270deg); }
.body-vehicule .bloc .caracteristique {padding-left: 32px; position: relative; padding-bottom: 10px; font-size: 0.88em; line-height: 1.2;}
.body-vehicule .bloc .caracteristique .titre {color: var(--GrisBleute); font-weight: 500; margin-bottom: 2px;}
.body-vehicule .bloc-points-forts ul {
display: flex;
flex-wrap: wrap; /* permet de passer à la ligne si trop d'éléments */
justify-content: flex-start; /* centre les éléments horizontalement */
gap: 5px; /* espace entre les items */
padding: 0;
margin: 0;
list-style: none;
}
.body-vehicule .bloc-points-forts li {
display: flex;
flex-direction: column; /* icone au-dessus du texte */
align-items: center;
width: 100px; /* largeur fixe si tu veux garder la taille des blocs */
font-size: 0.8em;
line-height: 1.1;
margin-bottom: 5px; margin-top: 5px;
}
.body-vehicule .bloc-points-forts li .icone {
width: 55px;
height: 55px;
border-radius: 50%;
margin-bottom: 5px;
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
/* Bloc équipement - Masonry style */
.body-vehicule .bloc-equipement ul {
list-style: disc; /* conserve les puces */
padding-left: 20px; /* espace pour les puces */
margin: 0;
column-count: 2; /* nombre de colonnes sur desktop */
column-gap: 20px; /* espace horizontal entre colonnes */
}
.body-vehicule .bloc-equipement .titre2 {font-weight: 500; margin-bottom: 5px;}
.body-vehicule .bloc-equipement ul {margin-bottom: 2em;}
.body-vehicule .bloc-equipement li {
display: block;
width: 100%;
margin-bottom: 10px;
word-wrap: break-word;
font-size: 0.88em;
line-height: 1.2;
padding-left: 15px; /* espace pour la puce */
position: relative;
list-style: none; /* on enlève la puce native */
}
.body-vehicule .bloc-equipement li::before {
content: '•'; /* puce */
position: absolute;
left: 0;
top: 0;
color: #000; /* couleur de la puce */
font-size: 1em;
line-height: 1.2;
}
/* Responsive : une seule colonne sur petit écran */
@media screen and (max-width: 480px) {
.body-vehicule .bloc-equipement ul {
column-count: 1;
padding-left: 20px;
column-gap: 0;
}
.body-vehicule .bloc-equipement li {
margin-bottom: 8px;
}
}
.body-vehicule .bloc-infos {border: 1px solid var(--GrisBleute); border-radius: 12px; }
.body-vehicule .bloc-infos .header-bloc {padding: 1em; background: #f4f4f7; border-top-left-radius: 12px;border-top-right-radius: 12px;}
.body-vehicule .bloc-infos .header-bloc .titre1 {color: var(--TurquoiseDark); font-weight: 900; font-size: 1.5em;}
.body-vehicule .bloc-infos .content-bloc {padding: 1em; border-bottom-left-radius: 12px;border-bottom-right-radius: 12px;}
.body-vehicule .bloc-infos .content-bloc .carac-principales {padding-bottom: 1em; margin-bottom: 1em; border-bottom: 1px solid var(--GrisBleute);}
.body-vehicule .bloc-infos .content-bloc .carac-principales .caracteristique {position: relative; padding-left: 28px; font-size: 0.88em; margin-bottom: 2px;}
.body-vehicule .bloc-infos .content-bloc .carac-principales .caracteristique:before {content:''; position: absolute; top:0; left:0; width: 22px; height: 18px; }
.body-vehicule .bloc-infos .content-bloc .carac-principales .caracteristique-date:before {background: url(../images/vehicule/icone-date.svg) center center no-repeat; background-size: 100%;}
.body-vehicule .bloc-infos .content-bloc .carac-principales .caracteristique-km:before {background: url(../images/vehicule/icone-km.svg) center center no-repeat; background-size: 100%;}
.body-vehicule .bloc-infos .content-bloc .carac-principales .caracteristique-moteur:before {background: url(../images/vehicule/icone-moteur.svg) center center no-repeat; background-size: 100%;}
.body-vehicule .bloc-infos .content-bloc .carac-principales .caracteristique-boite:before {background: url(../images/vehicule/icone-boite.svg) center center no-repeat; background-size: 100%;}
.body-vehicule .bloc-infos .content-bloc .infos2 .concession {font-weight: 700; font-family: "Funnel Display", sans-serif; text-transform: uppercase;}
.body-vehicule .bloc-infos .content-bloc .infos2 .adresse {margin-top: 14px; margin-bottom: 8px; padding-left: 23px; position: relative; }
.body-vehicule .bloc-infos .content-bloc .infos2 .adresse:before {position: absolute; content: ''; background: url(../images/vehicule/icone-adresse.svg) left top no-repeat; background-size: 100%; top: 5px; left: 0; width: 13px; height: 25px;}
.body-vehicule .bloc-infos .content-bloc .infos2 .telephone {padding-left: 23px; position: relative; }
.body-vehicule .bloc-infos .content-bloc .infos2 .telephone:before {position: absolute; content: ''; background: url(../images/vehicule/icone-telephone.svg) left top no-repeat; background-size: 100%; top: 5px; left: 0; width: 14px; height: 22px;}
.body-vehicule .bloc-infos .content-bloc .infos2 .telephone a {text-decoration: none;}
/*.body-vehicule .mini-bloc .mini-header {border-top-left-radius: 12px; border-top-right-radius: 12px; background: linear-gradient(to right, var(--TurquoiseLight), var(--Turquoise)); color: #fff; font-weight: 500; padding: 8px; text-align: center;}*/
.body-vehicule .mini-bloc .mini-header {
display: flex; /* active flex */
align-items: center; /* centre verticalement */
justify-content: center; /* centre horizontalement */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background: linear-gradient(to right, var(--TurquoiseLight), var(--Turquoise));
color: #fff;
font-weight: 500;
padding: 5px;
position: relative; /* si besoin pour pseudo-éléments */
}
.body-vehicule .mini-bloc-livraison .mini-header::before {
content: '';
display: inline-block;
width: 16px; /* largeur icône */
height: 16px; /* hauteur icône */
margin-right: 6px; /* espace entre icône et texte */
background: url('../images/vehicule/bg-livraison.svg') no-repeat center center;
background-size: contain; /* s’adapte à la taille */
}
.body-vehicule .mini-bloc .mini-content {text-align: center; padding: 8px; background: #f4f4f7; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; font-size: 0.93em;}
.body-vehicule .mini-bloc.mini-bloc-livraison .mini-content {font-weight: 700; color: var(--TurquoiseDark);}
.body-vehicule .vehicule-prix {border-radius: 12px; background: #f4f4f7; padding: 12px; text-align: center;}
.body-vehicule .vehicule-prix .montant {color: var(--TurquoiseDark); font-weight: 900; font-family: "Funnel Display", sans-serif; font-size: 1.75em;}
.body-vehicule .vehicule-prix .financement {color: var(--TurquoiseDark); font-size: 1.35em; font-weight: 400;}
.body-vehicule .vehicule-prix .financement span {font-size: 0.7em;}
.body-vehicule .zone-boutons .btn {width: 100%;}
.body-vehicule .zone-boutons .btn-contact {border: solid 1px var(--Turquoise); background: none; color: var(--TurquoiseDark);}
.body-vehicule .zone-boutons .btn-contact:hover {background: var(--Turquoise); color: #fff;}
/* Style pour le badge CO2 */
.co2-badge {
display: inline-flex;
align-items: center;
gap: 0; /* pas d'espace entre carré et flèche (la flèche est collée) */
line-height: 0; /* évite décalages avec inline-svg */
vertical-align: middle;
font-family: inherit;
}
.co2-badge__square {
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
user-select: none;
}
.co2-badge__letter {
font-size: 0.65em; /* taille relative à la taille du carré */
line-height: 1;
display: inline-block;
transform: translateY(1%); /* centrage visuel fin */
}
.co2-badge__arrow {
display: inline-block;
line-height: 0;
}
/* ********************************* ALERTE EMAIL */
.bloc-alerte-email {background: url(../images/bg-bloc-alerte-email.jpg) center left no-repeat; background-size: cover; color: #000; }
.bloc-alerte-email > .row {justify-content: center;}
.bloc-alerte-email .btn {padding-left: 3.3em; padding-right: 1.2em; position: relative;}
.bloc-alerte-email .btn:before {content: ''; position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; background: url(../images/icone-alerte-email.svg) center center no-repeat ; background-size: 100%;}
.bloc-alerte-email .btn:hover:before {background: url(../images/icone-alerte-email-hover.svg) center center no-repeat ; background-size: 100%;}
@media (min-width: 992px) {
.bloc-alerte-email h1 {text-align: left; border-left: solid 9px #000; padding-left: 20px;}
.bloc-alerte-email > .row {justify-content: start;}
}
@media (min-width: 1500px) {
.bloc-alerte-email {background: url(../images/bg-bloc-alerte-email.jpg) center right no-repeat;}
}
/* ******************************* LE GROUPE */
.body-groupe .bandeau-header {background: url(../images/groupe-histoire/header.jpg) center center no-repeat; background-size: cover;}
.body-groupe .h1 {text-align: left; border-left: solid 12px #000; padding-left: 0.85em;}
.section-groupe-famille {font-weight: 300;}
.section-groupe-famille .legende ul {margin-top: 6px;}
.section-frise .timeline-zone {width: 100%; overflow: auto; height: 700px;}
.section-frise .timeline-zone .timeline {float: left; width: 110px; margin-right: 0px; height: 100%; position: relative; }
.section-frise .timeline-zone .timeline .barre {height: 100%; position: relative; margin: 0 auto; width: 12px; border-radius: 15px; background: linear-gradient(to bottom, var(--TurquoiseDark), var(--TurquoiseLight));}
.section-frise .timeline-zone .timeline .point {background: #fff; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; margin-left: 1px; cursor: pointer;}
.section-frise .timeline-zone .timeline .point-active {width: 35px; height: 35px; border-radius: 0; background: url(../images/groupe-histoire/frise-curseur-active.svg) center center no-repeat; background-size: cover; margin-left: -12px; margin-top: -8px;}
.section-frise .timeline-zone .timeline .date {font-size: 0.8em; color: var(--TurquoiseDark); font-weight: 700; cursor: pointer;}
.section-frise .timeline-zone .timeline .date-active {font-size: 0.92em;}
/*.section-frise .timeline-zone .timeline .pc-5 {position: absolute; top: 5%;}
.section-frise .timeline-zone .timeline .pc-10 {position: absolute; top: 10%;}
.section-frise .timeline-zone .timeline .pc-15 {position: absolute; top: 15%;}
.section-frise .timeline-zone .timeline .pc-20 {position: absolute; top: 20%;}
.section-frise .timeline-zone .timeline .pc-25 {position: absolute; top: 25%;}
.section-frise .timeline-zone .timeline .pc-30 {position: absolute; top: 30%;}
.section-frise .timeline-zone .timeline .pc-35 {position: absolute; top: 35%;}
.section-frise .timeline-zone .timeline .pc-40 {position: absolute; top: 40%;}
.section-frise .timeline-zone .timeline .pc-45 {position: absolute; top: 45%;}
.section-frise .timeline-zone .timeline .pc-50 {position: absolute; top: 50%;}
.section-frise .timeline-zone .timeline .pc-55 {position: absolute; top: 55%;}
.section-frise .timeline-zone .timeline .pc-60 {position: absolute; top: 60%;}
.section-frise .timeline-zone .timeline .pc-65 {position: absolute; top: 65%;}
.section-frise .timeline-zone .timeline .pc-70 {position: absolute; top: 70%;}
.section-frise .timeline-zone .timeline .pc-75 {position: absolute; top: 75%;}
.section-frise .timeline-zone .timeline .pc-80 {position: absolute; top: 80%;}
.section-frise .timeline-zone .timeline .pc-85 {position: absolute; top: 85%;}
.section-frise .timeline-zone .timeline .pc-90 {position: absolute; top: 90%;}
.section-frise .timeline-zone .timeline .pc-95 {position: absolute; top: 95%;}*/
.section-frise .timeline-zone .detail {float: left; width: calc(100% - 90px); height: 100%; text-align: center; margin-left: -20px;}
.section-frise .timeline-zone .detail-item .titre {color: var(--TurquoiseDark); font-size: 1.6em; width: 210px; margin: 0 auto; padding-bottom: 12px; border-bottom: solid 2px var(--Turquoise); font-weight: 700; margin-bottom: 30px;}
.section-frise .timeline-zone .detail-item .accroche {font-weight: 700;}
.section-frise .timeline-zone .detail-item .texte {font-weight: 300;}
@media (min-width: 992px) {
.section-frise .timeline-zone {height: auto; margin-top: -35px;}
.section-frise .timeline-zone .timeline {float: none; margin: 0; height: auto; width: 100%; padding-top: 100px;}
.section-frise .timeline-zone .detail {float: none; position: relative; margin: 0; height: auto; width: 100%; margin-top: 40px;}
.section-frise .timeline-zone .timeline .barre {height: 14px; width: 100%; border-radius: 15px; background: linear-gradient(to right, var(--TurquoiseDark), var(--TurquoiseLight)); }
.section-frise .timeline-zone .timeline .legende-barre {position: absolute; top: 15px; left: 0; width: 100%; height: 30px;}
.section-frise .timeline-zone .timeline .point {margin-top: 2px; margin-left: 10px;}
.section-frise .timeline-zone .timeline .point-active {margin-left: -2px; margin-top: -8px;}
.section-frise .timeline-zone .timeline .date {padding-top: 60px;}
.section-frise .timeline-zone .timeline .date-active {width: 65px; height: 80px; border-radius: 0; background: url(../images/groupe-histoire/frise-date-active.svg) top center no-repeat; background-size: 100%; margin-left: -17px; margin-top: 0px; padding-top: 23px; text-align: center;}
/*.section-frise .timeline-zone .timeline .pc-5 {position: absolute; top: 0; left: 5%;}
.section-frise .timeline-zone .timeline .pc-10 {position: absolute; top: 0; left: 10%;}
.section-frise .timeline-zone .timeline .pc-15 {position: absolute; top: 0; left: 15%;}
.section-frise .timeline-zone .timeline .pc-20 {position: absolute; top: 0; left: 20%;}
.section-frise .timeline-zone .timeline .pc-25 {position: absolute; top: 0; left: 35%;}
.section-frise .timeline-zone .timeline .pc-30 {position: absolute; top: 0; left: 30%;}
.section-frise .timeline-zone .timeline .pc-35 {position: absolute; top: 0; left: 35%;}
.section-frise .timeline-zone .timeline .pc-45 {position: absolute; top: 0; left: 40%;}
.section-frise .timeline-zone .timeline .pc-45 {position: absolute; top: 0; left: 45%;}
.section-frise .timeline-zone .timeline .pc-50 {position: absolute; top: 0; left: 50%;}
.section-frise .timeline-zone .timeline .pc-55 {position: absolute; top: 0; left: 55%;}
.section-frise .timeline-zone .timeline .pc-60 {position: absolute; top: 0; left: 60%;}
.section-frise .timeline-zone .timeline .pc-65 {position: absolute; top: 0; left: 65%;}
.section-frise .timeline-zone .timeline .pc-70 {position: absolute; top: 0; left: 70%;}
.section-frise .timeline-zone .timeline .pc-75 {position: absolute; top: 0; left: 75%;}
.section-frise .timeline-zone .timeline .pc-80 {position: absolute; top: 0; left: 80%;}
.section-frise .timeline-zone .timeline .pc-85 {position: absolute; top: 0; left: 85%;}
.section-frise .timeline-zone .timeline .pc-90 {position: absolute; top: 0; left: 90%;}
.section-frise .timeline-zone .timeline .pc-95 {position: absolute; top: 0; left: 95%;}*/
}
.section-paves {font-weight: 300;}
.section-paves h3 {font-weight: 700; font-family: "Funnel Display", sans-serif; font-size: 1.55em; color: var(--TurquoiseDark); padding-left: 12px; border-left: solid 6px var(--TurquoiseDark);}
.section-paves .ligne1 .bg-image {background: url(../images/groupe-histoire/pave1.jpg) center center no-repeat; background-size: cover; aspect-ratio: 1.66;}
.section-paves .ligne2 .bg-image {background: url(../images/groupe-histoire/pave2.jpg) center center no-repeat; background-size: cover; aspect-ratio: 1.66;}
.section-paves .ligne3 .bg-image {background: url(../images/groupe-histoire/pave3.jpg) center center no-repeat; background-size: cover; aspect-ratio: 1.66;}
@media (min-width: 992px) {
.section-paves .ligne1 .bg-image {aspect-ratio: inherit;}
.section-paves .ligne2 .bg-image {aspect-ratio: inherit;}
.section-paves .ligne3 .bg-image {aspect-ratio: inherit;}
}
.section-confiance .titre {font-weight: 700; font-family: "Funnel Display", sans-serif; font-size: 1.55em; }
/* ******************************* RSE */
.body-rse .bandeau-header {background: url(../images/groupe-rse/header.jpg) center center no-repeat; background-size: cover;}
.body-rse .h1 {text-align: left; border-left: solid 12px #000; padding-left: 0.85em;}
.body-rse h3 {font-weight: 700; font-family: "Funnel Display", sans-serif; font-size: 1.55em; color: var(--TurquoiseDark); padding-left: 12px; border-left: solid 6px var(--TurquoiseDark);}
.engagement-item {padding-left: 35px; position: relative;}
.engagement-item:before {position: absolute; content: ''; width: 25px; height: 20px; top: 5px; left: 0; background: url(../images/groupe-rse/puce.svg) top left no-repeat; background-size: 100%;}
.engagement-item .titre {font-weight: 800; font-family: "Funnel Display", sans-serif; font-size: 1.15em; margin-bottom: 0px;}
.engagement-item .texte {font-weight: 300;}
/* CAROUSEL CERTIFICATS */
#carousel-certificats {width: 100%;margin-left: auto; margin-right: auto; position: relative;}
#carousel-certificats li {/*padding: 20px;*/}
.listing-certificats img {box-shadow: 1px 1px 15px #ababab; border-radius: 12px; max-width: 100%;}
@media (min-width: 660px) {
#carousel-certificats {width: 600px;}
.listing-certificats img {max-width: 450px;}
}
/* carousel */
.listing-certificats .flex-direction-nav {bottom: 0; margin-bottom: -15px; height: 0; position: absolute; left: 0; right: 0; z-index: 80;}
.listing-certificats .flex-direction-nav li {display: inline-block; zoom: 1; *display: inline; position: relative;}
.listing-certificats .flex-direction-nav .flex-disabled {opacity: 0!important; filter:alpha(opacity=0); cursor: default;z-index: -1;}
.listing-certificats .flex-direction-nav .flex-nav-prev {float: left;margin-left: 0px;}
.listing-certificats .flex-direction-nav .flex-nav-next {float: right;margin-right: 0px;}
.listing-certificats .flex-direction-nav a {font-size: 0; position: absolute;text-decoration: none !important; display: block; z-index: 10; overflow: hidden; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.listing-certificats .flex-direction-nav .flex-nav-next a {right: 0;}
.listing-certificats .flex-direction-nav a:before {content: ""; display: inline-block; width: 46px; height: 26px; background: url(../images/carousel-left.svg) center center no-repeat;;}
.listing-certificats .flex-direction-nav a.flex-next:before {background: url(../images/carousel-right.svg) center center no-repeat;}
.listing-certificats .flex-control-paging {bottom:0; margin-bottom: -50px;}
.listing-certificats .flex-control-paging li a {border: solid 1px var(--GrisBleute); opacity: 1;}
.listing-certificats .flex-control-paging li a.flex-active {background: var(--GrisBleute);}
@media (min-width: 480px) {
.listing-certificats .flex-direction-nav {top: 50%; bottom: inherit; margin-bottom: inherit; margin-top: -30px; left: 0; right: 0; }
.listing-certificats .flex-direction-nav a:before {width: 60px; height: 60px;}
.listing-certificats .flex-direction-nav .flex-nav-prev {float: left;margin-left: -25px;}
.listing-certificats .flex-direction-nav .flex-nav-next {float: right;margin-right: -15px;}
}
@media (min-width: 768px) {
.listing-certificats .item-certificat {margin-left: 30px; margin-right: 30px; display: inline-block; width: calc(100% - 60px);}
/*.listing-certificats .flex-direction-nav .flex-nav-prev {margin-left: -70px;}
.listing-certificats .flex-direction-nav .flex-nav-next {margin-right: -70px;}*/
}
.section-paves-pleine-page {font-weight: 300; }
.section-paves-pleine-page > .row {margin-left: 0; margin-right: 0;}
.section-paves-pleine-page h3 {font-weight: 700; font-family: "Funnel Display", sans-serif; font-size: 1.55em; color: var(--TurquoiseDark); padding-left: 12px; border-left: solid 6px var(--TurquoiseDark);}
.section-paves-pleine-page #ligne1 .bg-image {background: url(../images/groupe-rse/social2.jpg) center right no-repeat; background-size: cover; aspect-ratio: 1.66;}
.section-paves-pleine-page #ligne2 .bg-image {background: url(../images/groupe-rse/economique.jpg) center center no-repeat; background-size: cover; aspect-ratio: 1.66;}
.section-paves-pleine-page #ligne3 .bg-image {background: url(../images/groupe-rse/relations.jpg) center center no-repeat; background-size: cover; aspect-ratio: 1.66;}
.section-paves-pleine-page #ligne4 .bg-image {background: url(../images/groupe-rse/passion.jpg) center center no-repeat; background-size: cover; aspect-ratio: 1.66;}
.section-paves-pleine-page #ligne5 .bg-image {background: url(../images/groupe-rse/fidelite.jpg) center center no-repeat; background-size: cover; aspect-ratio: 1.66;}
@media (min-width: 992px) {
.section-paves-pleine-page .ligne1 .bg-image {aspect-ratio: inherit;}
.section-paves-pleine-page .ligne2 .bg-image {aspect-ratio: inherit;}
.section-paves-pleine-page .ligne1 .bloc-texte {float: right; max-width: 500px;}
.section-paves-pleine-page .ligne2 .bloc-texte {max-width: 550px; margin-left: 50px;}
}
@media (min-width: 1500px) {
.section-paves-pleine-page .ligne1 .bloc-texte {margin-right: 150px;}
}
/* ******************************* CONCESSIONS */
.body-concessions .bandeau-header {background: url(../images/concessions/header.jpg) center center no-repeat; background-size: cover;}
.section-concessions-detail .item-marque {display: inline-block; width: 70px; height: 70px; margin: 0 5px; position: relative; box-shadow: 1px 1px 15px #ababab; border-radius: 12px; background: #fff; cursor: pointer;}
.section-concessions-detail .item-marque:hover {box-shadow: none;}
.section-concessions-detail #map {height: calc(100% - 1em); min-height: 450px; width: 100%; border-radius: 12px;}
@media (min-width: 768px) {
.section-concessions-detail .item-marque {width: 90px; height: 90px; margin: 0 5px;}
.section-concessions-detail .choix {border-bottom: solid 1px #c0c0c0;}
}
@media (min-width: 992px) {
.section-concessions-detail .item-marque {width: 120px; height: 120px; margin: 0 10px;}
}
@media (min-width: 1200px) {
.section-concessions-detail .item-marque {margin: 0 20px;}
}
.item-concession {border: solid 1px #c0c0c0; border-radius: 12px;}
.item-concession .item-header {border-top-left-radius: 12px; border-top-right-radius: 12px; background: #f4f4f7; padding: 20px; font-weight: 700; text-transform: uppercase;}
.item-concession.active .item-header {background: var(--Turquoise); color: #fff;}
.item-concession .item-header img {height: 36px; margin-right: 10px;}
.item-concession .item-body {padding: 20px;}
.item-concession .item-adresse {padding-left: 28px; position: relative; padding-top: 3px; padding-bottom: 3px;}
.item-concession .item-adresse:before {position: absolute; content:''; top: 4px; left: 0; width: 15px; height: 24px; background: url(../images/concessions/marker2.svg) center left no-repeat; background-size: 100%;}
.item-concession .item-telephone {padding-left: 28px; position: relative; padding-top: 3px; padding-bottom: 1px; color: var(--Turquoise);}
.item-concession .item-telephone a {text-decoration: none;}
.item-concession .item-telephone:before {position: absolute; content:''; top: 4px; left: 0; width: 15px; height: 24px; background: url(../images/concessions/telephone.svg) center left no-repeat; background-size: 100%;}
.item-concession .item-email {padding-left: 28px; position: relative; padding-top: 0px; padding-bottom: 0px; color: var(--Turquoise);}
.item-concession .item-email a {text-decoration: underline;}
.item-concession .item-email:before {position: absolute; content:''; top: 2px; left: 0; width: 17px; height: 24px; background: url(../images/concessions/mail.svg) center left no-repeat; background-size: 100%;}
.item-concession .btn {padding: 0.7em 1.7em;}
/* ******************************* ACTUALITES */
.body-actualites .bandeau-header {background: url(../images/actualites/header-2026.jpg) center center no-repeat; background-size: cover;}
.body-actualites .listing-actualites .row {--bs-gutter-x: 0.5rem;}
/* ******************************* ACTUALITE */
.body-actualite .actu-detail .photo img {border-radius: 25px;}
.body-actualite .h1 {text-align: left; border-left: solid 12px #000; padding-left: 0.85em;}
.body-actualite .actu-detail .accroche {font-weight: 600;}
.body-actualite .actu-detail .date {
color: #999999;
font-size: 0.95em;
font-weight: 600;
padding: 2px 0;
padding-left: 25px;
background: url(../images/actu-date.svg) center left no-repeat;
background-size: 20px;
margin-bottom: 12px;
}
.body-actualite .actu-detail .texte {line-height: 1.53; font-weight: 300;}
.body-actualite .actu-detail .texte h2 {text-align: left; font-weight: 700;
font-family: "Funnel Display", sans-serif;
text-transform: uppercase; margin-bottom: 0.1em; margin-top: 1.2em;}
.body-actualite .actu-detail .texte .btn {margin-right: 15px;}
/* ******************************* ESTIMATION */
.body-estimation .bandeau-header {background: url(../images/estimation/header.jpg) center center no-repeat; background-size: cover;}
.body-estimation .h1 {text-align: left; border-left: solid 12px #000; padding-left: 0.85em;}
.body-estimation .texte {font-weight: 300;}
.body-estimation .strong {font-weight: 700;}
.body-estimation .h1-sans {border: 0; padding-left: 0; margin-bottom: 0;}
.body-estimation .obli {text-align: center; font-weight: 300; color: var(--GrisBleute); font-style: italic;}
.body-estimation .etoile {color: #ff0000; font-style: normal;}
.body-estimation form label {display: block; margin-bottom: 4px; font-weight: 500; font-size: 0.94em;}
.body-estimation form input[type="text"], .body-estimation form input[type="email"], .body-estimation form input[type="date"] {width: 100%; background: #f4f4f7; border-radius: 8px; padding: 12px 20px; border: none;}
.body-estimation form select {width: 100%; background: #f4f4f7; border-radius: 8px; padding: 12px 20px; border: none; appearance: none; /* masque la flèche par défaut */
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.5rem center; /* ici tu choisis la distance */
background-size: 1.5rem;
padding-right: 40px;}
.body-estimation textarea {width: 100%; background: #f4f4f7; border-radius: 8px; padding: 12px 20px; border: none; height: 190px;}
.body-estimation .zones-pj {width: 100%; background: #f4f4f7; border-radius: 8px; padding: 12px 20px; border: none;}
/* ******************************* CONTACT */
.main-contact {}
/*.form-contact {padding-top: 290px;}*/
.form-contact form {
position: relative;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 20px;
/*box-shadow: 1px 1px 12px #555;*/
border: solid 1px #fff;
border-radius: 12px;
overflow: hidden; /* pour que le fond flou respecte les bords arrondis */
z-index: 1; /* assure que le contenu reste au-dessus du pseudo-élément */
}
/* le fond flouté et semi-transparent */
.form-contact form::before {
content: "";
position: absolute;
inset: 0;
background: rgba(244, 244, 247, 0.8); /* gris 80% d’opacité */
backdrop-filter: blur(8px); /* flou de ce qu’il y a derrière */
z-index: -1; /* derrière les champs */
}
.form-contact .btn {width: 100%; border-radius: 0; }
.form-contact .champ {background-color: #fff; border-radius: 8px; padding: 17px 20px; border: 0; margin-bottom: 17px; width: 100%; font-size: 0.9em;}
.form-contact .champ#rgpd {width: inherit;}
/* RESPONSIVE — tu peux garder tes breakpoints existants */
@media (min-width: 768px) {
.main-contact {height: 780px; background: url(../images/home/bg-slider-degrade.png) bottom center no-repeat, url(../images/contact/slide1.jpg) center center no-repeat; background-size: 100%, cover;}
.form-contact {
position: absolute;
top: 130px; left: 50%; /* ← centre horizontalement */
transform: translateX(-50%); /* ← décale de moitié sa largeur */
margin-top: 0;
margin-bottom: 0;
}
.form-contact form {
max-width: none;
width: 440px;
}
.form-contact form::before {
background: rgba(244, 244, 247, 0.7);
backdrop-filter: blur(5px);
}
}
@media (min-width: 768px) {
.form-contact {
position: absolute;
top: 120px;
margin-top: 0;
margin-bottom: 0;
}
.form-contact form {
width: 740px;
top: calc(50% - 80px);
}
}
.form-contact h1 {font-size: 1.2em; margin-bottom: 0.2em;}
.form-contact .infos {margin-bottom: 6px; margin-top: 12px;}
.form-contact .intro {margin-bottom: 30px;}
.form-contact .obli {color: #fff; font-style: italic; font-size: 0.88em;}
.form-contact select {appearance: none; /* masque la flèche par défaut */
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.5rem center; /* ici tu choisis la distance */
background-size: 1.5rem;
padding-right: 2rem; /* pour que le texte ne chevauche pas la flèche */
font-size: 19px; border-radius: 11px; padding: 12px 17px; padding-right: 40px;
}
.form-contact textarea {width: 100%; height: 287px; margin-bottom: 11px!important;}
.form-contact .btn {width: 100%!important; border-radius: 0; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
@media (min-width: 992x) {
.form-contact h1 {font-size: 1.3em;}
}
@media (min-width: 1200px) {
.form-contact h1 {font-size: 1.5em;}
}
/* ******************************* ICONES COTE */
.icones-cote {position: fixed; bottom: 0px; right: 0; width: 100%; }
.icones-cote a {display: block; float: left; width: 25%; aspect-ratio: 1;}
.icones-cote .rdv-conseiller {background: url(../images/icones-cote/rdv-conseiller.svg) center center no-repeat #32bcb6; background-size: 100%; border-top-left-radius: 18px;}
.icones-cote .rdv-essai {background: url(../images/icones-cote/rdv-essai.svg) center center no-repeat #168fa0; background-size: 100%;}
.icones-cote .rdv-atelier {background: url(../images/icones-cote/rdv-atelier.svg) center center no-repeat #2d6480; background-size: 100%; border-top-right-radius: 18px;}
.icones-cote .rdv-chat {background: url(../images/icones-cote/rdv-chat.svg) center center no-repeat var(--GrisBleute); background-size: 100%; border-top-right-radius: 18px;}
.icones-cote .rdv-conseiller:hover {background: url(../images/icones-cote/rdv-conseiller.svg) center center no-repeat #33a89f; background-size: 100%; }
.icones-cote .rdv-essai:hover {background: url(../images/icones-cote/rdv-essai.svg) center center no-repeat #128891; background-size: 100%;}
.icones-cote .rdv-atelier:hover {background: url(../images/icones-cote/rdv-atelier.svg) center center no-repeat #245c72; background-size: 100%;}
.icones-cote .rdv-chat:hover {background: url(../images/icones-cote/rdv-chat.svg) center center no-repeat #9393aa; background-size: 100%; }
/*@media (min-width: 450px) { */
.icones-cote {position: fixed; top: 35%; bottom: inherit; right: 0; width: 45px; }
.icones-cote a {display: block; float: none; width: 45px; height: 45px; aspect-ratio: inherit;}
.icones-cote .rdv-atelier {background: url(../images/icones-cote/rdv-atelier.svg) center center no-repeat #2d6480; background-size: 100%; border-top-right-radius: 0; border-bottom-left-radius: 13px;}
.icones-cote .rdv-chat {background: url(../images/icones-cote/rdv-chat.svg) center center no-repeat var(--GrisBleute); background-size: 100%; border-top-right-radius: 0; border-bottom-left-radius: 13px;}
/*}*/
@media (min-width: 450px) {
.icones-cote {position: fixed; top: 35%; bottom: inherit; right: 0; width: 70px; }
.icones-cote a {display: block; float: none; width: 70px; height: 70px; aspect-ratio: inherit;}
.icones-cote .rdv-atelier {background: url(../images/icones-cote/rdv-atelier.svg) center center no-repeat #2d6480; background-size: 100%; border-top-right-radius: 0; border-bottom-left-radius: 18px;}
.icones-cote .rdv-chat {background: url(../images/icones-cote/rdv-chat.svg) center center no-repeat var(--GrisBleute); background-size: 100%; border-top-right-radius: 0; border-bottom-left-radius: 18px;}
}
/* ******************************* FOOTER */
footer {color: #999999; padding-top: 4rem; padding-bottom: 6rem;}
footer a {color: #999999; text-decoration: none;}
footer a:hover {text-decoration: underline;}
footer .footer-logo img {max-width: 180px;}
footer a.tel {display:inline-block; background: url(../images/footer/telephone.svg) top 3px left no-repeat; background-size: 25px auto; padding-left: 26px; }
footer a.mail {display:inline-block; background: url(../images/footer/mail.svg) top 3px left no-repeat; background-size: 25px auto; padding-left: 26px; }
footer .footer-contact a {}
footer .footer-links .titre {color: #000; margin-bottom: 10px; font-weight: 800; font-family: "Funnel Display", sans-serif; }
footer .footer-links ul {margin:0; padding: 0;}
footer .footer-links li {list-style: none; padding:0; margin: O; padding-bottom: 9px; font-size: 0.9em;}
footer .footer-links .a-contact {background: #f4f4f7; border-radius: 8px; padding: 6px 12px; display: inline-block;}
footer .footer-links .a-contact:hover {text-decoration: none; background: #ccc; color: #fff;}
footer .linkedin-circle {background: #fff; border-radius: 50%; padding: 5px; display: block; width: 33px; height: 33px; margin: 0 auto;}
footer .linkedin-circle:hover {background: var(--Bleu);}
footer hr {margin: 0 auto; color: #808080;}
.footer-copyright {font-size: 0.84em;}
@media (min-width: 450px) {
footer { padding-bottom: 4rem;}
}
/* ******************************* ICONCAPTCHA */
.iconcaptcha-holder .iconcaptcha-modal__body-icons {
max-width: 100%; /* occupe toute la largeur disponible */
height: 40px; /* réduit la hauteur pour mobile */
background-size: contain; /* ajuste le sprite pour qu’il tienne */
background-position: center;
}
@media (max-width: 480px) {
.iconcaptcha-holder .iconcaptcha-modal__body-icons {
height: 35px; /* réduit légèrement */
background-size: 90% 100%; /* adapte le sprite pour tenir sur l’écran */
}
}
/* ******************************* COOKIES */
.cookies-bandeau {color: #fff; background: var(--TurquoiseDark); position: fixed; bottom: 0; width: 100%; margin-bottom: -210px; transition: all 1.5s; z-index: 2500;}
.cookies-bandeau.actif {margin-bottom: 0;}
.cookies-bandeau .plus {text-decoration: underline; color: var(--TurquoiseLight);}
.cookies-bandeau .btn {background: #fff; padding: 9px 14px; background-color: var(--Turquoise); font-size: 1.15em; color: #fff;}
.cookies-bandeau .btn:hover {text-decoration: none; background-color: var(--TurquoiseLight); }
@media (min-width: 992px) {
.cookies-bandeau {margin-bottom: -120px;}
}
/* SLICKSLIDER */
.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus {outline: none; }
.slick-list .bouton a {background: var(--Vert); color: #fff; line-height: 1; }
.slick-list .bouton a:hover {text-decoration: none; opacity: 0.9;}
.slick-list.dragging {cursor: pointer; cursor: hand; }
.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before, .slick-track:after {display: table; content: ''; }
.slick-track:after {clear: both; }
.slick-loading .slick-track {visibility: hidden; }
.slick-slide {display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide {float: right; }
.slick-slide img {display: block; }
.slick-slide.slick-loading img {display: none; }
.slick-slide.dragging img {pointer-events: none; }
.slick-initialized .slick-slide {display: block; }
.slick-loading .slick-slide {visibility: hidden; }
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden {display: none; }
.slick-loading .slick-list:after { background-color: rgba(0, 0, 0, .3); content:""; display:block; width: 40px; height: 40px; position: absolute; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; -webkit-animation: rotate-loading 1.2s infinite ease-in-out; animation: rotate-loading 1.2s infinite ease-in-out; }
@-webkit-keyframes rotate-loading {0% { -webkit-transform: perspective(120px)} 50% { -webkit-transform: perspective(120px) rotateY(180deg)} 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)} }
@keyframes rotate-loading {0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)} 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)} 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);} }
/* Arrows */
.slick-prev, .slick-next {bottom: 0; border: 0; font-size: 0; line-height: 0; opacity: .7;position: absolute; z-index: 99; display: block; padding: 0; text-decoration: none !important; overflow: hidden; cursor: pointer; color: transparent; outline: none; background: transparent; }
.slick-prev:hover, .slick-next:hover {color: transparent; outline: none; background: transparent;opacity: 1;}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {opacity: .45;}
.slick-prev:before, .slick-next:before {width: 54px; height: 24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: ""; display: block; background-repeat: no-repeat; background-position: center center;}
.slick-prev {left: 50%; margin-left: -57px;}
.slick-prev:before {background-image: url("data:image/svg+xml;charset=utf8,"); }
.slick-next:before {background-image: url("data:image/svg+xml;charset=utf8,");}
.slick-next {left: 50%; margin-left: 17px;}
@media (min-width: 768px) {
.slick-prev, .slick-next {bottom:auto;top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); margin-left: 0;}
.slick-prev {left: -60px;}
.slick-next {left: auto; right: -60px;}
}
@media (min-width: 1200px) {
.slick-prev {left: -80px;}
.slick-next {right: -80px;}
}
@media (min-width: 1500px) {
.slick-prev {left: -90px;}
.slick-next {right: -90px;}
}
/* Dots */
.slick-dots {bottom: 15px;position: absolute; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }
.slick-dots li {width: 16px; height: 16px; margin: 0 6px;position: relative; display: inline-block; padding: 0; cursor: pointer; }
.slick-dots li button {width: 16px; height: 16px; opacity: 0.9;font-size: 0; background: none; border: solid 1px #fff; line-height: 0; display: block; cursor: pointer; /*color: transparent; border: 0; outline: none;*/border-radius: 16px;box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);}
.slick-dots li button:hover {outline: none; opacity: .9; background: #fff;}
.slick-dots li.slick-active button {opacity: 1; background: #fff;}
/*@media (min-width: 480px) {
.slick-dots li,
.slick-dots li button {width: 30px; height: 30px;}
}*/
@media (min-width: 768px) {
.slick-dots {bottom: 20px;}
.slick-dots li,
.slick-dots li button {width: 16px; height: 16px;}
}
@media (min-width: 1200px) {
.slick-dots {bottom: 40px;}
}
/* main slider */
.slick-mainslider,
.slick-mainslider .slick-slide {height: 280px;}
.slick-mainslider .slick-slide {background-position: center center; background-repeat: no-repeat;background-size: cover;}
@media (min-width: 480px) {
.slick-mainslider,
.slick-mainslider .slick-slide {height: 500px;/* background: url(../images/home/bg-slider-degrade.png) bottom center no-repeat; background-size: 100%;*/}
.slick-mainslider .slide-content {padding-top: 240px;}
}
@media (min-width: 1200px) {
.slick-mainslider,
.slick-mainslider .slick-slide {height: 600px;}
}
/* carousel */
.slick-carousel {padding-bottom: 40px;}
.slick-carousel .slick-slide {text-align: center;}
.carousel-item {display: inline-block;}
.carousel-item a {position: relative;display: block; text-align: left;}
.slick-carousel .slick-track > .slick-slide:nth-child(even) > .carousel-item a .layer {justify-content: end;}
.carousel-item a img {border-radius: 10px;}
.carousel-item a .layer {position: absolute; left: 0; top: 0; right: 0; bottom: 0; color: #fff; padding: 25px; background-color: rgba(0, 0, 0, .15);border-radius: 10px;-webkit-transition: all .4s 0s; transition: all .4s 0s;}
.carousel-item a:hover .layer {background-color: rgba(0, 0, 0, .3);}
.slick-carousel .slick-track > .slick-slide:nth-child(even) > .carousel-item a:hover .layer {padding-bottom: 45px;}
.slick-carousel .slick-track > .slick-slide:nth-child(odd) > .carousel-item a:hover .layer {padding-top: 45px;}
.carousel-item a .layer .date {text-transform: uppercase;margin-bottom: .6em;}
.carousel-item a .layer .title {font-weight: 800;font-size: 1.375em; line-height: 1.25em;margin: 0;}
@media (min-width: 768px) {
.slick-carousel {padding-bottom: 0;}
}/*
@media (min-width: 992px) {
.carousel-item {width: 280px;}
.carousel-item a .layer {font-size: .9em;}
}
@media (min-width: 1200px) {
.carousel-item {width: 320px;}
.carousel-item a .layer {font-size: 1em;}
}*/
/* Slider */
.flex-container a:hover, .flex-slider a:hover, .flex-container a:focus, .flexslider a:focus {outline: none; }
.flexslider .slides, .flexslider .slides > li, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
.flexslider .slides img {-moz-user-select: none;}
.flexslider .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
html[xmlns] .flexslider .slides {display: block; }
* html .flexslider .slides {height: 1%; }
.no-js .flexslider .slides > li:first-child {display: block; }
.flexslider {margin: 0 auto; position: relative; zoom: 1;height:auto;}
.flexslider .slides {zoom: 1; z-index: 50;}
.flexslider .slides > li {position:relative;}
.flex-viewport {max-height: 2000px;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
.loading:after { background-color: #c20e1a; content:""; display:block; width: 40px; height: 40px; position: absolute; left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; -webkit-animation: rotate-loading 1.2s infinite ease-in-out; animation: rotate-loading 1.2s infinite ease-in-out; }
@-webkit-keyframes rotate-loading {0% { -webkit-transform: perspective(120px)} 50% { -webkit-transform: perspective(120px) rotateY(180deg)} 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)} }
@keyframes rotate-loading {0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)} 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)} 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);} }
.flex-control-paging {width: 100%; position: absolute; bottom: 20px; text-align: center; z-index: 70}
.flex-control-paging li {margin: 0 5px!important; display: inline-block; zoom: 1; *display: inline;}
.flex-control-paging li a {background-color: #fff;opacity: 0.5; font-size: 0; width: 15px; height: 15px; border-radius: 50%; display: block;cursor: pointer;}
.flex-control-paging li a:hover, .flex-control-paging li a:focus {opacity: 0.75;}
.flex-control-paging li a.flex-active {opacity: 1 !important;}