html {
scroll-behavior: smooth
}
.leaflet-popup, body {
font-family: Montserrat,sans-serif
}
header {
z-index: 1044;
position: relative
}
.btn-light, .btn-primary {
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}
div#panoDIV, div#tourDIV {
overflow: hidden;
height: 60vh
}
#SwiperAccueil .swiper-slide, .info-swipe-360 {
visibility: hidden
}
:root, [data-bs-theme=light] {
--bs-primary: #00488C;
--bs-secondary: #00a0dc;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f2f2f2;
--bs-dark: #212529;
--bs-primary-rgb: 0,72,140;
--bs-secondary-rgb: 0,160,220;
--bs-success-rgb: 25,135,84;
--bs-info-rgb: 13,202,240;
--bs-warning-rgb: 255,193,7;
--bs-danger-rgb: 220,53,69;
--bs-light-rgb: 242,242,242;
--bs-dark-rgb: 33,37,41;
--bs-primary-text-emphasis: #052c65;
--bs-secondary-text-emphasis: #2b2f32;
--bs-success-text-emphasis: #0a3622;
--bs-info-text-emphasis: #055160;
--bs-warning-text-emphasis: #664d03;
--bs-danger-text-emphasis: #58151c;
--bs-light-text-emphasis: #495057;
--bs-dark-text-emphasis: #495057;
--bs-primary-bg-subtle: #cfe2ff;
--bs-secondary-bg-subtle: #e2e3e5;
--bs-success-bg-subtle: #d1e7dd;
--bs-info-bg-subtle: #cff4fc;
--bs-warning-bg-subtle: #fff3cd;
--bs-danger-bg-subtle: #f8d7da;
--bs-light-bg-subtle: #fcfcfd;
--bs-dark-bg-subtle: #ced4da;
--bs-primary-border-subtle: #9ec5fe;
--bs-secondary-border-subtle: #c4c8cb;
--bs-success-border-subtle: #a3cfbb;
--bs-info-border-subtle: #9eeaf9;
--bs-warning-border-subtle: #ffe69c;
--bs-danger-border-subtle: #f1aeb5;
--bs-light-border-subtle: #e9ecef;
--bs-dark-border-subtle: #adb5bd;
--bs-white-rgb: 255,255,255;
--bs-black-rgb: 0,0,0;
--bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529;
--bs-body-color-rgb: 33,37,41;
--bs-body-bg: #fff;
--bs-body-bg-rgb: 255,255,255;
--bs-emphasis-color: #000;
--bs-emphasis-color-rgb: 0,0,0;
--bs-secondary-color: rgba(33, 37, 41, 0.75);
--bs-secondary-color-rgb: 33,37,41;
--bs-secondary-bg: #e9ecef;
--bs-secondary-bg-rgb: 233,236,239;
--bs-tertiary-color: rgba(33, 37, 41, 0.5);
--bs-tertiary-color-rgb: 33,37,41;
--bs-tertiary-bg: #f8f9fa;
--bs-tertiary-bg-rgb: 248,249,250;
--bs-heading-color: inherit;
--bs-link-color: #00488C;
--bs-link-color-rgb: 0,72,140;
--bs-link-decoration: none;
--bs-link-hover-color: #0a58ca;
--bs-link-hover-color-rgb: 10,88,202;
--bs-code-color: #d63384;
--bs-highlight-color: #212529;
--bs-highlight-bg: #fff3cd;
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: #dee2e6;
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
--bs-border-radius: 0.375rem;
--bs-border-radius-sm: 0.25rem;
--bs-border-radius-lg: 0.5rem;
--bs-border-radius-xl: 1rem;
--bs-border-radius-xxl: 2rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 0.25;
--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
--bs-form-valid-color: #198754;
--bs-form-valid-border-color: #198754;
--bs-form-invalid-color: #dc3545;
--bs-form-invalid-border-color: #dc3545
}
body {
font-size: 16px;
font-weight: 400;
line-height: 28px;
color: #1c1c1c;
font-optical-sizing: auto;
font-display: swap;
overflow-x: hidden !important
}
a {
text-decoration: none
}
.mt-section {
margin-top: 5rem
}
.p-section {
padding: 5rem 0
}
#header-sticky {
box-shadow: 5px 4px 5px 0 rgb(20 22 23 / .1);
-webkit-box-shadow: 5px 4px 5px 0 rgb(20 22 23 / .1);
-moz-box-shadow: 5px 4px 5px 0 rgb(20 22 23 / .1)
}
#MenuPrincipal.offcanvas {
width: 992px
}
#MenuPrincipal.offcanvas a, footer ul.liste-liens-footer li a:hover {
color: #00488c
}
#MenuPrincipal .offcanvas-body {
padding: 0
}
#MenuPrincipal .btn-close {
position: absolute;
right: 0;
padding: 20px
}
#MenuPrincipal .btn-close:focus, .ModalCarousel .SwiperModal .accordion-button:focus, .btn-close:focus {
box-shadow: none
}
#MenuPrincipal .nav-pills .nav-link {
font-size: 1.3rem;
font-weight: 500;
color: #1c1c1c;
border-radius: .3rem;
border-left: 4px solid #f2f2f2
}
#MenuPrincipal .nav-pills .nav-link:hover {
background: #f8f9fa;
border-left: 4px solid #00a0dc
}
#MenuPrincipal .nav-pills .nav-link.active {
color: #fff;
background: #00488c;
border-left: 4px solid #00a0dc
}
#MenuPrincipal .modele-vehicule-nav, .MenuPrincipalModal .modele-vehicule-nav {
text-align: start;
padding: 1.5rem;
border-radius: .8rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
#MenuPrincipal .modele-vehicule-nav a, .MenuPrincipalModal .modele-vehicule-nav a {
color: #1c1c1c
}
#MenuPrincipal .modele-vehicule-nav:hover, #MenuPrincipal ul.liste-liens-nav li a:hover, .MenuPrincipalModal .modele-vehicule-nav:hover, .MenuPrincipalModal ul.liste-liens-nav li a:hover {
background: #fff
}
#MenuPrincipal .modele-vehicule-nav-img, .MenuPrincipalModal .modele-vehicule-nav-img {
display: flex;
justify-content: center;
text-align: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: .8rem;
width: 100%;
height: 240px;
padding: 20px;
/* transition existante pour background-size */
transition: background-size 0.2s cubic-bezier(.25,.46,.45,.94), box-shadow 0.5s ease-in-out; /* <- ajout pour box-shadow */
will-change: background-size, box-shadow;
}
#MenuPrincipal .modele-vehicule-nav-img-logo, .MenuPrincipalModal .modele-vehicule-nav-img-logo {
width: 200px;
}
/* effet au hover */
#MenuPrincipal .modele-vehicule-nav-img:hover,
.MenuPrincipalModal .modele-vehicule-nav-img:hover {
box-shadow: inset 0 0 0 9999px rgba(0,0,0,0.3);
}
#MenuPrincipal ul.liste-liens-nav, .MenuPrincipalModal ul.liste-liens-nav {
list-style-type: none;
font-size: 1.2rem;
line-height: 2.3rem;
padding: 0
}
#MenuPrincipal ul.liste-liens-nav li:first-child, .MenuPrincipalModal ul.liste-liens-nav li:first-child, footer ul.liste-liens-footer li:first-child {
margin-top: 0
}
#MenuPrincipal ul.liste-liens-nav li, .MenuPrincipalModal ul.liste-liens-nav li {
margin-top: 1.5rem
}
#MenuPrincipal ul.liste-liens-nav li a, .MenuPrincipalModal ul.liste-liens-nav li a {
color: #292929;
padding: .5rem 1rem;
border-radius: .5rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
#bandeau-accueil {
background-size: cover;
height: 100vh;
color: #fff;
background-position: center center
}
#bandeau-accueil .overlay, .swiper {
width: 100%;
height: 100%
}
#SwiperAccueil .swiper-button-next, #SwiperAccueil .swiper-button-prev {
width: 65px !important;
height: 65px !important;
top: initial !important;
bottom: 0
}
#bandeau-accueil #annonce-bandeau-accueil {
background: rgb(0 0 0 / .5);
padding: 2rem;
border-radius: .8rem
}
.arrow-godown-light {
width: 35px;
position: absolute;
left: 49%;
bottom: 20px;
filter: invert(1);
animation: 2s 1s infinite UpDownMoving
}
@keyframes UpDownMoving {
0%,20%,50%,80%,to {
transform: translateY(6px)
}
40%,60% {
transform: translateY(0)
}
}
.box-modele {
background: center center/cover #292929;
height: 600px;
color: #fff;
border-radius: 1rem
}
.box-modele .overlay {
width: 100%;
height: 100%;
padding: 2rem;
border-radius: 1rem;
background: #000;
background: -moz-linear-gradient(180deg,rgb(0 0 0 / .9) 0,#fff0 40%,rgb(0 0 0 / .9) 100%);
background: -webkit-linear-gradient(180deg,rgb(0 0 0 / .9) 0,#fff0 40%,rgb(0 0 0 / .9) 100%);
background: linear-gradient(180deg,rgb(0 0 0 / .9) 0,#fff0 40%,rgb(0 0 0 / .9) 100%)
}
.card {
border: none
}
.card-img-top {
border-radius: .8rem
}
.bandeau-page {
width: 100%;
height: 400px;
display: flex;
align-items: end;
justify-content: center
}
.bandeau-page .breadcumbs {
background: #fff;
text-align: center;
padding: .5rem 2rem;
border-top-left-radius: .375rem;
border-top-right-radius: .375rem
}
.bandeau-page .breadcumbs p {
font-weight: 600;
margin-bottom: 0
}
.btn-prototype {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 42px;
height: 42px;
border-radius: 100%;
border: 4px solid #fff;
background: rgba(49,87,184,.85);
z-index: 1;
transition: transform .2s ease-out
}
.btn-prototype-rotate {
-webkit-transform: rotate(315deg);
transform: rotate(315deg)
}
.btn-prototype-professionnels-1 {
top: 36%;
left: 47.6%
}
.btn-prototype-professionnels-2 {
top: 50%;
left: 74%
}
.btn-prototype-professionnels-3 {
top: 70%;
left: 50%
}
.bandeau-fiche-modele {
background: #c8c8c8;
background: -moz-linear-gradient(180deg,#c8c8c8 0,#f2f2f2 60%,#fff 60%);
background: -webkit-linear-gradient(180deg,#c8c8c8 0,#f2f2f2 60%,#fff 60%);
background: linear-gradient(180deg,#c8c8c8 0,#f2f2f2 60%,#fff 60%);
display: flex;
justify-content: center;
align-items: center;
padding-top: 140px
}
.menu-secondaire-fiche-modele {
position: sticky;
top: 77.2px;
background: #fff;
z-index: 10
}
.rw-wrapper, div#tourDIV {
position: relative
}
@media only screen and (max-width:1360px) {
.menu-secondaire-fiche-modele {
overflow-x: scroll;
white-space: nowrap !important
}
.menu-secondaire-fiche-modele .nav {
display: inline-flex;
flex-wrap: nowrap !important
}
}
.menu-secondaire-fiche-modele .nav-pills .nav-item {
margin: 0 .5rem
}
.menu-secondaire-fiche-modele .nav-pills a.nav-link {
font-weight: 600;
color: #1c1c1c
}
.menu-secondaire-fiche-modele .nav-pills a.nav-link.active {
color: #fff;
border-radius: .3rem;
background: #00488c
}
.box-points-forts-fiche-modele {
background: center center/cover #292929;
height: 60vh;
max-height: 650px;
min-height: 500px;
color: #fff;
border-radius: .8rem
}
.box-points-forts-fiche-modele .overlay {
width: 100%;
height: 100%;
padding: 2rem;
border-radius: .8rem;
background: #000;
background: -moz-linear-gradient(180deg,#fff0 0,#fff0 40%,#000 100%);
background: -webkit-linear-gradient(180deg,#fff0 0,#fff0 40%,#000 100%);
background: linear-gradient(180deg,#fff0 0,#fff0 40%,#000 100%)
}
.btn {
font-weight: 600;
border-radius: 4px;
padding: .6rem 1rem
}
.btn-outline-dark, .btn-outline-light, .btn-outline-primary {
border: 2px solid
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #00488C;
--bs-btn-border-color: #00488C;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #0b5ed7;
--bs-btn-hover-border-color: #0a58ca;
--bs-btn-focus-shadow-rgb: 49,132,253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #0a58ca;
--bs-btn-active-border-color: #0a53be;
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #00488C;
--bs-btn-disabled-border-color: #00488C
}
.btn-outline-primary {
--bs-btn-color: #00488C;
--bs-btn-bg: transparent;
--bs-btn-border-color: #00488C;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #00488C;
--bs-btn-hover-border-color: #00488C;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #00488C;
--bs-btn-active-border-color: #00488C
}
.btn-light, .btn-outline-special {
--bs-btn-focus-shadow-rgb: 211,212,213;
--bs-btn-disabled-color: #1c1c1c;
--bs-btn-disabled-bg: #f2f2f2;
--bs-btn-disabled-border-color: #f2f2f2
}
.btn-light {
--bs-btn-color: #1c1c1c;
--bs-btn-bg: #f2f2f2;
--bs-btn-border-color: #f2f2f2;
--bs-btn-hover-color: #1c1c1c;
--bs-btn-hover-bg: #eee;
--bs-btn-hover-border-color: #eee;
--bs-btn-active-color: #1c1c1c;
--bs-btn-active-bg: #eee;
--bs-btn-active-border-color: #eee
}
.btn-outline-special {
--bs-btn-color: #c8a050;
--bs-btn-bg: transparent;
--bs-btn-border-color: #c8a050;
--bs-btn-hover-color: #000;
--bs-btn-hover-bg: #c8a050;
--bs-btn-hover-border-color: #c8a050;
--bs-btn-active-color: #000;
--bs-btn-active-bg: #c8a050;
--bs-btn-active-border-color: #c8a050
}
footer {
font-size: .9rem;
line-height: 1.6rem;
background: #f2f2f2;
padding: 10vh 4vw
}
footer ul.liste-liens-footer {
list-style-type: none;
padding: 0
}
footer ul.liste-liens-footer li {
margin-top: .5rem
}
footer ul.liste-liens-footer li a {
color: #292929
}
.rw-wrapper {
font-size: 20px;
line-height: 30px;
margin-bottom: 10px
}
.rw-sentence {
margin: 0;
text-align: left
}
.leaflet-popup-content, .scroll-title {
text-align: center
}
.rw-words {
display: inline-flex;
text-indent: 10px
}
.rw-words-1 span {
position: absolute;
opacity: 0;
overflow: hidden;
-webkit-animation: 18s linear infinite rotateWord;
-ms-animation: rotateWord 18s linear infinite 0s;
animation: 18s linear infinite rotateWord
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s
}
@media only screen and (max-width:992px) {
.box-modele, .box-points-forts-fiche-modele {
height: 700px
}
.box-modele .overlay, .box-points-forts-fiche-modele .overlay {
padding: 1.2rem;
border-radius: .8rem
}
.box-modele a {
width: 100%
}
.bandeau-page {
width: 100%;
height: 200px
}
.btn-prototype {
width: 32px;
height: 32px;
border: 2px solid #fff
}
.rw-wrapper {
font-size: 14px;
line-height: 20px;
margin-bottom: 80px
}
.rw-words {
text-indent: 0
}
}
@media only screen and (min-width:576px) and (max-width:992px) {
.rw-wrapper {
font-size: 18px;
line-height: 24px;
margin-bottom: 60px
}
}
@media only screen and (max-width:576px) {
.mt-section {
margin-top: 4rem
}
.p-section {
padding: 3rem 0
}
.container {
padding: 0 1.4rem !important
}
#bandeau-accueil #annonce-bandeau-accueil {
padding: 1.5rem
}
#bandeau-accueil #annonce-bandeau-accueil p {
font-size: 13px;
line-height: 23px
}
.arrow-godown-light {
left: 46%;
bottom: 0
}
.box-points-forts-fiche-modele {
height: 500px
}
.rw-wrapper {
font-size: 16px;
line-height: 24px;
margin-bottom: 80px
}
}
@-webkit-keyframes rotateWord {
0%,100%,80% {
opacity: 0
}
2% {
opacity: 0;
-webkit-transform: translateY(-10px)
}
17%,5% {
opacity: 1;
-webkit-transform: translateY(0)
}
20% {
opacity: 0;
-webkit-transform: translateY(10px)
}
}
@-ms-keyframes rotateWord {
0%,100%,2%,20%,80% {
opacity: 0
}
2% {
-ms-transform: translateY(-10px)
}
17%,5% {
opacity: 1;
-ms-transform: translateY(0)
}
20% {
-ms-transform: translateY(10px)
}
}
@keyframes rotateWord {
0%,100%,80% {
opacity: 0
}
2% {
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
17%,5% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
20% {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
}
.animated-1 {
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animated-2 {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px)
}
100% {
opacity: 1;
-webkit-transform: translateX(0)
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
#SwiperAccueil .swiper-slide.swiper-slide-visible.swiper-slide-active {
visibility: visible
}
#SwiperAccueil .swiper-button-prev {
background: #f2f2f2;
left: 0 !important
}
#SwiperAccueil .swiper-button-next {
background: #f2f2f2;
left: 75px !important
}
#SwiperAccueil .swiper-button-next:hover, #SwiperAccueil .swiper-button-prev:hover, #tarteaucitronAlertBig #tarteaucitronPersonalize2, .swiper-pagination-progressbar .swiper-pagination-progressbar-fill, .tarteaucitronAllow {
background: #00488c !important
}
#SwiperAccueil .swiper-button-next::after, #SwiperAccueil .swiper-button-prev::after, .SwiperPointsForts .swiper-button-next::after, .SwiperPointsForts .swiper-button-prev::after {
font-size: 18px !important;
color: #000
}
#SwiperAccueil .swiper-button-next:hover::after, #SwiperAccueil .swiper-button-prev:hover::after, .ModalCarousel .swiper-button-next:hover::after, .ModalCarousel .swiper-button-prev:hover::after, .SwiperPointsForts .swiper-button-next:hover::after, .SwiperPointsForts .swiper-button-prev:hover::after, .footer-special ul.liste-liens-footer li a, .form-special {
color: #fff
}
.footer-special ul.liste-liens-footer li a:hover, .scroll-title {
color: #c8a050
}
.SwiperPointsForts .swiper-slide {
width: 75vw !important;
margin-left: 10vw;
flex-shrink: 0;
overflow-x: hidden
}
@media only screen and (max-width:1200px) {
.bandeau-fiche-modele {
padding-top: 100px
}
.SwiperPointsForts .swiper-slide {
width: 84vw !important;
margin-left: 7vw
}
}
@media only screen and (max-width:992px) {
#SwiperAccueil .swiper-button-next, #SwiperAccueil .swiper-button-prev {
top: 40px !important;
bottom: initial !important;
width: 55px !important;
height: 55px !important;
left: initial !important
}
#SwiperAccueil .swiper-button-prev {
right: 65px !important
}
#SwiperAccueil .swiper-button-next {
right: 0 !important
}
#SwiperAccueil .swiper-button-next::after, #SwiperAccueil .swiper-button-prev::after {
font-size: 16px !important;
color: #000
}
.SwiperPointsForts .swiper-slide {
width: 75vw !important;
margin-left: 10vw
}
}
@media only screen and (max-width:767px) {
.MenuPrincipalModal .modele-vehicule-nav {
text-align: center;
padding: .5rem;
border-radius: .8rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.SwiperPointsForts .swiper-slide {
width: 70vw !important;
margin-left: 10vw
}
}
@media only screen and (max-width:580px) {
#bandeau-accueil #annonce-bandeau-accueil a, .box-modele-accueil a {
width: 100%
}
.box-modele-accueil {
height: 500px
}
#SwiperAccueil .swiper-button-next, #SwiperAccueil .swiper-button-prev {
top: 40px !important;
bottom: initial !important;
width: 45px !important;
height: 45px !important;
left: initial !important
}
#SwiperAccueil .swiper-button-prev {
right: 55px !important
}
#SwiperAccueil .swiper-button-next {
right: 0 !important
}
#SwiperAccueil .swiper-button-next::after, #SwiperAccueil .swiper-button-prev::after {
font-size: 14px !important;
color: #000
}
.SwiperPointsForts .swiper-slide {
width: 77vw !important;
margin-left: 40px
}
}
.SwiperPointsForts .swiper-slide:last-child {
margin-right: 150px
}
.SwiperPointsForts .swiper-slide .box-content {
max-height: 650px
}
.SwiperPointsForts .swiper-button-next, .SwiperPointsForts .swiper-button-prev {
background: #f2f2f2;
width: 50px;
height: 80px;
border-radius: 4px
}
.SwiperPointsForts .swiper-button-next:hover, .SwiperPointsForts .swiper-button-prev:hover {
background: #00488c;
width: 50px;
height: 80px;
border-radius: 4px
}
div#panoDIV {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
cursor: move
}
.ModalCarousel .modal-content {
background-color: #fff0;
border: none
}
.ModalCarousel .modal-title {
font-size: 20px;
line-height: 30px;
font-weight: 600
}
.ModalCarousel .SwiperModal .swiper-slide {
position: relative;
background: #fff;
width: 500px;
height: 590px;
border-radius: 8px;
padding: 20px 40px 40px;
overflow-y: scroll
}
@media only screen and (max-width:480px) {
.SwiperPointsForts .swiper-slide {
width: 76vw !important;
margin-left: 40px
}
.ModalCarousel .SwiperModal .swiper-slide {
padding: 20px 30px 30px
}
}
.ModalCarousel .close-modal {
position: absolute;
top: 10px;
right: 10px;
background-color: #f2f2f2;
border: none;
border-radius: 5px;
cursor: pointer;
padding: 5px 12px;
z-index: 30
}
.ModalCarousel .swiper-button-next, .ModalCarousel .swiper-button-prev {
background: #f2f2f2;
width: 40px;
height: 70px;
border-radius: 4px
}
.ModalCarousel .swiper-button-next:hover, .ModalCarousel .swiper-button-prev:hover {
background: #00488c;
width: 40px;
height: 70px
}
.ModalCarousel .swiper-button-prev {
left: 14vw;
box-shadow: 1px 1px 8px 0 rgb(20 22 23 / .4);
-webkit-box-shadow: 1px 1px 8px 0 rgb(20 22 23 / .4) );
-moz-box-shadow: 1px 1px 8px 0 rgb(20 22 23 / .4)
}
.ModalCarousel .swiper-button-next {
right: 14vw;
box-shadow: 1px 1px 8px 0 rgb(20 22 23 / .4);
-webkit-box-shadow: 1px 1px 8px 0 rgb(20 22 23 / .4) );
-moz-box-shadow: 1px 1px 8px 0 rgb(20 22 23 / .4)
}
@media only screen and (max-width:1800px) {
.ModalCarousel .swiper-button-prev {
left: 12vw
}
.ModalCarousel .swiper-button-next {
right: 12vw
}
}
@media only screen and (max-width:1700px) {
.ModalCarousel .swiper-button-prev {
left: 10vw
}
.ModalCarousel .swiper-button-next {
right: 10vw
}
}
@media only screen and (max-width:1600px) {
.ModalCarousel .swiper-button-prev {
left: 5vw
}
.ModalCarousel .swiper-button-next {
right: 5vw
}
}
@media only screen and (max-width:1400px) {
.ModalCarousel .swiper-button-prev {
left: 1vw
}
.ModalCarousel .swiper-button-next {
right: 1vw
}
}
.ModalCarousel .swiper-button-next::after, .ModalCarousel .swiper-button-prev::after {
font-size: 16px !important;
color: #000
}
.SwiperModal .swiper-pagination {
bottom: 10px
}
.SwiperModal .swiper-pagination-bullet {
background: #a6a6a6;
opacity: 1
}
.ModalCarousel .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #00488c;
opacity: 1
}
.ModalCarousel .SwiperModal .accordion-button:not(.collapsed) {
background-color: #fff;
box-shadow: none !important
}
.ModalCarousel .SwiperModal .accordion-button {
font-size: 19px;
font-weight: 500;
padding: .8rem 0
}
@media only screen and (max-width:780px) {
.box-modele {
height: 500px
}
.box-modele .overlay {
padding: 1rem;
border-radius: .5rem
}
.ModalCarousel .SwiperModal .accordion-button {
font-size: 16px;
font-weight: 500;
padding: .8rem 0
}
}
.image-container {
background-position: center center;
background-repeat: no-repeat;
height: 100vh
}
.ModalCarousel .SwiperModal ul {
column-count: 3;
column-gap: 20px;
list-style-position: inside;
list-style-type: none
}
.ModalCarousel .SwiperModal li {
font-size: 13px;
line-height: 23px;
padding: .4rem 0;
border: 0;
break-inside: avoid;
break-inside: avoid
}
.ModalCarousel .SwiperModal li::before {
content: '\f054';
font-size: 10px;
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-right: 10px
}
.info-swipe-360 {
z-index: 10000;
position: absolute;
background-color: rgb(238 238 238 / .8);
padding: 20px;
border-radius: 4px;
margin-top: -35vw;
left: calc(48.5714% - 118px);
opacity: 0;
transition: opacity .5s,visibility .5s
}
.info-swipe-360.show {
opacity: 1;
visibility: visible
}
#tab-brochures .nav {
width: 25%
}
#tab-brochures .tab-content {
width: 75%
}
#tab-brochures .tab-pane .d-flex {
padding-top: .7rem !important;
padding-bottom: .7rem !important;
border-bottom: 1px solid #dee2e6
}
#tab-brochures .nav button {
font-weight: 600;
color: #1c1c1c;
border: 1px solid #dee2e6;
margin: 5px
}
#tab-brochures .nav button.active {
color: #fff;
background: #00488c;
border: 1px solid #00488c
}
#container-reseau-subaru {
height: 88vh;
overflow: hidden
}
@media only screen and (min-width:992px) {
#container-reseau-subaru #liste-concessionnaires {
height: 88vh;
overflow-y: scroll
}
#container-reseau-subaru #liste-concessionnaires::-webkit-scrollbar {
width: 10px
}
}
/* --- 1.BASE & DESKTOP (Écrans larges) --- */
.timeline {
position: relative;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding: 270px 0 270px;
scroll-behavior: smooth;
cursor: grab;
-ms-overflow-style: none;
scrollbar-width: none;
}
.timeline::-webkit-scrollbar {
display: none;
}
.timeline:active {
cursor: grabbing;
}
.timeline ol {
font-size: 0;
padding: 200px 0;
margin: 0;
display: inline-block;
vertical-align: middle;
}
.timeline ol li {
position: relative;
display: inline-block;
list-style-type: none;
width: 210px; /* Ajusté pour passer à 340px de contenu sans chevauchement */
height: 3px;
background: #ddd;
}
.timeline ol li:last-child {
width: 280px;
}
.timeline ol li:not(:first-child) {
margin-left: 14px;
}
/* Les points bleus */
.timeline ol li:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
left: calc(100% + 1px);
width: 12px;
height: 12px;
transform: translateY(-50%);
border-radius: 50%;
background: #00488c;
}
/* Les bulles de contenu (Ajustées à 340px) */
.timeline ol li div {
position: absolute;
left: calc(100% + 7px);
width: 340px; /* Passage à 340px */
padding: 15px;
font-size: 1rem;
white-space: normal;
color: #000;
}
/* Les triangles (Désactivés par défaut, gérés par li:nth-child) */
.timeline ol li div::before {
content: "";
position: absolute;
border-style: solid;
}
.timeline ol li:nth-child(odd) div {
top: -16px;
transform: translateY(-100%);
}
.timeline ol li:nth-child(odd) div::before {
top: 100%;
border-width: 8px 8px 0 0;
border-color: #fff transparent transparent;
}
.timeline ol li:nth-child(2n) div {
top: calc(100% + 16px);
}
.timeline ol li:nth-child(2n) div::before {
top: -8px;
border-width: 8px 0 0 8px;
border-color: transparent transparent transparent #fff;
}
.timeline time {
display: block;
}
/* --- 2. LES FLÈCHES (Centrées en bas) --- */
.timeline .arrows {
position: sticky;
left: 0;
right: 0;
bottom: 20px;
width: 100%;
display: flex;
justify-content: center;
gap: 15px;
z-index: 1000;
pointer-events: none;
}
.timeline .arrow {
pointer-events: auto;
background: #f2f2f2;
width: 60px !important;
height: 60px !important;
border-radius: 50%; /* Rond */
border: 1px solid #dbdbdb;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.timeline .arrow:active {
border: 1px solid #dbdbdb;
}
.timeline .arrow.disabled {
opacity: 0.3;
cursor: not-allowed;
}
/* --- 3. MOBILE (Restauration Strictement Identique) --- */
@media screen and (max-width: 599px) {
.timeline {
padding: 0 !important;
overflow-x: hidden !important;
white-space: normal !important;
cursor: default !important;
}
.timeline ol {
display: block !important;
padding: 0 !important;
width: 100% !important;
}
.timeline ol li {
display: block !important;
width: 100% !important;
height: auto !important;
background: transparent !important;
margin: 0 0 30px 0 !important;
}
.timeline ol li div {
position: static !important;
width: 92% !important;
margin: 0 auto !important;
transform: none !important;
border-bottom: 1px solid #ddd !important;
background: #fff !important;
}
.timeline .arrows,
.timeline ol li::after,
.timeline ol li div::before {
display: none !important;
}
}
.leaflet-popup-content br {
margin-bottom: 5px
}
div#tarteaucitronRoot.tarteaucitronBeforeVisible::before {
background: #000 !important
}
#tarteaucitronRoot span#tarteaucitronDisclaimerAlert {
font-size: 17px !important;
line-height: 27px !important;
margin: 0 0 25px !important;
color: #1c1c1c !important
}
body #tarteaucitronRoot div#tarteaucitronAlertBig {
width: 30vw !important;
max-width: 650px !important;
background: #fff !important;
color: #1c1c1c !important
}
@media only screen and (max-width:1675px) {
body #tarteaucitronRoot div#tarteaucitronAlertBig {
width: 35vw !important
}
}
@media only screen and (max-width:1440px) {
body #tarteaucitronRoot div#tarteaucitronAlertBig {
width: 40vw !important
}
}
@media only screen and (max-width:1260px) {
body #tarteaucitronRoot div#tarteaucitronAlertBig {
width: 48vw !important
}
}
@media only screen and (max-width:992px) {
.ModalCarousel .SwiperModal ul {
column-count: 1;
column-gap: 0;
list-style-position: inside;
list-style-type: none;
padding-left: .5rem
}
#tab-brochures .nav {
width: 100%;
overflow-x: scroll;
flex-wrap: nowrap;
white-space: nowrap !important;
display: inline-flex
}
#tab-brochures .tab-content {
width: 100%
}
body #tarteaucitronRoot div#tarteaucitronAlertBig {
width: 60vw !important
}
#tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
margin-top: 20px !important
}
}
@media only screen and (max-width:900px) {
#tarteaucitronCloseAlert, .tarteaucitronCTAButton {
width: 95% !important
}
}
@media only screen and (max-width:640px) {
.info-swipe-360 {
margin-top: -45vw
}
body #tarteaucitronRoot div#tarteaucitronAlertBig {
width: 75vw !important
}
#tarteaucitronCloseAlert, .tarteaucitronCTAButton {
width: 95% !important
}
#tarteaucitronRoot span#tarteaucitronDisclaimerAlert {
padding: 0 !important;
font-size: 15px !important;
line-height: 25px !important
}
}
#tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
color: #1c1c1c !important;
margin-top: 20px !important
}
#tarteaucitronAlertBig #tarteaucitronCloseAlert {
background: #f2f2f2 !important;
color: #1c1c1c !important
}
.form-special .form-switch .form-check-input:focus, div#tarteaucitronAlertBig::before {
display: none
}
#tarteaucitronIcon {
display: none !important
}
.bandeau-fiche-modele-edition-limitee {
background-position: center bottom;
background-repeat: no-repeat;
height: 100vh;
display: flex;
justify-content: center;
align-items: end;
padding-bottom: 20vh
}
.image-container, .scroll-container {
text-align: center;
position: relative;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
transition: opacity .1s linear;
overflow-x: hidden
}
.scroll-container {
padding-top: 150px
}
.scroll-title {
font-size: 4rem;
line-height: 6rem;
font-weight: 700;
transition: transform .1s linear
}
@media only screen and (max-width:520px) {
.scroll-title {
font-size: 13vw;
line-height: 15vw
}
}
.bg-blur {
background: rgba(30,30,30,.7);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px)
}
.form-special .form-check-input:focus, .form-special .form-control:focus {
border-color: #c8a050;
box-shadow: 0 0 0 .25rem rgba(200,160,80,.25)
}
.form-special .form-check-input:checked {
background-color: #c8a050;
border-color: #c8a050
}
#CarouselBandeauAccueil, .carousel-item {
width: 100%;
height: 99vh;
max-height:1080px
}
#CarouselBandeauAccueil .carousel-item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
background: -moz-linear-gradient( 180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 65%, rgba(0,0,0,.8) 85%, rgba(0,0,0,.9) 100% );
background: -webkit-linear-gradient( 180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 65%, rgba(0,0,0,.8) 85%, rgba(0,0,0,.9) 100% );
background: linear-gradient( 180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 65%, rgba(0,0,0,.8) 85%, rgba(0,0,0,.9) 100% );
z-index: 1
}
#CarouselBandeauAccueil .img-slider {
width: 100%;
height: 100%;
object-fit: cover
}
#CarouselBandeauAccueil .carousel-caption {
position: absolute;
z-index: 2;
padding-bottom: 90px;
left: 5%;
right: 5%
}
@media only screen and (max-width: 576px) {
#CarouselBandeauAccueil .carousel-caption a {
width: 100%;
}
}
.bandeau-fiche-nouveau-modele {
width: 100%;
height: 100vh;
background-size: cover;
background-repeat: no-repeat
}
.bandeau-fiche-nouveau-modele .overlay {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
background: -moz-linear-gradient(180deg,rgb(0 0 0 / 1) 0,rgb(0 0 0 / .8) 20%,rgba(0 0 0 / 0) 40%,rgba(0 0 0 / .8) 70%,rgb(0 0 0 / 1) 100%);
background: -webkit-linear-gradient(180deg,rgb(0 0 0 / 1) 0,rgb(0 0 0 / .8) 20%,rgba(0 0 0 / 0) 40%,rgba(0 0 0 / .8) 70%,rgb(0 0 0 / 1) 100%);
background: linear-gradient(180deg,rgb(0 0 0 / 1) 0,rgb(0 0 0 / .8) 20%,rgba(0 0 0 / 0) 40%,rgba(0 0 0 / .8) 70%,rgb(0 0 0 / 1) 100%);
z-index: 1
}
.bandeau-fiche-nouveau-modele .carousel-caption {
position: absolute;
z-index: 2;
padding-bottom: 20px;
left: 5%;
right: 5%
}
.on-the-footer .box-link {
background: #1a1a1a;
color: #fff;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
text-align: center;
border-right: 1px solid #535353;
padding: 30px 15px
}
.on-the-footer.special-edition .box-link {
background: rgba(30,30,30,.7)!important;
}
@media only screen and (max-width:992px) {
.on-the-footer .box-link {
border-bottom: 1px solid #535353;
}
}
.on-the-footer .box-link p {
margin-bottom: 0;
transition: color 0.3s ease; /* ✅ transition smooth */
}
.on-the-footer .box-link:hover p {
color: #0069CC
}
.on-the-footer.special-edition .box-link:hover p {
color: #c8a050
}
/* --- HERO BANNER (code existant) --- */
.bandeau-video-modele-banner {
position: relative;
width: 100%;
height: 100vh;
max-height:1080px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
}
.bandeau-video-modele-banner-background {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
transform: translate(-50%, -50%);
object-fit: cover;
object-position: center center
}
.bandeau-video-modele-banner-content {
position: relative;
z-index: 1;
font-family: sans-serif;
}
/* --- FLÈCHE DE DÉFILEMENT --- */
.scroll-down-arrow {
position: absolute;
bottom: 30px; /* Distance du bas */
left: 50%;
transform: translateX(-50%);
z-index: 10; /* S'assure qu'elle est bien visible */
text-decoration: none;
transition: opacity 0.3s;
animation: bounce LongArrow 2s infinite; /* Lien vers l'animation */
}
.scroll-down-arrow:hover {
opacity: 1;
}
.scroll-down-arrow svg {
filter: drop-shadow(0px 2px 5px rgba(0,0,0,0.5)); /* Ombre pour lisibilité sur vidéo */
}
/* Animation de rebond spécifique */
@keyframes bounceLongArrow {
0%, 20%, 50%, 80%, 100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-15px);
}
60% {
transform: translateX(-50%) translateY(-7px);
}
}
.mute-btn {
position: absolute;
bottom: 30px;
right: 30px; /* À l'opposé de la flèche ou sur le côté */
z-index: 10;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
width: 45px;
height: 45px;
cursor: pointer;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s, transform 0.2s;
backdrop-filter: blur(5px); /* Effet de flou moderne */
}
.mute-btn:hover {
background: rgba(255, 255, 255, 0.4);
transform: scale(1.1);
}
.mute-btn svg {
pointer-events: none; /* Évite les bugs de clic sur l'icône */
}
.bandeau-video-modele-banner-overlay {
position: absolute;
bottom: 10%;
left: 60px;
z-index: 5;
display: flex;
align-items: end;
gap: 15px;
color: white;
opacity: 0; /* Caché par défaut */
transition: opacity 0.8s ease-in-out;
pointer-events: none;
}
/* La petite barre verticale à gauche du texte */
.line {
width: 4px;
height: 220px;
background-color: #00a0dc; /* Votre couleur bleue */
}
.bandeau-video-modele-banner-content {
display: flex;
flex-direction: column;
text-align: start
}
.bandeau-video-modele-banner-content-logo {
max-width:100%;
width:440px;
margin-top:25px
}
.bandeau-video-modele-banner-content-subtitle {
font-size:1.3rem;
margin-top:15px;
margin-bottom:5px
}
/* Classe activée par le JS */
.bandeau-video-modele-banner-overlay.show {
opacity: 1;
}
@media only screen and (max-width:992px) {
.bandeau-video-modele-banner-content-logo {
max-width: 100%;
width: 400px
}
}
@media only screen and (max-width:640px) {
.line {
height: 200px;
}
.bandeau-video-modele-banner-content-logo {
max-width: 100%;
width: 300px
}
.bandeau-video-modele-banner-content-subtitle {
font-size: 1.1rem;
margin-top: 10px;
margin-bottom: 0
}
.bandeau-video-modele-banner-overlay {
left: 25px;
}
}
@media only screen and (max-width:480px) {
.bandeau-video-modele-banner-overlay {
bottom: 15%;
}
.line {
height: 185px;
}
.bandeau-video-modele-banner-content-logo {
max-width: 100%;
width: 240px
}
.bandeau-video-modele-banner-content-subtitle {
font-size: 1rem;
margin-top: 5px;
margin-bottom: 0
}
.bandeau-video-modele-banner-overlay {
left: 20px;
}
}