/* Général */ body{color: #FFF; font-family: "Urbanist"; font-size: 16px; background:#222222;} a{color:inherit; text-decoration:none;} a:hover{color:inherit; text-decoration:none;} @media all and (min-width:1350px){ .container, .container-sm, .container-md, .container-lg, .container-xl {max-width: 1350px;} } @media all and (min-width:1500px){ .container, .container-sm, .container-md, .container-lg, .container-xl {max-width: 1500px;} } .grecaptcha-badge { visibility: hidden; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{--bs-gutter-x:1.2rem;} input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;} /* Firefox */ input[type=number] {appearance: textfield;} hr{border:0; border-top:1px solid #404040; opacity: 1;} .form-control{background: #222; color: #7C7C7C; font-size: 16px; font-weight: 400; border-radius: 2px; border: 1px solid #434343; padding:11px 16px;} .form_recap_data{background: #404040; color: #B6B6B6; font-size: 17px; font-style: normal; font-weight: 300; line-height: normal; border:0; border-radius: 0; padding:16px 30px 16px 30px;} .btn-site{line-height: 1.5; position:relative; display:inline-block; padding: 11px 32px; border-radius: 2px; border: 1px solid #434343; background: #353535; font-size: 16px; font-weight: 400; color:#FBFBFB; transition:ease-in-out 0.3s;} .btn-site:hover{background: #1A1A1A;} .btn-site.active{background: #FBFBFB; color:#141414;} .btn-site-simple{position:relative; background: #ED1C24; border-radius: 0px; padding:14px 28px 14px 28px; color: #FFF; font-size: 17px; transition:ease-in-out 0.5s; display: inline-block; border:0; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);} .btn-site-simple:hover{background: #C30D25;} .btn-link{color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: 16%; /* 2.56px */ text-underline-position: from-font;} .underline{position:relative; margin-bottom:16px; padding-bottom:16px;} .underline::after{position:absolute; content:""; width:150px; height:2px; background:#ED1C24; bottom:0; left:0;} .underline.center::after{left:50%; transform:translateX(-50%);} .underline.end::after{right:0; left:unset;} .ui-widget-content{border:0 !important; height:4px; background:#434343 !important;} .ui-slider-handle{height:16px !important; width:18px !important; border-radius:2px !important; border:0px solid #434343 !important; background:#FFF !important;} .ui-slider-horizontal .ui-slider-handle {top: -6px !important;} .ui-widget-header {background:#434343 !important;} .slider-range-wrap {height:50px; padding-top:20px; padding-left:11px; padding-right:11px; min-width: 350px;} .ui-slider-horizontal{height:3px !important;} .ui-slider .ui-slider-range{background-color:#FBFBFB !important;} .slider-range-value{display:flex; justify-content: space-between;} .slider-range-value .item{color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} .slider-range-value span{display:block; font-weight: 500; font-size: 12px; color: #a8a8a8;} .custom-file { position: relative; display: inline-block; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin-bottom: 0; } .custom-file-input {position: relative; z-index: 2; width: 100%; height: calc(1.5em + 0.75rem + 2px); margin: 0; overflow: hidden; opacity: 0;} .custom-file-input:focus ~ .custom-file-label { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);} .custom-file-input[disabled] ~ .custom-file-label, .custom-file-input:disabled ~ .custom-file-label { background-color: #e9ecef;} .custom-file-input:lang(en) ~ .custom-file-label::after { content: "Browse";} .custom-file-input ~ .custom-file-label[data-browse]::after { content: attr(data-browse); } .custom-file-label { position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: calc(1.5em + 0.75rem + 2px); padding: 0.375rem 0.75rem; overflow: hidden; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; border: 1px solid #ced4da; border-radius: 0.25rem;} .custom-file-label::after { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: block; height: calc(1.5em + 0.75rem); padding: 0.375rem 0.75rem; line-height: 1.5; color: #495057; content: "Browse"; background-color: #e9ecef; border-left: inherit; border-radius: 0 0.25rem 0.25rem 0; } .custom-file-input ~ .custom-file-label::after {background-image:url('../images/icon_upload.png'); background-position:center center; background-repeat:no-repeat; background-color: #1D1D1B; content: ""; border-radius:0; height:35px; width:35px; } .suttel-select .filter-option-inner-inner{ font-weight: normal; font-size: 16px; text-align: left; color:#FFF;} .suttel-select .form-control{background: #222; color: #7C7C7C; font-size: 16px; font-weight: 400; border-radius: 2px; border: 1px solid #434343; padding:11px 16px;} .suttel-select .dropdown-item {padding: 4px 16px; display: block; line-height:30px; color:#FFF;} .suttel-select .dropdown-item.active, .suttel-select .dropdown-item:active {color:#717171; background: transparent;} .suttel-select .btn.show{background-color: #222; color:#FFF;} .suttel-select .btn.show .filter-option-inner-inner{color:#FFF;} .suttel-select .dropdown-menu{background-color: #1E1E1E; color:#FFF; border: 1px solid #434343; border-radius: 0;} .suttel-select .dropdown-item:focus, .suttel-select .dropdown-item:hover{background-color: #1A1A1A; } .dropdown .dropdown-toggle.btn{background:#222; border:1px solid #434343; border-radius:0px; padding:14px 40px 13px 20px; display:flex; color:#FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} .dropdown .dropdown-toggle.btn:after{border:0; top:50%; transform: translatey(-50%); right:20px; content:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgOCAxMiIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTEgMC41TDYuNSA2TDEgMTEuNSIgc3Ryb2tlPSIjRkJGQkZCIi8+Cjwvc3ZnPg=='); position:absolute;} .dropdown .dropdown-toggle.show.btn:after{content:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTMgOCIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTEyIDAuNUw2LjUgNkwxIDAuNSIgc3Ryb2tlPSIjRkJGQkZCIi8+Cjwvc3ZnPg==');} .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover{color:#FFF !important;} .suttel-select-gray .filter-option-inner-inner{ font-weight: normal; font-size: 16px; text-align: left; color:#FFF;} .suttel-select-gray .form-control{display:none;} .suttel-select-gray .dropdown-item {padding: 4px 16px; display: block; line-height:30px; color:#FFF;} .suttel-select-gray .dropdown-item.active, .suttel-select-gray .dropdown-item:active {color:#717171; background: transparent;} .suttel-select-gray .btn.show{background-color: #222; color:#FFF;} .suttel-select-gray .btn.show .filter-option-inner-inner{color:#FFF;} .suttel-select-gray .dropdown-menu{background-color: #1E1E1E; color:#FFF; border:1px solid #434343; border-radius:0;} .suttel-select-gray .dropdown-item:focus, .suttel-select-gray .dropdown-item:hover{background-color: #353535; } .suttel-select-gray.dropdown .dropdown-toggle.btn{background:#353535; border:1px solid #434343; border-radius:0px; padding:16px 40px 16px 20px; display:flex; color:#FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} .suttel-select-gray.dropdown .dropdown-toggle.btn:hover{background:#222;} .suttel-select-gray.dropdown .dropdown-toggle.btn:after{border:0; top:50%; transform: translatey(-50%); right:20px; content:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgOCAxMiIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTEgMC41TDYuNSA2TDEgMTEuNSIgc3Ryb2tlPSIjRkJGQkZCIi8+Cjwvc3ZnPg=='); position:absolute;} .suttel-select-gray.bootstrap-select > .dropdown-toggle.bs-placeholder, .suttel-select-gray.bootstrap-select > .dropdown-toggle.bs-placeholder:active, .suttel-select-gray.bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .suttel-select-gray.bootstrap-select > .dropdown-toggle.bs-placeholder:hover{color:#FFF !important;} .suttel-select-gray.dropdown .dropdown-toggle.btn.show::after{transform: translatey(-50%) rotate(90deg); transition: all 0.5 ease;} .radio {display: block; position: relative; padding-left: 35px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none} .radio input { position: absolute; opacity: 0; cursor: pointer;} .checkround {position: absolute; top: 4px; left: 0; height: 14px; width: 14px; background-color: #fff ; border-color:#EFEFEF; border-style:solid; border-width:1px; border-radius: 50%; } .radio input:checked ~ .checkround {background-color: #fff; } .checkround:after { content: ""; position: absolute; display: none;} .radio input:checked ~ .checkround:after {display: block; } .radio .checkround:after { left: 1px; top: 1px; width: 10px; height: 10px; border-radius: 50%; background:#1D1D1B;} .radio span.wrap{position:relative; padding-left:20px;} .radio span.wrap .checkround{top:2px; position:absolute; padding-left:0;} .badge{border-radius:50px;} .bg-vert{background-color:#C4D9C5; color:#007409;} .bg-rouge{background-color:#E4C5CA; color:#AF0721;} /* The check */ .check { display: block; position: relative; padding-left: 25px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .check input { position: absolute; opacity: 0; cursor: pointer; } .checkmark {position: absolute; top: 6px; left: 0; height: 14px; width: 14px; background-color: #222222 ; border-color:#434343; border-style:solid; border-width:1px;} .check input:checked ~ .checkmark { background-color: #fff ; } .checkmark:after { content: ""; position: absolute; display: none; } .check input:checked ~ .checkmark:after { display: block;} .check .checkmark:after { left: 0px; top: 0px; width: 10px; height: 10px; background-color:#FFF;} .cust-btn{ margin-bottom: 10px; background-color: #FFF; border-width: 0px; color: #fff;} .cust-btn:hover{border-color: #f8204f; background-color: #fff; color: #1D1D1B; border-radius: 20px; transform-style: 2s;} nav.pages{width:100%; display:flex; justify-content:center; padding:0 15px;} .pagination{text-align:center; margin-top:16px; display:inline-block;} .pagination > li {display:inline-block; margin:0 4px; border-radius:2px;} .pagination > li > a, .pagination > li > span{display:inline-block; color:#FBFBFB; line-height:35px; text-align:center; width:35px; height:35px;} .pagination > li.disabled > a{cursor: not-allowed; opacity:0.5;} .pagination > li.first > a, .pagination > li.last > a{color:#FBFBFB; background:none;} .pagination > li.first {justify-content: start;} .pagination > li:hover > a{background-color:#1A1A1A; color:#FBFBFB; } .pagination > .active > a{background-color:#FBFBFB; color:#141414; } .breadcrumbs{font-size: 12px; color: #a8a8a8;line-height: 21px; text-align: left;margin:10px 0;} .breadcrumbs ol{display:block; margin:0; padding:0; list-style-type: none; list-style-position: inside;} .breadcrumbs li{display:inline-block; position:relative; padding-right:15px; margin-right:8px;} .breadcrumbs li:last-child{padding-right:0px;} .breadcrumbs li:after{content:""; position:absolute; right:0px; top:6px; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1LjAzOSIgaGVpZ2h0PSI5LjI4MyIgdmlld0JveD0iMCAwIDUuMDM5IDkuMjgzIj4KICA8cGF0aCBpZD0iVHJhY8OpXzI0IiBkYXRhLW5hbWU9IlRyYWPDqSAyNCIgZD0iTS4zNjUsMEEuMzczLjM3MywwLDAsMCwuMzE3LjAxMy4zODYuMzg2LDAsMCwwLC4xMjQuNjc3TDQuMzY5LDQuOTIxYS4zODYuMzg2LDAsMCwwLC41NTUsMEw5LjE2OC42NzdBLjM5Mi4zOTIsMCwxLDAsOC42MTQuMTIyTDQuNjQ2LDQuMDg5LjY3OS4xMjJBLjM4Ny4zODcsMCwwLDAsLjM2NSwwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCA5LjI4Mykgcm90YXRlKC05MCkiIGZpbGw9IiNhOGE4YTgiLz4KPC9zdmc+Cg==') no-repeat; background-size: cover; width:5px; height:9px;} .breadcrumbs li:last-child:after{content:""; display:none;} .breadcrumbs li a:hover{text-decoration:underline;} .dropzone{background:#222 !important; border: 1px dashed #434343 !important; color: #7C7C7C !important; text-align: center; font-size: 16px; font-style: normal; line-height: normal; padding:8 16px !important; min-height:unset !important;} .dropzone .dz-message{margin:0 !important;} .dropzone u{color: #FBFBFB; font-size: 16px; font-style: normal; line-height: normal; text-decoration-line: underline;} @media (min-width: 576px) { .modal-dialog { max-width: 550px; margin: 1.75rem auto; } } .h1{color:#FBFBFB; font-family: Urbanist; font-size: 32px; font-style: normal; font-weight: 600; line-height: normal; margin:0; padding:0;} .h2{color:#FBFBFB; font-family: Urbanist; font-size: 24px; font-style: normal; font-weight: 600; line-height: normal; margin:0; padding:0;} .h3{color:#FBFBFB; font-family: Urbanist; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; margin:0; padding:0;} .color-secondary{color:#7C7C7C} .bg_dark{background: #141414;} .bg_gray{border: 1px solid #434343; background:#2A2A2A;} .bg_gradient{background: linear-gradient(180deg, #0C0C0C 0%, #222 100%);} .tablehead{color:#A8A8A8; background:#1D1D1B; margin:-30px -30px 30px -30px; padding:15px 55px; border-radius:5px 5px 0 0;} .dark_box{border-radius: 2px; border: 1px solid #434343; background: #141414; padding:32px;} .gray_box{border-radius: 2px; border: 1px solid #434343; background: #222; padding:32px;} .gray_text{color:#7C7C7C;} header{z-index: 999; position:fixed; top:0; left:0; width:100%;} /* Menu PC */ #menu{transition: all 0.5s ease; position:relative; padding:24px 0;} #menu.fixed{background:#141414;} #menu::before{position: absolute; top:0; left:0; width:100%; height:100vh; background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 74.19%, rgba(0, 0, 0, 0.80) 100%); content: ""; pointer-events: none;} #menu.fixed::before{display: none;} #menu nav{margin-bottom:0px;} #menu .navbar-nav .nav-link{color:#FBFBFB; font-size: 16px; font-style: normal; font-weight: 400; width:fit-content; transition: 0.1 all ease;} #menu .navbar-nav {display:flex; align-items:center; } #menu .navbar-brand{padding:0 20px;} #menu .navbar-brand img{width:114px;} #menu .nav-item{padding:0 8px; position: relative;} #menu .nav-item:hover .nav-link{color:#717171;} /* Sous-menu MotoPark */ #menu .nav-item.dropdown{position: relative;} #menu .nav-item.dropdown .dropdown-toggle::after{display: none;} #menu .nav-item.dropdown:hover .dropdown-menu{display: block;} #menu .motopark-submenu{ position: fixed; top: 108px; /* Hauteur du menu principal */ left: 0; right: 0; width: 100vw; background: #1a1a1a; padding: 0; margin: 0; z-index: 1001; display: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } /* Zone de transition invisible pour éviter la disparition du sous-menu */ #menu .motopark-submenu::before{ content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 20px; background: transparent; } /* Overlay pour opacifier le reste du site */ .motopark-overlay{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 999; display: none; cursor: pointer; } #menu .motopark-submenu ul{ display: flex; justify-content: flex-end; align-items: center; margin: 0; padding: 0 16px 0 0; list-style: none; margin: 0 auto; } #menu .motopark-submenu .dropdown-item{ color: #fbfbfb; font-family: "Urbanist", sans-serif; font-size: 16px; font-weight: 400; padding: 16px 16px; border: none; background: transparent; transition: all 0.3s ease; text-decoration: none; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; white-space: nowrap; } #menu .motopark-submenu .dropdown-item:hover{ background: #222; color: #fbfbfb; text-decoration: none; } #menu .motopark-submenu .dropdown-item:active{ background: #222; color: #fbfbfb; } /* Séparateur vertical entre les éléments */ #menu .motopark-separator{ width: 1px; height: 30px; background: #434343; margin: 0 4px; display: block; flex-shrink: 0; } @keyframes fadeInDown { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } #vehicule #menu{background:#141414;} #vehicule #menu::before{display: none;} /* Nouveau design menu PC 2025 */ #menu .content_menu_pc{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; z-index: 9999; align-items: stretch; display: none; /* Optimisations pour les animations */ will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } #menu .content_menu_pc_element{ display: flex; width: 100%; height: 100%; flex-direction: row; background-color: #141414; } #menu .content_menu_pc_element.show{ display: flex; } /* Image de fond à gauche */ #menu .content_menu_pc_background{ flex: 1; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; background-color: #141414; background-image: url('../images/menu-bg-default.jpg'); transition: opacity 0.4s ease-out; } #menu .content_menu_pc_background::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 2; } /* Colonne de navigation centrale */ #menu .content_menu_pc_navigation{ background: #141414; display: flex; flex-direction: column; padding: 64px; overflow-y: auto; } /* Header avec logo et fermeture */ #menu .header_ssmenu_titre{ position: absolute; top: 24px; left: 24px; right: 24px; display: flex; align-items: center; justify-content: space-between; height: 65px; z-index: 10; } #menu .header_ssmenu_titre_texte{ padding: 0; } #menu .header_ssmenu_titre_texte img{ height: 45px; width: auto; } #menu .header_ssmenu_titre_close{ background: transparent; border: none; padding: 8px; cursor: pointer; display: block; align-items: center; justify-content: center; width: 40px; height: 40px; position: absolute; top:12px; right: 12px; z-index: 9999; } #menu .header_ssmenu_titre_close img{ width: 20px; height: 20px; filter: brightness(0) invert(1); } /* Navigation links */ #menu .header_ssmenu{ display: flex; flex-direction: column; gap: 24px; flex: 1; padding: 0; } #menu .header_ssmenu .nav{ padding: 0; margin: 0; list-style: none; } #menu .header_ssmenu .nav-item{ padding: 0; margin-bottom: 24px; } #menu .header_ssmenu .nav-link{ font-family: 'Urbanist', sans-serif; font-size: 32px; font-weight: 400; color: #FBFBFB; text-decoration: none; padding: 0; margin: 0; border: none; display: block; line-height: normal; transition: color 0.3s ease; } #menu .header_ssmenu .nav-link:hover{ color: #7C7C7C; } /* Colonne réseaux sociaux à droite */ #menu .content_menu_pc_social{ width: 75px; background: #0F0F0F; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 14px 14px 14px 0px; gap: 16px; } #menu .social_icon{ width: 47px; height: 47px; background: #222222; border: 1px solid #434343; border-radius: 2px; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: background-color 0.3s ease; color: #FBFBFB; font-size: 24px; } #menu .social_icon_youtube i{ font-size: 18px; margin-left: -7px; } #menu .social_icon:hover{ background: #1A1A1A; color: #FBFBFB; } #menu .social_separator{ width: 27px; height: 1px; background: #434343; margin: 8px 0; } #content_menu_mobile{overflow-y: scroll;} /* Responsive Design pour le nouveau menu PC */ @media (max-width: 1200px) { #menu .content_menu_pc_navigation{ width: 400px; padding: 48px; } #menu .header_ssmenu .nav-link{ font-size: 28px; } } @media (max-width: 992px) { #menu .content_menu_pc_navigation{ width: 350px; padding: 32px; } #menu .header_ssmenu .nav-link{ font-size: 24px; } #menu .content_menu_pc_social{ width: 60px; padding: 12px; } #menu .social_icon{ width: 40px; height: 40px; font-size: 20px; } } @media (max-width: 768px) { /* Sur mobile, on cache le menu PC et on utilise le menu mobile existant */ #menu .content_menu_pc{ display: none !important; } /* Le menu mobile reste inchangé */ .main-menu{ display: block; } } /* Menu Mobile */ .main-menu{ width: 100%; height: 100%; opacity: 0; visibility: hidden; /* Optimisations pour les animations */ will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .nav-open .main-menu {opacity: 1; visibility: visible; background: #000; width:100%; height:100%; z-index:9999;} .main-menu .nav .nav-item {border-bottom:1px solid #404040; margin:0 24px; padding:16px 0 !important;} .main-menu .nav li a{font-weight: 500; font-size: 20px; color: #fff; padding:0} .main-menu .nav.sousmenu_mobile {margin-top:35px; padding-top:35px; border-top:1px solid #41556A;} .main-menu .nav.sousmenu_mobile li a{font-family: "Gotham"; font-weight: 500; font-size: 16px; text-align: center; color: #fff; text-transform: none; line-height:1.3em;} .main-menu .nav.sousmenu_mobile li a img{vertical-align: -1px;} .nav-button{border-radius:5px; font-weight: 500; font-size: 20px; color: #1d1d1b;} .main-menu .nav li{opacity: 0; -webkit-transform: translateY(-40px); transform: translateY(-40px); -webkit-animation-timing-function: cubic-bezier(.45,.005,0,1); -moz-animation-timing-function: cubic-bezier(.45,.005,0,1); -o-animation-timing-function: cubic-bezier(.45,.005,0,1); animation-timing-function: cubic-bezier(.45,.005,0,1);} .nav-open .main-menu .nav li{ opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform .2s,opacity .2s; transition: transform .2s,opacity .2s;} .nav-button{position:relative; z-index:1111; display:block; width:130px; padding:12px; text-align:right;} .nav-button .nav-button-title{text-align: center; color:#FFF;} .nav-button #nav-icon3{width:24px;height:22px;display:inline-block;position:relative;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out;cursor:pointer;} .nav-button #nav-icon3 span{display:block;position:absolute;height:3px;width:100%;background:#2C3E50;border-radius:9px;opacity:1;left:0;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out} .nav-button #nav-icon3 span:nth-child(1){top:0} .nav-button #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3){top:7px} .nav-button #nav-icon3 span:nth-child(4){top:14px} .nav-open #nav-icon3 span{background:#FFF;} .nav-open #nav-icon3 span:nth-child(1){top:9px;width:0;left:50%;} .nav-open #nav-icon3 span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)} .nav-open #nav-icon3 span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)} .nav-open #nav-icon3 span:nth-child(4){top:9px;width:0;left:50%} .content_menu_mobile{position:relative;} .content_menu_mobile_close svg{margin-right:16px; } .main-menu .flex-center{display:flex;justify-content:center;align-items:start;height:100%; padding:2rem; padding-top:80px;} /* Homepage */ #slider{background: #000;} #slider .owl-dots {margin-top: 10px; position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);} #slider .owl-dots .owl-dot span{width:195px; height:2px; background:#434343; border-radius:9px;} #slider .owl-dots .owl-dot.active span{background: #FFF;} .owl-theme .owl-dots .owl-dot span{margin:5px 2px !important;} .home_slide_item{width:100%; height:100vh; position:relative; z-index:1;} .home_slide_item_image{width:100%; height:100%; } .home_slide_item_image:before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: rgba(24, 24, 24, 0.4); z-index:2;} .home_slide_item_image > picture{width:100%; height:100%; position:absolute; top:0; left:0; object-position: center center; object-fit:cover;} .home_slide_item_image > picture > img{width:100%; height:100%; position:absolute; top:0; left:0; object-position: center center; object-fit:cover;} .home_slide_item_image > video{width:100%; height:100%; position:absolute; top:0; left:0; object-position: center center; object-fit:cover;} #home .home_slide_item_image:before{background:none;} .home_slide_item_title{position:absolute; bottom:66px; left:50%; transform: translateX(-50%); width:100%; z-index:3; text-align:center; max-width: 490px;} .home_slide_item_title h2{color: #FBFBFB; font-size: 48px; font-style: normal; font-weight: 600; line-height: normal;} .home_slide_item_title h2 img{width:unset !important; display:inline-block !important;} .home_slide_item_title h3{color: #E1E1E1; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} /* Positionnement des dots par rapport au titre */ #slider .owl-dots { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); } #actualites .home_slide_item_title h5{color: #7C7C7C; text-align: center; font-family: "Proxima Nova"; font-size: 16px; font-style: normal; font-weight: 400;line-height: normal;} #actualites .home_slide_item_title h2{color: var(--White, #FBFBFB); text-align: center; font-family: "Proxima Nova"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} #actualite .home_slide_item_title h5{color: #7C7C7C; text-align: center; font-family: "Proxima Nova"; font-size: 16px; font-style: normal; font-weight: 400;line-height: normal;} #actualite .home_slide_item_title h2{color: var(--White, #FBFBFB); text-align: center; font-family: "Proxima Nova"; font-size: 32px; font-style: normal; font-weight: 400; line-height: normal;} #actualite .home_slide_item_title{max-width:70%;} #home_marques{padding:40px 0;} .marque_item {text-align:center;} .marque_item_wrap{display:block} .marque_item img{width: auto; height: auto; object-fit: contain; margin:0 auto; transition: filter 0.5s ease-in-out; } .marque_item.marque_item_home img{max-height:55px; max-width:170px;} .marquee-container {overflow: hidden; width: 100%; position: relative;} .marquee-content { display: flex; align-items: center; width: max-content; position: relative; left: 0; z-index: 99;} .marque_item { margin-right: 128px; flex-shrink: 0;} .marque_item:last-child { margin-right: 0; } .grid-container {display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 250px; gap: 10px; } #motopark .grid-container {display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: 130px; gap: 10px; } .item1 {grid-column: span 2; grid-row: span 2; cursor:default;} .grid-item {display: flex; padding: 64px 32px; flex-direction: column; justify-content: center; gap: 32px; flex: 1 0 0; align-self: stretch; border: 1px solid #434343; background: #222; transition: all 0.5s ease;} #motopark .grid-item {padding: 33px 16px;} .grid-item:hover {cursor: pointer; background:#1A1A1A;} .grid-item.item1:hover {cursor: default; background:#222222;} #home_nouveautes{background-color: #141414;} #home_gamme_slides .home_gamme_slide_item_image{transform: scale(1); max-height:300px;} #home_gamme_slides .home_gamme_slide_item_image img{max-width:100%; max-height:300px; object-fit:contain;} #home_gamme_slides {opacity:1; padding-bottom:44px;} #home_gamme_slides .middle .home_gamme_slide_item_image{transform: scale(1.1);} #home_gamme_slides .middle .home_gamme_slide_item_info_liengamme{opacity:1; } #home_gamme_slides .owl-item .home_gamme_slide_item_info{opacity:1; border-top:1px solid #2A2A2A;; border-bottom: 1px solid #2A2A2A; border-color: #2A2A2A; padding:24px 0; margin:24px 0; transition: all 0.3s ease;} #home_gamme_slides .owl-item .home_gamme_slide_item_info_image{max-width:60px; max-height:60px;} #home_gamme_slides .owl-item .home_gamme_slide_item_info_vehicule{margin-left:8px;} #home_gamme_slides .owl-item .home_gamme_slide_item_info_vehicule_marque{color: #7C7C7C; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} #home_gamme_slides .owl-item .home_gamme_slide_item_info_vehicule_modele{color: #FBFBFB; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal;} #home_gamme_slides .owl-item:not(.middle) .home_gamme_slide_item_info{opacity:0;} #home_gamme_slides .owl-item:not(.middle) {filter: blur(4px); transition: filter 0.3s ease; position: relative; } #home_gamme_slides .owl-item.previous {transform: translateX(140px) scale(0.7);} #home_gamme_slides .owl-item.next {transform: translateX(-140px) scale(0.7);} #home_gamme_slides .owl-item.previous:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to right, rgba(20, 20, 20, 1) 40%, rgba(20, 20, 20, 0) )} #home_gamme_slides .owl-item.next:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to left, rgba(20, 20, 20, 1) 40%, rgba(20, 20, 20, 0) 90% );} #home_gamme_slides .owl-item {transition: transform 0.3s ease;} #home_gamme_slides .owl-dots {margin-top: 10px; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);} #home_gamme_slides .owl-dots .owl-dot span{width:65px; height:2px; background:#2A2A2A; border-radius:0;} #home_gamme_slides .owl-dots .owl-dot.active span{background: #E1E1E1;} #home_pointsvente_maps{overflow: hidden;} #home_recherche{background:url('../images/bg_occasions.jpg') center center no-repeat; background-size: cover;} .home_actualites {padding:30px 0;} .home_actualite_item{width:100%; overflow:hidden; position:relative; color:#FFF; max-height: 475px; background:#000;} .home_actualite_item:after{width: 100%; height: 70%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 90%); position:absolute; bottom:0; content:""; display:block; z-index: 1;transform: translateY(100px); transition: all 0.5s ease-in-out;} .home_actualite_item a{display: block;} .home_actualite_item img{object-fit: cover; transition: all .5s; width:100%; height:100%;} .home_actualite_item_titres{position:absolute; bottom:0px; left:0; transition: all .5s; padding:0 16px; z-index: 2; max-width:75%;} .home_actualite_item_categorie{font-family: "Proxima Nova"; color:#7C7C7C; font-size: 16px; font-weight: 400;} .home_actualite_item_titre{font-family: "Proxima Nova"; color: #FBFBFB; font-size: 16px; font-weight: 400; position:relative; margin-bottom:16px;} .home_actualite_item_lien{width:100%; text-transform:uppercase; margin-bottom:20px;} .home_actualite_item_lien .btn-co2{color:#fff;} .home_actualite_item:hover img{scale:1.05;} .home_actualite_item:hover:before{transform: translateY(0);} .home_services {padding:30px 0;} .home_service_item{width:100%; overflow:hidden; position:relative; color:#FFF; border:1px solid #434343;} .home_service_item:before{width: 100%; height: 313px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 10%, #000 100%); position:absolute; bottom:0; content:""; display:block; z-index: 1; transform: translateY(100px); transition: all 0.5s ease-in-out;} .home_service_item img{object-fit: cover; transition: all .5s; width:100%; height:320px;} .home_service_item_titres{position:absolute; width:100%; bottom:0px; left:0; transition: all .5s; padding:15px 25px 0 25px; z-index: 2; text-align: center;} .home_service_item_titre{color: #FFF; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; margin-bottom:36px;} .home_service_item:hover img{scale:1.05;} .home_service_item:hover:before{transform: translateY(0);} /* Ajout des règles pour l'affichage alterné */ @media (min-width: 1200px) { #home_services .col-xl-4:nth-child(-n+4) { width: 25%; } #home_services .col-xl-4:nth-child(n+5):nth-child(-n+6) { width: 50%; } #home_services .col-xl-4:nth-child(n+7):nth-child(-n+10) { width: 25%; } #home_services .col-xl-4:nth-child(n+11):nth-child(-n+12) { width: 50%; } #services #home_services .col-xl-4:nth-child(-n+2) { width: 50%; } #services #home_services .col-xl-4:nth-child(n+3):nth-child(-n+6) { width: 25%; } #services #home_services .col-xl-4:nth-child(n+7):nth-child(-n+8) { width: 50%; } #services #home_services .col-xl-4:nth-child(n+9):nth-child(-n+12) { width: 25%; } } #concession .home_service_item_titre{font-size:15px;} #service_slider #slider .owl-dots{bottom:-50px;} #service_slider{padding-bottom:50px;} #service_slider .home_slide_item_image{min-height:450px;} #home_concessions{background: #141414;} #home_concessions .h3{color: #7C7C7C;} .pointsdevente_wrap_list{overflow-y:auto;} /* Design de la barre de défilement */ .pointsdevente_wrap_list::-webkit-scrollbar { width: 8px; } .pointsdevente_wrap_list::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 4px; } .pointsdevente_wrap_list::-webkit-scrollbar-thumb { background: #434343; border-radius: 4px; transition: background 0.3s ease; } .pointsdevente_wrap_list::-webkit-scrollbar-thumb:hover { background: #fbfbfb; } /* Pour Firefox */ .pointsdevente_wrap_list { scrollbar-width: thin; scrollbar-color: #fbfbfb #1a1a1a; } .pointsdevente_legende{display:flex; flex-direction:row; gap:24px; margin-top:16px} .pointsdevente_legende_item{display:flex; align-items:center; gap:4px;} .pointsdevente_legende_item img{max-height:50px;} .liste_pointsvente_concession{position:relative; color:#FBFBFB; border-radius: 2px; border: 1px solid #434343;background: #2A2A2A; gap: 8px; margin-bottom:16px; transition: 0.5s all ease-in-out;} .liste_pointsvente_concession:hover{border: 1px solid #434343; background: #1A1A1A;} .liste_pointsvente_concession_logo{height:100%; max-height:76px;} .liste_pointsvente_concession_logo img{max-height:76px;} .liste_pointsvente_concession_infos{border-left:1px solid #434343; padding: 24px; margin-left:0;} .liste_pointsvente_concession_nom{font-size: 16px; font-weight: 600; margin-bottom:16px;} .liste_pointsvente_concession_adresse{font-size: 14px; font-weight: 400; margin-bottom:16px;} .liste_pointsvente_concession_telephone{font-size: 14px; font-weight: 400;} .liste_pointsvente_concession_lien{position:absolute; bottom:24px; right:24px;} .concessions_wrap{position:relative;} #concessions_liste{position:absolute; top:30px; left:45px; width:400px; height:calc(100% - 60px); z-index:1000; background:#0C0C0C; padding:40px 20px; overflow-y: auto;} .concessions_liste_search{position:relative; z-index:1;} .concessions_liste_search:after{content:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARySURBVHgBtVhbVuJAEO1Ejo+vYQcwKxhcAfDn8wArAFagroCwAnEF4gqA4/OPuANcgXEHmS/fOveGChNjupN4tM4JnZDq6tvVVberY6mccnl5WbYsq/H+/l7BYw1tXMXH5dm27d7f309arZancoiVVfH8/LyDQdoEgMsFKPfx8fEGA/pRvdFoVFxZWfkD3crb21sTfxVxDba2tk6yjJMKCB6hF44FxBCGr1UOoUfR9NC/htZJA6YFxJkuLy87APEHnujmdX0SME4MtzPY68c9awTEznD3CLfj7e3tvsowGPSL0J2l6WLpe5hkB6DqSZO0VfJMprgGWcCItBEzjSyKtAnbfcTZFKtQViZAXCaCwWydnZ2dTEH4FQGoIUEhJEYcUwuIMQPF4U+CiYJCM4anetH/FzHEtMbatpEFdZVRJMVruG0Hxizr6OHhwcuTABcXF9PX19f+7u6uy+fCApll9RhoWYyQCtQ8lctox2rONeSnBgHivU9PZ+EejNtdWlqa4vZ38MwfegdNFW7smjqLRwa4Lak5p1wLwMDtm5ubfbFXwUCHAOU9PT0d6FI8MsGA5zgBW1DuoWM/DQxijNl3y2U1ESTTX5beY5944Mbl5eWFnuzw3hYm9dPWnQGvMvJSBBh1x+h7aNIL4weeLdmyUY5NHRB4TTK2Dgxo4o7LozSg0Ld8enpaUwbh3oimWYCxGh4GKcp70DvQvZcU1gqzCIHLOHN1Oli2a27ejKEyd22dojB3pm1BJ1wSeskUSwA0g06NaV9MyYKyMsxMMoqbJtO+qwPOsFhbW6vidpL0nhgQGv95KDpAdF+SQqwYprb854UcI2Aqkft1scP6qRS1g2Uvw04l/A8kehJNJvT/DAhG/GiA0tVcMvUNAjtBNRk+I/s+2f0ECOTmRTvBjX/RVEPSSxikS89IKbsg1nigw04RemMTf9FGgW5isOniCAHvgp3JI4lZJjGzrtKlBltHupcS8D6zzC0UChWdogD10njEJIxLlUK+q6ur1PFIjDMAqpoMRnhEN2AHS9LWvUdc0sOOMgiJl/uZjZ+JFOBaEWq/w8COZsASg18lg3UwoVna4QAYmthPJ7YEsUpbEqz/PrcZHSgdGDSN5+dn4/4Xki+X1BZ0J6RtUyfGEuslgPrFokriQjcAayLWOCXMup5WfkAYDsH2tagYMcit7iQQl6urqwZIbl/NCzNXCTFCSP9N4TEnyxkuPFRANyjQFjyEde4ivcm0qVXjxsYG6X8ixsjGbH0EPo/P/QweiQrHdBLfwEuHeWIkFG4rpizTCcc6Ozv7UCt9OHXwRMnAhVJu418AExwq4gH/ARBdDaUWAtz5SVACpicx62sBUUgDUK4TVNblQ4BPYDzTRwixuadLIOPHBjnEVb7rYwOaY5IklynXx4aohO4lrfNkkheYnOHasht00qgg1wcr1ta4GGdjDHCDAmuW9MGKGyVrdSx7VcqS4bd9sIpL+EmPA6p5ecs6J3gXft6jN8FJMywPj013Kof8AxFz3OoaySLBAAAAAElFTkSuQmCC'); position:absolute; top:10px; right:20px; z-index:2;} .concessions_liste_item{margin-bottom:40px;} .concessions_liste_item_titre{color: #FFF; font-size: 20px; font-style: normal; font-weight: 500; line-height: normal; width:100%; border-bottom:1px solid #717171; padding-bottom:9px; margin-bottom:16px;} .concessions_liste_item_titre img{max-height:17px; display:inline-block; margin-left:10px;} .concessions_liste_item_adresse{color: #B6B6B6; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} .concessions_liste_item_lien a{display:block; margin-top:16px; color: #FFF; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; text-decoration-line: underline;} .card-site{border-radius: 2px; border: 1px solid #7C7C7C; background: #353535;} .card-site-body{padding:32px;} /* Page Gamme */ #gamme header{position:absolute; top:0; left:0; width:100%;} .gamme_slide_item{width:100%; min-height:100vh; position:relative; z-index:1; overflow:hidden;} .gamme_slide_item_image:before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.65) 100%); z-index:2;} .gamme_slide_item_image img{width:100%; height:100%; position:absolute; top:0; left:0; object-position: center center; object-fit:cover;} .gamme_slide_item_etiquette{position:absolute; bottom:60px; right:30px; max-width:150px; z-index:3} .gamme_slide_item_title{position:absolute; bottom:15px; left:0; width:100%; z-index:3;} .gamme_slide_item_title_legal{font-weight: bold; font-size: 12px; text-align: left; color: #909090;} .video_bloc_video{height:100vh; position:relative;} .video_bloc video{ position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover;} .video_bloc .img-solo{ position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover;} .video_bloc .video_play{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width:100%; max-height:100%} .gamme_carousel_wrap{background:#000000; padding:30px 0; margin:0; height:100%;} .gamme_carousel_item{border-radius: 20px; max-height:70vh; text-align:center;} .gamme_carousel_item img{max-height:70vh; width:auto !important; border-radius: 20px; display:inline-block !important;} .gamme_carousel_wrap h3{font-family: Halogen; font-weight: 900; font-size: 25px; color: #fff; position:relative; margin-bottom:16px; padding-bottom:16px; text-transform: uppercase; text-align:center;} .gamme_carousel_wrap h3:after{content:""; position:absolute; bottom:0; left: 50%; transform: translate(-50%, 0); height:3px; background:#af0721; width:100px;} .gamme_carousel_wrap .gamme_carousel_text{color: #fff; text-align: center;} .bloc_gammeinfos{position:absolute; left:0; bottom:20px; width:100%; text-align:center;} .bloc_gammeinfo_titre{font-weight: bold;} .bloc_gammeinfo_valeur{font-weight: bold; font-size: 30px; margin-top:16px;} .bloc_gammeinfo_valeur span{font-size: 16px; } .bloc_gammeinfo_texte{margin-top:16px;} .gamme_vehicules{background:#000000; padding:30px 0; margin:0; height:100%;} .gamme_vehicules h2{font-family: Halogen; font-weight: 900; font-size: 25px; color: #fff; position:relative; margin-bottom:16px; padding-bottom:16px; text-transform: uppercase; text-align:center;} .gamme_vehicules h2:after{content:""; position:absolute; bottom:0; left: 50%; transform: translate(-50%, 0); height:3px; background:#af0721; width:100px;} .gamme_mentionslegales{font-size: 12px; color: #fff;} /* Page Actualités */ .actualites_slide_item{width:100%; height:100vh !important; position:relative; z-index:1; background:#000; padding-bottom:30px;} .actualites_slide_item_image:before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%); z-index:2;} .actualites_slide_item_image img{width:100%; height:100%; position:absolute; top:0; left:0; object-position: center center; object-fit:cover; } .actualites_slide_item_title{position:absolute; bottom:60px; left:90px; width:100%; max-width:600px; z-index:3;} .actualites_slide_item_title h2{color: #FFF; font-size: 35px !important; font-style: normal !important; font-weight: 300 !important; line-height: normal !important;} .actualites_slide_item_title h5{color: #ED1C24;font-family: "Space Grotesk"; font-size: 20px; font-style: normal; font-weight: 300; line-height: normal;} #actu_slides .owl-dots {margin-top: 10px; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);} #actu_slides .owl-dots .owl-dot span{width:195px; height:6px; background:#FFF; border-radius:0;} #actu_slides .owl-dots .owl-dot.active span{background: #ED1C24;} #actualites #recherche_form .bootstrap-select{width:250px !important;} .actu_mini_photo{position:relative;} .actu_mini_marque{position:absolute; top:10px; right:20px; border-radius: 5px; background: #1d1d1b; font-weight: 500; font-size: 12px; text-align: center; color: #fff; display:inline-block; padding:8px 17px;} .actu_mini_photo img{width:100%; height:100%; object-fit: cover; object-position: center center; border-radius: 5px;} .actu_mini_details{text-align:center; padding:30px 15px;} .actu_mini_description{font-size: 20px; min-height: 2.2em;} .actu_mini_date{font-size: 14px; line-height: 22px; color: #a8a8a8; margin:10px 0 20px 0;} .actualite_header{width: 100%; height:100vh; position:relative;} .actualite_header img{width:100%; height:100%; object-fit: cover; object-position: center center;} .article_title_section{text-align:center;} .article_date{color: #E1E1E1; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} .article_content img{max-width:100%;} .article_content a{color:#ED1C24; text-decoration: underline;} .list_actu_title_main{color: #FFF; font-size: 45px; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; text-align:center;} .list_actu_title_submain{color: #FFF; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; text-align:center; } .article_share_content{font-weight: bold; font-size: 30px; text-align: left; color: #000; position:relative; margin-bottom:16px; padding-bottom:16px; text-align:center;} .article_share_content:after{content:""; position:absolute; bottom:0; left: 50%; transform: translate(-50%, 0); height:3px; background:#af0721; width:100px;} .article_share_links{display:flex; justify-content: center; font-size:38px;} .article_share_links .suttel-facebook:hover{color:#0866FF;} .article_share_links .suttel-twitter:hover{color:#1D9BF0;} .article_share_links .suttel-linkedin:hover{color:#0A66C2;} /* Newsletter */ .form_newsletter_wrap{min-height:370px; background:url('../images/bg_newsletter.png') center center no-repeat; background-size: cover; font-weight: normal; color: #fff; display: flex; justify-content: center; align-items: center; border-radius:5px; margin-bottom:30px;} .form_newsletter_title{font-family: Halogen; font-weight: 900; font-size: 30px; position:relative; margin-bottom:30px; padding-bottom:16px; text-transform: uppercase; text-align:center;} .form_newsletter_title:after{content:""; position:absolute; bottom:0; left: 50%; transform: translate(-50%, 0); height:3px; background:#af0721; width:100px;} .form_newsletter .annexe_menu_input_email{min-width:400px;} .bloc_dropdown{border: 1px solid #434343; background:#2A2A2A;} .bloc_dropdown .bloc_dropdown_titre{color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; position:relative; padding:32px; cursor: pointer;} .bloc_dropdown .bloc_dropdown_titre:after{position: absolute; top:50%; transform: translatey(-50%); right:34px; content:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgOCAxMiIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTEgMC41TDYuNSA2TDEgMTEuNSIgc3Ryb2tlPSIjRkJGQkZCIi8+Cjwvc3ZnPg==');} .bloc_dropdown.show .bloc_dropdown_titre:after{content:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgMTMgOCIgZmlsbD0ibm9uZSI+CiAgPHBhdGggZD0iTTEyIDAuNUw2LjUgNkwxIDAuNSIgc3Ryb2tlPSIjRkJGQkZCIi8+Cjwvc3ZnPg==');} .bloc_dropdown_content{display:none; padding:32px; border-top:1px solid #434343;} /* Pages annexes */ #success h2{color: #FFF; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal;} #success h3{color: #7C7C7C; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} .annexe_header{margin:20px 0; padding:20px 0; border-bottom: 1px solid #ccc;} .annexe_card_wrap{margin-bottom:40px; padding-bottom: 40px; border-bottom: 1px solid #ccc;} .annexe_card_wrap:last-child{border: 0px; } .annexe_card_title{font-family: Halogen; font-weight: 500; font-size: 40px; position:relative; margin-bottom:16px; padding-bottom:16px; text-transform: uppercase; padding-top:40px; line-height: 40px;} .annexe_card_title b{font-weight: 900;} .annexe_card_title:after{content:""; position:absolute; bottom:0; left:0; height:3px; background:#af0721; width:100px;} .annexe_card_image {max-height:100%; display:flex;} .annexe_card_image > img{border-radius:20px; width:100%; height:100%; object-fit: cover; object-position: center center; max-height: 90vh;} .annexe_card_content a {color:#af0721; text-decoration: underline;} .recrutement_chiffre{padding:60px 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background:#1C1C1C; color: #FFF; text-align: center; border:1px solid #434343; font-size: 16px;} .recrutement_chiffre b{color: #FFF; font-size: 80px; font-weight: 100; line-height: normal;} #recrutement_form .help-block{ color: #666; text-align: center; font-size: 17px; font-style: normal; font-weight: 300; line-height: normal;} .concession_infos_wrap{border-radius: 20px; background: #EFEFEF; padding:50px 20px; height:100%; align-items: center; display:flex; height:100%;} .concession_infos{width:100%;} .concession_infos_numero{background:#1D1D1B; border-radius:20px; padding:15px 30px; display: flex; justify-content: space-between; align-items: center; flex-direction: row; color:#FFF;} .concession_infos_numero .concession_infos_numero_image{height:60px; display: flex; justify-items: center; align-items: center; max-width:90px;} .concession_horaires .concession_horaire_ligne{display:flex; justify-content: space-between; padding:4px 25px; border-radius:50px;} .concession_horaires .concession_horaire_ligne:nth-child(odd){background:#D9D9D9;} .occasions_filter{display:flex; align-items: center; margin-bottom:20px; gap:8px;} .occasions_filter > div{width:100%;} .occasions_filter > div > .dropdown,.occasions_filter > div .dropdown-toggle{width:100% !important;} .occasions_filter .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){width:unset;} .occasions_filter .dropdown-menu{border: 1px solid #434343; background: #222; z-index: 90;} .search_reset{color: #AEAEAE; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-underline-position: from-font;} .occasions_filter_title{display:none;} #recherche_form label{font-weight: bold; font-size: 16px; line-height: 27px; text-align: left; color: #1d1d1b;} #recherche_form .form-item{border-radius: 5px; background: #efefef; padding:18px 20px; margin-bottom:10px;} #recherche_form .form-item.checked{border-radius: 5px; background: #1D1D1B; color: #F8F9F9; padding:18px 20px; margin-bottom:10px;} #recherche_form .form-item.checked label{color: #F8F9F9;} .vehicules_nombre{font-weight: bold; font-size: 25px; line-height: 27px; text-align: left; color: #1d1d1b;} .vehicule_recherche_reset a{text-decoration: underline; font-size: 16px; color: #a8a8a8;} .vn_header{text-align: center;} .vn_header h3{color: #FFF; font-size: 45px; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; text-align: center;} .vn_header h4{color: #FFF; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; text-align: center;} .vn_header_description {color: #FFF; text-align: center; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal;} .vn_header .vn_chiffre_titre{color: #FFF; text-align: center; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal;} .vn_header .vn_chiffre_chiffre{color: #FFF; text-align: center; font-size: 35px; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; border-right:1px solid #404040;} .vn_header .vn_chiffre_top:last-child .vn_chiffre_chiffre{border-right:0;} .vn_header .vn_chiffre_soustitre{color: #FFF; text-align: center; font-size: 16px; font-style: normal; font-weight: 400; line-height: 92.4%; /* 14.784px */} .vn_mentionslegales{color: #B6B6B6; font-size: 10px; font-style: normal; font-weight: 400; line-height: normal; text-align: left;} .vn_bloc_data{ padding:0 40px;} .vn_bloc_titre{color: #FBFBFB; font-size: 24px; font-weight: 600;} .vn_bloc_soustitre{color: #E1E1E1; font-size: 16px;} .vn_bloc_texte{color: #FBFBFB;} .vn_bloc_image{width:100%; height:100%; object-fit: cover; object-position: center center; max-height: 700px;} .vn_chiffres h3{color: #FFF; font-size: 45px; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; text-align: center;} .vn_chiffres h4{color: #FFF; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; text-align: center;} .vn_chiffres .vn_chiffre{border-bottom:1px solid #404040;} .vn_chiffres .vn_chiffre:last-child{border-bottom:0;} .vn_chiffres .vn_chiffre_titre{color: #FFF; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; padding:20px 0;} .vn_chiffres .vn_chiffre_chiffre{color: #FFF; text-align: right; font-size: 20px; font-style: normal; font-weight: 700; line-height: normal; padding:20px 0;} .vn_galerie h3{color: #FFF; font-size: 45px; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; text-align: center;} .vn_galerie h4{color: #FFF; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; text-align: center;} #vn_galerie_slider .owl-dots {margin-top: 40px;} #vn_galerie_slider .owl-dots .owl-dot span{width:195px; height:6px; background:#FFF; border-radius:0;} #vn_galerie_slider .owl-dots .owl-dot.active span{background: #ED1C24;} .sponsor-item {padding: 15px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;} .sponsor-item img { max-height: 120px; width: auto; transition: all 0.3s ease; } .sponsor-item:hover img { transform: scale(1.05); } .guillemets{position:relative;} .guillemets:before{content:""; position:absolute; top:0; right:-60px; width:100px; height:83px; background:url('../images/guillemet.png') center center no-repeat; background-size:cover;} .carousel-item-data{background:#1C1C1C; border: 1px solid #434343;width:100%; height:100%; padding:40px;} .history-title{color: #FBFBFB; font-size: 24px; font-style: normal; font-weight: 600; line-height: normal; margin-bottom:8px;} .history-year{color: #E1E1E1; font-size: 16px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #434343;} .history-text{color: #FBFBFB; font-size: 16px; font-style: normal; line-height: normal;} .timeline-container { position: relative; padding: 40px 0; } .timeline-wrapper { position: relative; overflow: hidden; padding: 80px 0 80px 0; width: 100%; margin: 0 auto -60px auto; } .timeline-wrapper::before { content: ''; position: absolute; height: 2px; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100% ); left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; } .timeline-scroll { display: flex; align-items: center; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; min-width: 100%; padding: 0 20%; /* Ajoute de l'espace sur les côtés pour le centrage */ will-change: transform; } .timeline-point { flex: 0 0 auto; text-align: center; padding: 0 40px; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 2; min-width: 100px; /* Largeur minimale pour chaque point */ } .timeline-dot { width: 2px; height: 20px; background: rgba(0, 0, 0, 0); margin: 0 auto 10px; transition: all 0.3s ease; position: relative; top:18px; } .timeline-year { font-size: 16px; color: #7C7C7C; white-space: nowrap; /* Empêche le texte de se wrapper */ top: 16px; position: relative; font-weight: 400; } .timeline-point.active .timeline-dot { background: rgba(255, 255, 255, 1); } .timeline-point.active .timeline-dot:after{content:""; position:absolute; top:-103px; left:0; width:2px; height:93px; z-index:9999; background:url('../images/timeline.png') center center no-repeat; background-size:contain;} .timeline-point.active .timeline-year { color: #FBFBFB; font-weight: 400; } /* Ajout des styles pour les boutons de navigation */ .carousel-control-prev, .carousel-control-next { width: 40px; height: 40px; border-radius: 50%; top: 50%; transform: translateY(-50%); opacity: 2; } .carousel-control-next-icon { background-image: url("../images/arrow-next.png"); background-size: unset; background-repeat: no-repeat; } .carousel-control-prev-icon { background-image: url("../images/arrow-prev.png"); background-size: unset; background-repeat: no-repeat; } .carousel-control-prev { left: -60px; } .carousel-control-next { right: -60px; } /* Responsive adjustments */ @media (max-width: 768px) { .timeline-scroll { padding: 0 5%; } .timeline-point { padding: 0 20px; min-width: 60px; } .timeline-year { font-size: 12px; } .carousel-control-prev, .carousel-control-next{top:unset; transform:unset; bottom:8px;} .carousel-control-next{right:-10px;} .carousel-control-prev{left:-10px;} .history-text{padding-bottom:0px;} .history-year{margin-top:0px;} .history-title{font-size:16px;} .history-year{font-size:16px;} .history-text{font-size:16px;} } @media (max-width: 480px) { .timeline-scroll { padding: 0 2%; } .timeline-point { padding: 0 15px; min-width: 50px; } .timeline-year { font-size: 11px; } } /* Fiche VO */ .vehicule_image_inner{position:relative;} .vehicule_image_inner > img{width:100%; height:100%; object-fit: cover; object-position: center center;} .vehicule_image_localisation{position:absolute; top:25px; left:25px; background: #FFFF; color: #000; font-size: 17px; font-style: normal; font-weight: 500; line-height: normal; padding:10px 30px; z-index: 9;} .vehicule_image_localisation i{font-size:20px; color:#ED1C24;} .vehicule_image_nombre{position:absolute; bottom:14px; right:14px; background: #222; border:1px solid #434343; color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; padding:8px 16px; z-index: 9;} .vehicule_image_nombre_current{display:inline-block; margin-left:8px;} .vehicule_icone_recap_score {text-align:left; position:absolute; bottom:10px; right:10px;} .vehicule_icone_recap_score img{height:127px;} .vehicule_icone_recap_score_infos{position:relative;} .vehicule_icone_recap_score_infos{position:relative;} .vehicule_icone_recap_score_infos_co2{font-weight: 500; font-size: 10px; color: #fff; text-align: left; position:absolute; top:0; left:26px;} .vehicule_icone_recap_score_infos_co2.score_a{top:4px;} .vehicule_icone_recap_score_infos_co2.score_b{top:20px;} .vehicule_icone_recap_score_infos_co2.score_c{top:36px;} .vehicule_icone_recap_score_infos_co2.score_d{top:52px;} .vehicule_icone_recap_score_infos_co2.score_e{top:68px;} .vehicule_icone_recap_score_infos_co2.score_f{top:84px;} .vehicule_icone_recap_score_infos_co2.score_g{top:96px;} .vehicule_ref{font-weight: 500; font-size: 15px; color: #7C7C7C;} .vehicule_share{font-weight: 500; font-size: 15px; color: #AEAEAE;} .vehicule_share a{text-decoration: underline; display:inline-block; margin-left:16px;} .vehicule_share a:hover{font-weight:bold;} .vehicule_prix{color: #FFF; font-size: 32px; font-style: normal; font-weight: 600; line-height: normal;} .vehicule_infos_header{position:relative; height:100%;} .vehicule_contact{position:absolute; bottom:47px; left:0; width:100%;} .vehicule_dispo span{color:#7C7C7C;} .vehicule_caracteristique_header{display:flex; justify-content: center; align-items: center; flex-direction: column; text-align:center; height:100%;} .vehicule_caracteristique_header_data{display:block; color: #FFF; font-size: 17px; font-style: normal; font-weight: 400;line-height: normal;} .vehicule_caracteristique_header_img{height:54px; margin-bottom:8px;} .vehicule_caracteristique_header_img img{width:100%; height:100%; object-fit: contain;} .vehicule_suttelandyou_wrap{border-radius: 5px; background: #000; padding:40px 50px; color:#FFF;} #modalPhotosVehicule .modal-content{background:#1A1A1A;} #modalPhotosVehicule .modal-title{font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} #modalPhotosVehicule .btn-close{position: absolute; top: 60px; right: 0; background:unset; border:unset; color:#FFF; opacity: 1; width: 37px; height: 37px; font-size: 24px;} #modalPhotosVehicule .modal-header{border:0;} #vehicule{margin-top:150px;} #annexe-recrutement{margin-top:150px;} #vehicule .owl-item{opacity:0.2; transition: all 0.5s;} #vehicule .owl-item img{border-radius:0px;} #vehicule .owl-item.active{opacity:1;} #vehicule .owl-dots {margin-top: 10px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width:90%;} #vehicule .owl-dots .owl-dot span{width:195px; height:6px; background:#FFF; border-radius:0;} #vehicule .owl-dots .owl-dot.active span{background: #ED1C24;} .vehicules_pointcle{padding:16px; color:#FFF; height:100%; align-items: center; display:flex; background:#222; border:1px solid #434343;} .vehicules_pointcle_gray{color:#7C7C7C;} .vehicule_garantie{min-height:650px; background:url('../images/fond_garantie.png') center center no-repeat; background-size: cover; font-weight: normal; font-size: 20px; color: #fff;} .vehicule_garantie .container > div{padding-right:40%;} .vehicules_photos img {width:100%; height:100%; object-fit: cover;} .vehicule_infos_header h1{color:#7C7C7C;} .vehicule_infos_header_tags{display:flex; flex-wrap:wrap; gap:8px;} .vehicule_infos_header_tag{border: 1px solid #434343; background: #2A2A2A;color:#FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; padding:8px 16px;} @media (max-width: 767px) { .vehicules_photos .col-12 {margin-bottom: 1rem;} } /* Véhicules Mini */ .vehicule_mini{border-radius: 2px 2px 2px 2px; border: 1px solid #434343; background: #1C1C1C; } .vehicule_mini_photo{position:relative; overflow:hidden;} .vehicule_mini_photo img{ transition: all 0.3s; border-radius:2px 2px 0 0;} .vehicule_mini:hover .vehicule_mini_photo img{transform: scale(1.04); transition: all 0.3s ease-out;} .vehicule_mini_tags{position:absolute; top:10px; left:10px;} .vehicule_mini_tag{border-radius: 5px; background: #1d1d1b; font-size: 12px; text-align: center; color: #fff; padding:8px 15px;} .vehicule_mini_localisation{color: #7C7C7C; font-size: 16px; font-weight: 400;} .vehicule_mini_prix{font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; color:#FFF; border-top: 1px solid #434343; border-bottom: 1px solid #434343; padding:16px 0; margin:16px 0;} .vehicule_mini_infos{margin:0px 20px; padding-bottom:16px; border-bottom:1px solid #404040; display:flex; justify-content: space-between; align-items: center;} .vehicule_mini_marque{color: #FFF; font-size: 20px; font-weight: 600; display:flex; justify-content: space-between;} .vehicule_mini_modele{color: #7C7C7C; font-size: 16px; font-weight: 400; } .vehicule_mini_lien{margin-top:24px;} .vehicule_mini_details{padding:20px;} .vehicule_mini_caracteristiques{margin-top:24px;} .vehicule_mini_caracteristiques span{color:#434343;} .vehicule_mini_caracteristique_img{height:38px; display:flex; align-items: center; justify-content: center; margin-bottom:8px;} .vehicule_mini_caracteristique_img img{max-height:38px; max-width:38px;} .concession_mini_info{margin-top:35px;} .concession_mini_info_nom{display:flex; align-items: center;} .concession_mini_info_nom_detail{color: #FFF; font-size: 25px; font-style: normal; font-weight: 500; line-height: normal;} .concession_mini_info_nom_detail img{max-height:45px; margin-right:16px;} .concession_mini_info_details b{font-weight: 600;} .concession_mini_info_nom_rs .btn-site{font-size:24px;} .concession_mini_info_details_adresse{margin-bottom:16px;} .concession_mini_info_details_adresse b, .concession_mini_info_details_telephone b{color:#7C7C7C; font-weight:400;} .concession_mini_info_details_telephone{margin-bottom:16px;} .horaires-toggle-header{display:flex; justify-content: space-between; align-items: center; background:#404040; padding:16px 27px; color: #FFF; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; margin-top:16px} .horaires-toggle-header i{font-size:24px;} .horaires-infos{padding:16px 0; position:relative;} .horaire-item{position:relative; border: 1px solid #434343; background: #1F1F1F; padding:8px 16px; display: flex; justify-content: space-between;} .horaire-item-titre{color:#7C7C7C;} .concession_mini_info_details_lien{margin-top:24px; display:flex; gap:16px;} .horaires-showroom {color: #ffffff;background-color: #000000;padding: 10px;} .horaires-infos .horaire-item {width: 100%; display: flex; align-items: baseline; margin-bottom: 5px; justify-content: space-between;} .horaires-infos .horaire-item-titre { font-weight: normal; margin-right: 10px;} .page_header_image{width:100%; height:calc(100vh - 62px); position:relative;} .page_header_image_image{width:100%; height:100%;} .page_header_image_image img{width:100%; height:100%; object-fit: cover;} .page_header_image_image:before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 100%);} .page_header_image_infos{position:absolute; bottom:60px; left:50%; transform: translateX(-50%); width:100%; z-index:3; text-align:center; max-width: 590px;} #annexe-rachat .page_header_image{height:100vh;} .page_header_imagemini{width:100%; height:400px; position:relative;} .page_header_imagemini_image{width:100%; height:100%;} .page_header_imagemini_image img{width:100%; height:100%; object-fit: cover;} .page_header_imagemini_image:before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 100%);} .page_header_imagemini_infos{position:absolute; top:50px; left:50%; transform: translate(-50%, 50%); width:100%; z-index:3; text-align:center; max-width: 590px;} .concession_horaire_titre{color: #FFF; font-size: 25px; font-style: normal; font-weight: 500; line-height: normal; text-align:center;} .concession_horaire_soustitre{color: #FFF; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal;} .concession_horaire_infos .concession_item{display:flex; justify-content: space-between; padding:4px 25px;} .concession_horaire_infos .concession_item:nth-child(even){background:#404040;} .concession_rdv_form_steps_page{border-top:1px solid #434343; border-bottom:1px solid #434343; padding:32px 0;} .concession_rdv_form_steps_wrap{display:flex; justify-content: space-between; align-items: start;} .concession_rdv_form_steps{display:flex; align-items: center; margin-bottom:30px;} .concession_rdv_form_steps li{list-style: none; flex: 0 0 auto; color: #7C7C7C; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; padding-right:20px; margin-right:20px; position:relative;} .concession_rdv_form_steps li:after{content:""; background: url('../images/fleche2.png'); background-size: contain; width:7px; height:11px; position:absolute; top:50%; right:0; transform: translateY(-50%); } .concession_rdv_form_steps li:last-child:after{display:none;} .concession_rdv_form_steps li:last-child{padding-right:0; margin-right:0;} .concession_rdv_form_steps_page ol{margin-bottom:0;} .concession_rdv_form_steps_page li.active{opacity:1; color:#FBFBFB;} .mobile_step{display:none;} .maxwdesktop{max-width:800px;} #concession_rdv h3{color: #FFF; font-size: 45px; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; text-align: center;} #concession_rdv h4{color: #FFF; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; text-align: center;} /* Page Annexe */ .importips{font-weight: bold; font-size: 16px;} .need_help_title{font-family: Halogen; font-size: 18px; color: #FFF; font-weight:bold; position:relative; margin-bottom:30px; padding-bottom:16px; text-transform: uppercase;} .need_help_title:after{content:""; position:absolute; bottom:0;left: 0; height:3px; background:#FFF; width:100px;} #calendrier{background:#222; padding:28px;} #calendrier li{list-style: none; margin-left:0px; list-style-type: none; padding:10px 10px; margin:5px 3px;} #calendrier .mois .titre{display:flex;} #calendrier .mois .titre div{flex-grow: 1;} #calendrier .mois .titre .titre_month{font-size: 24px; text-align: center; color: #B6B6B6; font-weight: 600;} #calendrier .mois .titre .titre_change{font-size:16px; color:#B6B6B6;} #calendrier .mois .titre .titre_change_after{text-align:right;} #calendrier #libelle{ display:flex; margin:0; padding:0;} #calendrier #libelle li { width:calc(100% / 7); color:#434343; font-family: Gotham; font-size: 15px;} #calendrier .ligne { display:flex; margin:0; padding:0;} #calendrier .ligne li { width:calc(100% / 7); text-align:center; cursor: pointer;} #calendrier .ligne li:before { content: ''; display: block; padding-top: 15%; }#calendrier .ligne li:after { content: ''; display: block; padding-top: 15%; } #calendrier .ligne li.disable{color:#434343; cursor: not-allowed; } #calendrier .ligne li.selected{color:#141414; background:#FBFBFB; font-weight: 600; border-radius:4px;} #calendrier .dispo_mois ul li{list-style-type: none;} #calendrier .mois li{background:none; text-align:center; font-size:15px; list-style-type: none;} .disponibilites_preference{padding:8px 16px; border: 1px solid #434343; background: #1F1F1F; text-align:center; margin-bottom:16px; color: #FBFBFB; display:flex; justify-content: space-between;} .disponibilites_preference a{margin-left:20px; display:inline-block;} .disponibilites_preference span{color:#666} .legal{font-weight: 500; font-size: 14px; color: #a8a8a8;} .bloc_faq_question{font-size: 18px; padding-left:50px; position:relative; cursor: pointer;} .bloc_faq .bloc_faq_question:before{content:""; position:absolute; left:0px; top:4px; width:21px; height:21px; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIj4KICA8cGF0aCBpZD0iVHJhY8OpXzEzMzYiIGRhdGEtbmFtZT0iVHJhY8OpIDEzMzYiIGQ9Ik05LjQyOSwwVjkuNDI5SDB2My4xNDNIOS40MjlWMjJoMy4xNDNWMTIuNTcxSDIyVjkuNDI5SDEyLjU3MlYwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIvPgo8L3N2Zz4K');} .bloc_faq.open .bloc_faq_question:before{top:13px; height:3px; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIzIiB2aWV3Qm94PSIwIDAgMjEgMyI+CiAgPHBhdGggaWQ9IlRyYWPDqV8xMzY1IiBkYXRhLW5hbWU9IlRyYWPDqSAxMzY1IiBkPSJNOSw1LjE4NkgwdjNIMjF2LTNIOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTUuMTg2KSIvPgo8L3N2Zz4K');} .bloc_faq .bloc_faq_reponse{border-top: 1px solid #ccc; display:none; padding-top:16px; margin-top:16px;} .bloc_faq .bloc_faq_reponse a{color:#af0721; text-decoration: underline;} .bloc_faq.open .bloc_faq_reponse{display:block;} .bloc_faq_reponse a {color:#af0721; text-decoration: underline;} /* Suttel & You */ .modal .btn-close{position:absolute; top:0; left:50%; transform: translate(-50%, -50%); border-radius: 50%; background:#FFF; opacity:1; width:37px; height:37px;} .modal .modal-content{padding-top:30px; padding-bottom:24px;} .modal .form-control{background:#EFEFEF; border:#EFEFEF;} .modal label{font-weight: bold;line-height: 22px; margin-bottom:6px;} .modal .form-group{margin-bottom: 16px;} .menu-compte-wrap{position:relative; height:100%; padding-bottom:80px;} .menu-compte-data{color: #a8a8a8;} .menu-compte-data-titre{color: #a8a8a8; padding-left:11px;} .menu-compte-data ul{padding:0; margin:0;} .menu-compte-data li{list-style-type: none; list-style-position: inside; font-weight: bold; color: #000; padding:11px; margin-bottom:8px; margin-top:8px; margin-left:0; border-radius:5px;} .menu-compte-data li.active, .menu-compte-data li:hover{background: #FAF0F2; color: #af0721;} .recrutements_header{height:100vh; display:flex; justify-content: center; align-items: center; text-align:center; background-position: center center; background-size: cover;} .recrutements_header:after{content:" "; background: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 100%); opacity: 0.51; position:absolute; top:0; left:0; width:100%; height:100vh; z-index:4;} .recrutements_header .container{z-index:5; position:relative;} .recrutement_description li{ display: list-item; list-style-type: "✔"; padding-inline-start: 1ch; } .recrutement_description li::marker { color: #af0721; } .recrutement_image_wrap{width:100%; height:100%; border:1px solid #434343;} .recrutement_image{width:100%; height:100%; object-fit: cover;} .recrutement_concession_nom{color: #FFF;} .recrutement_concession_adresse{color: #7C7C7C;} .recrutement_item_title{color: #7C7C7C; font-weight: 400;} .recrutement_item_value{color: #FFF; font-size: 20px; font-weight: 600;} #vehicule #pointsdevente_map{height:800px;} * -------------------------------- Timeline -------------------------------- */ .cd-horizontal-timeline ol{list-style-type: none;} .cd-timeline-navigation{list-style-type: none;} .cd-horizontal-timeline {opacity: 0; margin: 2em auto; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; transition: opacity 0.2s;} .cd-horizontal-timeline::before { content: 'mobile'; display: none;} .cd-horizontal-timeline.loaded { opacity: 1;} .cd-horizontal-timeline .timeline {position: relative; height: 180px; width: 90%; max-width: 800px; margin: 0 auto;} .cd-horizontal-timeline .events-wrapper { position: relative; height: 100%; margin: 0 40px; overflow: hidden;} .cd-horizontal-timeline .events { position: absolute; z-index: 1; left: 0; top: 49px; height: 2px; background: #AF0721; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;} .cd-horizontal-timeline .filling-line { position: absolute; z-index: 1; left: 0; top: -1px; height: 100%; width: 100%; background-color: #AF0721; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center;transform-origin: left center;-webkit-transition: -webkit-transform 0.3s;-moz-transition: -moz-transform 0.3s;transition: transform 0.3s;} .cd-horizontal-timeline .events a { position: absolute; bottom: 0; z-index: 2; text-align: center;padding-bottom: 15px; font-weight: bold; font-size: 15px; color: #FFF; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .cd-horizontal-timeline .events a::after { /* this is used to create the event spot */ content: ''; position: absolute; left: 50%; right: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); bottom: -6px; height: 12px;width: 12px; border-radius: 50%;border: 2px solid #AF0721; background-color: #AF0721; -webkit-transition: background-color 0.3s, border-color 0.3s; -moz-transition: background-color 0.3s, border-color 0.3s; transition: background-color 0.3s, border-color 0.3s; } .cd-horizontal-timeline .events a.selected { pointer-events: none; } .cd-horizontal-timeline .events a.older-event::after { background-color: #AF0721; border-color: #AF0721; } .cd-horizontal-timeline .events li {list-style:none;} .cd-horizontal-timeline .events-wrapper a span{display:none; position:absolute; top:50px; left:-60px; font-weight: normal; font-size: 15px; line-height: 21px; text-align: center; color: #FFF; width:210px;} .cd-horizontal-timeline .events-wrapper a.selected span{display:block} @media only screen and (min-width: 1100px) { .cd-horizontal-timeline { margin: 3em auto; } .cd-horizontal-timeline::before {content: 'desktop';} } .cd-timeline-navigation a { position: absolute; z-index: 1; top: 40%; bottom: auto; -webkit-transform: translateY(-110%); -moz-transform: translateY(-110%); -ms-transform: translateY(-110%); -o-transform: translateY(-110%); transform: translateY(-110%); height: 34px; width: 34px; line-height: 34px; border-radius: 50%; border: 0px; background:#FFFFFF; color:#000; overflow: hidden; white-space: nowrap; -webkit-transition: border-color 0.3s; -moz-transition: border-color 0.3s; transition: border-color 0.3s; text-align:center; } .cd-timeline-navigation a::after { content: ''; position: absolute; height: 16px; width: 16px; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-110%); -moz-transform: translateX(-50%) translateY(-110%); -ms-transform: translateX(-50%) translateY(-110%); -o-transform: translateX(-50%) translateY(-110%); transform: translateX(-50%) translateY(-110%); } .cd-timeline-navigation a.prev {left: 0; -webkit-transform: translateY(-110%) rotate(180deg); -moz-transform: translateY(-110%) rotate(180deg); -ms-transform: translateY(-110%) rotate(180deg); -o-transform: translateY(-110%) rotate(180deg); transform: translateY(-110%) rotate(180deg); } .cd-timeline-navigation a.next { right: 0;} .no-touch .cd-timeline-navigation a:hover { border-color: #7b9d6f; } .cd-timeline-navigation a.inactive { cursor: not-allowed; } .cd-timeline-navigation a.inactive::after {background-position: 0 -16px;} .no-touch .cd-timeline-navigation a.inactive:hover { border-color: #dfdfdf;} .cd-horizontal-timeline .events-content { position: relative; width: 100%; margin: 2em 0; overflow: hidden; -webkit-transition: height 0.4s; -moz-transition: height 0.4s; transition: height 0.4s;} .cd-horizontal-timeline .events-content li { position: absolute; z-index: 1; width: 100%; left: 0; top: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); padding: 0 5%; opacity: 0; -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out; } .cd-horizontal-timeline .events-content li.selected {position: relative; z-index: 2; opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0);} .cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right { -webkit-animation-name: cd-enter-right; -moz-animation-name: cd-enter-right; animation-name: cd-enter-right;} .cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left { -webkit-animation-name: cd-enter-left; -moz-animation-name: cd-enter-left; animation-name: cd-enter-left;} .cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left { -webkit-animation-direction: reverse; -moz-animation-direction: reverse; animation-direction: reverse; } .cd-horizontal-timeline .events-content li > * { max-width: 800px; margin: 0 auto;} @-webkit-keyframes cd-enter-right { 0% { opacity: 0; -webkit-transform: translateX(100%);} 100% { opacity: 1; -webkit-transform: translateX(0%); } } @-moz-keyframes cd-enter-right { 0% {opacity: 0; -moz-transform: translateX(100%);} 100% { opacity: 1; -moz-transform: translateX(0%); } } @keyframes cd-enter-right { 0% { opacity: 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%);} 100% { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes cd-enter-left { 0% { opacity: 0; -webkit-transform: translateX(-100%); } 100% { opacity: 1; -webkit-transform: translateX(0%); } } @-moz-keyframes cd-enter-left { 0% { opacity: 0; -moz-transform: translateX(-100%); } 100% { opacity: 1; -moz-transform: translateX(0%); } } @keyframes cd-enter-left { 0% { opacity: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%);} 100% { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } h3.offres_list_title{font-family: Halogen; font-weight: 900; font-size: 40px; position:relative; margin-bottom:16px; padding-bottom:16px;} h3.offres_list_title:after{content:""; position:absolute; bottom:0;left: 0; height:3px; background:#af0721; width:100px;} .mini_recrutement_contrat{color: #FFF;} .mini_recrutement_titre{font-style: normal; font-weight: normal; line-height: normal;} .mini_recrutement_titre b{font-weight: 600; display: inline-block; margin-bottom:8px;} .mini_recrutement_ville{color: #FFF;} .mini_recrutement_ville span{color: #7C7C7C; display: inline-block; margin-bottom:8px;} .mini_recrutement{transition: all 0.5s} .mini_recrutement{background-color:#222; padding:24px 33px; border:1px solid #7C7C7C; transition: all 0.5s;} .recrutement_categorie{text-align:center; } .recrutement_categorie > span{background: #af0721; text-align:center; display:inline-block; font-family: "Plus Jakarta Sans"; font-weight: 500; font-size: 15px; color: #fff; padding:5px 20px; border-radius:5px; } .gamme_ecoenergie{position:absolute; top:30px; right:30px; display:flex;} .gamme_ecoenergie .gamme_ecoenergie_wltp{color:#FFF;} .gamme_ecoenergie_wltp_title{color:#77797A; margin-bottom:3px;} .gamme_ecoenergie .gamme_ecoenergie_wltp_data{display:flex; margin-right:16px;} .gamme_ecoenergie .gamme_ecoenergie_wltp_data_icon{font-size:24px; border-radius:50%; border:1px solid #FFF; padding:12px; margin-right:8px;} #le-groupe .fullblack_bloc h3{margin-bottom:4px; padding-bottom:4px;} #le-groupe .fullblack_bloc h3:after{display:none;} #le-groupe .fullblack_bloc h4{font-weight: 900; font-size: 25px; position:relative; margin-bottom:16px; padding-bottom:16px;} #le-groupe .fullblack_bloc h4:after{content:""; position:absolute; bottom:0;left: 50%; transform: translate(-50%, 0); height:3px; background:#af0721; width:100px;} .fullblack_bloc_citation{background:url('../images/citation.png') no-repeat center left;} /* Footer */ .footer_menu{background-color: #0c0c0c;} .footer_legal_wrap{background-color: #101010;} #footer_newsletter{padding:60px 0; background:url('../images/footer_newsletter.jpg') no-repeat center center; background-size:cover;} .footer_newsletter_rgpd{color: #FFF; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal;} .social_items{display:flex; justify-content:center; align-items:center; margin-top:24px; flex-direction:row; gap:9px;} .social_items .social_item{ display:flex; justify-content:center; align-items:center; font-size:29px; transition: all 0.5s ease-in-out;} .social_items .social_item.facebook:hover{color:#0866FF;} .social_items .social_item.twitter:hover{color: #717171;} .social_items .social_item.youtube:hover{color:#AF0721;} .social_items .social_item.instagram:hover{color:#FF3040;} .social_items .social_item.linkedin:hover{color:#0077B5;} .footer_links h3{font-size:15px; margin-bottom:0; font-weight:500; margin-bottom:16px;} .footer_links h3:after{display:none;} .footer_links ul{list-style-type: none; list-style-position: inside; margin:0; padding:0; margin-bottom:30px; } .footer_links .footer_nav_titre{color: #B6B6B6; font-size: 17px; font-style: normal; font-weight: 600; line-height: normal;} .footer_links ul li{color: #717171; font-size: 17px; font-style: normal; font-weight: 400; line-height: 29px; display:block;} .footer_links ul li a{color: #717171; font-size: 17px; font-style: normal; font-weight: 400;} .footer_links ul li a.link_grey{color: #A8A8A8;} #back-to-top{position: fixed; bottom: 40px; right:100px; width:40px; height:40px; background:#D10B13; display:flex; justify-content:center; align-items:center; padding:12px; z-index:9999;} #footer .footer_legal ul{list-style-type: none; list-style-position: inside; margin:0; padding:0; float:left;} #footer .footer_legal ul li{display:inline-block; margin-right:24px;} #footer .footer_legal_karita {position:relative; height: 50px; background: transparent; text-align: center; overflow: hidden; width: 100px; margin-top: 0px; display:flex; align-items:center;} .footer_legal_karita a {display: inline-block; text-decoration: none; width:80px; height:54px; } .footer_legal_karita a img { vertical-align: middle; } body:not(.iOS) #lines * { mix-blend-mode: lighten; } .footer_legal_karita #fills * { opacity: 0; mix-blend-mode: lighten; } .footer_legal_karita #line-i-1 { transform-origin: 30em 8em; } .footer_legal_karita .fireworks { position: absolute; top: 0; left: 0; width: 100px; height: 25px;} .footer_legal_karita .st0{fill:#AE9A66;} .footer_legal_karita svg.logo { opacity: 1; background: rgba(255, 255, 255, 0); width: 80px; position: absolute; margin-top: -5px; margin-left: 48px; display: inline-block; bottom: 0; z-index: 99;} .footer_legal_karita a{ position: relative; } .footer_legal_karita svg.logo { display: block; text-align: right; right: 0; margin: 0; top: 0; width: 80px; margin-left: 0; margin-right: 0; left: inherit; position: relative; } .footer_legal_col1{color: #404040; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal;} .footer_legal_col1, .footer_legal_col3{padding-top:8px;} .gamme_carousel .owl-nav, #slider_moto .owl-nav{position: absolute; top: 50%; transform: translateY(-50%); width: 100%; left: 0;} .gamme_carousel .owl-nav, #slider_moto .owl-nav {opacity: 0; transition: all 0.5s;} .gamme_carousel:hover .owl-nav, #slider_moto:hover .owl-nav {opacity: 1;} .gamme_carousel .owl-prev, #slider_moto .owl-prev{left: 0; top:-50px;} .gamme_carousel .owl-next, #slider_moto .owl-next{right: 0; top:-50px;} .gamme_carousel .owl-prev, .gamme_carousel .owl-next, #slider_moto .owl-prev, #slider_moto .owl-next{ position: absolute; width: 38px; height: 38px; color:#FFF !important; border-radius: 50%; font-size: 30px !important; opacity:0.7; background:none !important; } .owl-theme .owl-nav [class*=owl-]:hover, #slider_moto .owl-nav [class*=owl-]:hover {opacity:1; background:none !important;} #slider_moto .owl-prev, #slider_moto .owl-next{font-size:60px !important; width: 48px; height: 48px;} #concession_map{position:absolute; top:40px; left:50%; transform: translateX(-50%); width:70%; z-index:1000; background:#222; border:1px solid #434343; color:#FFF;} #concession_map_close{position:absolute; top:10px; right:10px; width:30px; height:30px; color:#FFF; display:flex; justify-content:center; align-items:center; cursor:pointer;} #concession_map_close i{font-size:20px;} .ville_mini{display:flex; flex-direction:row; gap:16px; align-items:center; } .ville_mini_photo {flex-basis:30%; height:100%; overflow:hidden;} .ville_mini_photo img{width:100%; height:100%; object-fit:cover; min-height:210px;} .ville_mini_details{padding:20px 0;} .ville_mini_intitule{font-size: 16px; font-style: normal; font-weight: 600; margin-bottom:20px;} .ville_mini_localisation{font-size: 16px; font-style: normal; font-weight: 400; margin-bottom:20px;} .ville_mini_liens{display:flex; flex-direction:row; gap:16px; flex-wrap:wrap;} .ville_mini_lien img{width:100%; height:100%; object-fit:cover;} .ville_mini_lien a{display:block; width:100%; height:100%;} .ville_mini_lien a img{width:48px; height:48px; object-fit:cover;} .ville_mini_lien a span{font-size: 16px; font-style: normal; font-weight: 400; margin-bottom:20pxx;} .ville_mini_lien a:hover{opacity:0.7;} .ville_mini_lien a:hover img{opacity:0.7;} .ville_mini_lien a:hover span{opacity:0.7;} .ville_mini_lien a:hover img{opacity:0.7;} /* Styles pour la modal des photos de véhicule */ .vehicule-photo-clickable { cursor: pointer; transition: opacity 0.3s ease; } .vehicule-photo-clickable:hover { opacity: 0.8; } #modalPhotosVehicule .modal-dialog { max-width: 1200px; } .vehicule-modal-main-photo { position: relative; } .vehicule-modal-photo-nav { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 15px; background: rgba(0, 0, 0, 0.7); padding: 10px 20px; border-radius: 25px; color: white; } .vehicule-modal-photo-counter { font-weight: 500; min-width: 60px; text-align: center; } .vehicule-modal-thumbnails { max-height: 270px; overflow-y: auto; overflow-x: hidden; } .vehicule-modal-thumbnail { cursor: pointer; border: 0px solid transparent; overflow: hidden; transition: all 0.3s ease; margin-bottom: 8px; } .vehicule-modal-thumbnail:hover { border:0; } .vehicule-modal-thumbnail.active { border:0; } .vehicule-modal-thumbnail img { width: 100%; height: 120px; object-fit: cover; } .vehicule-modal-contact { background: #222; border-radius: 0; border:1px solid #434343; padding: 20px; margin-top: 20px; } .vehicule-modal-contact h6{ color: #FBFBFB; font-size: 24px; font-style: normal; font-weight: 600; line-height: normal; border-bottom:1px solid #434343; padding-bottom:16px; margin-bottom:16px; } .vehicule-modal-contact-phone{color: #7C7C7C; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; display:block;} .vehicule-modal-contact-phone a{color: #FBFBFB; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; display:block; margin-top:4px;} /* Responsive pour la modal */ @media (max-width: 991.98px) { #modalPhotosVehicule .modal-dialog { max-width: 95%; margin: 10px auto; } .vehicule-modal-sidebar { margin-top: 20px; } .vehicule-modal-thumbnails { max-height: 200px; } .vehicule-modal-thumbnail img { height: 120px; } } /* ================================ NOUVEAU DESIGN MOTO 2025 ================================ */ /* Header section avec overlay */ .moto-header-section { position: relative; height: 100vh; overflow: hidden; } .moto-header-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; padding: 80px 0 64px 0; } /* Informations techniques overlay */ .moto-tech-info-top, .moto-tech-info-bottom { display: flex; justify-content: space-around; align-items: center; gap: 32px; position: absolute; bottom: 30px; left: 0; right: 0; padding: 16px; } .moto-tech-item { width:33%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 32px; } .moto-tech-label { color: #7C7C7C; font-size: 16px; font-weight: 400; margin-bottom: 8px; } .moto-tech-value { color: #FFFFFF; font-size: 20px; font-weight: 600; } .moto-tech-separator { width: 1px; height: 50px; background: linear-gradient(0deg, #14141400 0%, #7C7C7C 50.96%, #14141400 100%); } /* Contenu principal du header */ .moto-header-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1; gap: 64px; } .moto-header-title h1 { color: #FBFBFB; font-size: 48px; font-weight: 600; margin-bottom: 16px; line-height: normal; } .moto-header-title h2 { color: #E1E1E1; font-size: 16px; font-weight: 400; margin-bottom: 0; line-height: normal; } .moto-header-actions { display: flex; gap: 16px; justify-content: center; } .moto-header-actions .btn-site { min-width: 175px; } /* Section présentation */ .moto-presentation-section { background: rgba(0, 0, 0, 0.73); padding: 64px 0; } .moto-vehicle-image { margin-bottom: 64px; } .moto-vehicle-image img { max-height: 400px; width: auto; object-fit: contain; } .moto-presentation-content h3 { color: #FFFFFF; font-size: 32px; font-weight: 600; margin-bottom: 16px; text-align: center; } .moto-separator { width: 100%; height: 1px; background: #434343; margin: 32px 0; } .moto-description { color: #FFFFFF; font-size: 16px; font-weight: 400; line-height: 1.6; text-align: center; max-width: 834px; margin: 0 auto; } /* Sections de contenu alternées */ .moto-content-section { min-height: 516px; } .moto-content-image img { width: 100%; height: 516px; object-fit: cover; } .moto-content-text { background: #141414; height: 100%; display: flex; align-items: center; padding: 0 64px; } .moto-content-text-inner { width: 100%; } .moto-content-text h3 { color: #FBFBFB; font-size: 24px; font-weight: 600; margin-bottom: 8px; } .moto-content-text h4 { color: #E1E1E1; font-size: 16px; font-weight: 400; margin-bottom: 0; } .moto-text-content { color: #FBFBFB; font-size: 16px; font-weight: 400; line-height: 1.6; } /* Grille des caractéristiques techniques */ .moto-tech-specs-section { padding: 64px 0; } .moto-tech-specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .moto-tech-spec-item { background: #1C1C1C; border: 1px solid #434343; border-radius: 2px; padding: 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; min-height: 110px; justify-content: center; } .moto-tech-spec-label { color: #7C7C7C; font-size: 16px; font-weight: 400; } .moto-tech-spec-value { color: #FFFFFF; font-size: 20px; font-weight: 600; } /* Galerie photos en mosaïque */ .moto-gallery-section { padding: 64px 0 0 0; } .moto-gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, 362px); gap: 16px; padding: 0 16px; } .moto-gallery-item img { width: 100%; height: 100%; object-fit: cover; } .moto-gallery-item-1 { grid-column: span 6; grid-row: span 1; } .moto-gallery-item-2 { grid-column: span 3; grid-row: span 1; } .moto-gallery-item-3 { grid-column: span 3; grid-row: span 1; } .moto-gallery-item-4 { grid-column: span 3; grid-row: span 1; } .moto-gallery-item-5 { grid-column: span 6; grid-row: span 1; } .moto-gallery-item-6 { grid-column: span 3; grid-row: span 1; } /* Section formulaire de réservation */ .moto-booking-section { background: #222222; padding: 64px 0; } .moto-booking-header { margin-bottom: 64px; } .moto-booking-header h3 { color: #FFFFFF; font-size: 32px; font-weight: 600; margin-bottom: 16px; } .moto-booking-header h4 { color: #FBFBFB; font-size: 16px; font-weight: 400; margin-bottom: 0; } .moto-booking-form { max-width: 1312px; margin: 0 auto; } .moto-form-group { margin-bottom: 32px; } .moto-form-label { color: #FBFBFB; font-size: 16px; font-weight: 400; margin-bottom: 8px; display: block; } .moto-form-input, .moto-form-select { background: #1C1C1C; border: 1px solid #434343; border-radius: 2px; color: #7C7C7C; font-size: 16px; font-weight: 400; padding: 16px; width: 100%; transition: all 0.3s ease; } .moto-form-input:focus, .moto-form-select:focus { outline: none; border-color: #FBFBFB; color: #FBFBFB; } .moto-form-input::placeholder { color: #7C7C7C; } /* Radio buttons style */ .moto-radio-group { display: flex; gap: 32px; align-items: center; } .moto-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; color: #FFFFFF; font-size: 16px; font-weight: 400; } .moto-radio input[type="radio"] { display: none; } .moto-radio-mark { width: 16px; height: 16px; border: 1px solid #434343; background: #1C1C1C; border-radius: 50%; position: relative; transition: all 0.3s ease; } .moto-radio input[type="radio"]:checked + .moto-radio-mark { border-color: #FBFBFB; background: #FBFBFB; } .moto-radio input[type="radio"]:checked + .moto-radio-mark::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background: #222222; border-radius: 50%; } .moto-form-submit { text-align: center; margin-top: 32px; } /* Responsive Design */ @media (max-width: 1200px) { .moto-gallery-grid { grid-template-columns: repeat(8, 1fr); } .moto-gallery-item-1 { grid-column: span 4; } .moto-gallery-item-2, .moto-gallery-item-3 { grid-column: span 2; } .moto-gallery-item-4, .moto-gallery-item-5 { grid-column: span 4; } .moto-gallery-item-6 { grid-column: span 4; } } @media (max-width: 992px) { .moto-header-title h1 { font-size: 36px; } .moto-tech-specs-grid { grid-template-columns: repeat(2, 1fr); } .moto-content-text { padding: 40px; } .moto-gallery-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 250px); } .moto-gallery-item-1, .moto-gallery-item-2, .moto-gallery-item-3, .moto-gallery-item-4, .moto-gallery-item-5, .moto-gallery-item-6 { grid-column: span 2; grid-row: span 1; } } @media (max-width: 768px) { .moto-header-overlay { padding: 80px 0 32px 0; } .moto-header-title h1 { font-size: 28px; } .moto-header-actions { flex-direction: column; gap: 12px; width:100%; } .moto-tech-info-bottom { flex-direction: row; gap: 8px; } .moto-tech-item{padding:0 8px;} .moto-tech-specs-grid { grid-template-columns: 1fr; } .moto-content-text { padding: 32px 24px; } .moto-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 200px); } .moto-gallery-item-1, .moto-gallery-item-2, .moto-gallery-item-3, .moto-gallery-item-4, .moto-gallery-item-5, .moto-gallery-item-6 { grid-column: span 1; } .moto-radio-group { flex-direction: column; align-items: flex-start; gap: 16px; } .moto-presentation-content h3 { font-size: 24px; } .moto-booking-header h3 { font-size: 24px; } } /* === MOTOPARK VILLAGE === */ .h-100vh { height: 100vh; } #motopark_slider .home_slide_item { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; } #motopark_slider .home_slide_item_image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } #motopark_slider .home_slide_item_title { position: relative; z-index: 2; text-align: center; color: white; } .service_card { background: rgba(0, 0, 0, 0.8); border-radius: 8px; overflow: hidden; transition: transform 0.3s ease; } .service_card:hover { transform: translateY(-5px); } .service_card_image { height: 200px; overflow: hidden; } .service_card_content { padding: 20px; } .service_card_title { font-size: 1.2rem; margin-bottom: 10px; color: white; } .service_card_description { font-size: 0.9rem; line-height: 1.4; } .bloc_list_marques { background: #f8f9fa; padding: 60px 0; } .bloc_list_marques .marque_item { height: 80px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 8px; padding: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease; } .bloc_list_marques .marque_item:hover { transform: translateY(-3px); } @media (max-width: 768px) { .h-100vh { height: 70vh; } #motopark_slider .home_slide_item_title h3 { font-size: 1.5rem; } .service_card_image { height: 150px; } .service_card_content { padding: 15px; } } /* Styles personnalisés pour les contrôles Google Maps */ .gm-style .gm-control-active { background-color: #222 !important; border: 1px solid #434343 !important; border-radius: 2px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important; } .gm-style .gm-control-active:hover { background-color: #1A1A1A !important; border-color: #434343 !important; } .gm-style .gm-control-active:active { background-color: #1A1A1A !important; border-color: #434343 !important; } /* Boutons de zoom spécifiquement */ .gm-style .gm-zoom-in, .gm-style .gm-zoom-out { background-color: #222 !important; border: 1px solid #434343 !important; border-radius: 2px !important; color: #FBFBFB !important; font-weight: 600 !important; transition: all 0.3s ease !important; } .gm-style .gm-zoom-in:hover, .gm-style .gm-zoom-out:hover { background-color: #1A1A1A !important; border-color: #434343 !important; color: #FBFBFB !important; } .gm-style .gm-zoom-in:active, .gm-style .gm-zoom-out:active { background-color: #1A1A1A !important; border-color: #434343 !important; color: #FFFFFF !important; } /* Boutons de déplacement (pan) */ .gm-style .gm-pan-control { background-color: #222 !important; border: 1px solid #434343 !important; border-radius: 2px !important; } .gm-style .gm-pan-control button { background-color: #222 !important; border: 1px solid #434343 !important; color: #FBFBFB !important; transition: all 0.3s ease !important; } .gm-style .gm-pan-control button:hover { background-color: #1A1A1A !important; border-color: #434343 !important; } .gm-style .gm-pan-control button:active { background-color: #1A1A1A !important; border-color: #434343 !important; } /* Icônes dans les boutons */ .gm-style .gm-control-active img { filter: brightness(0) invert(1) !important; /* Rend les icônes blanches */ } .gm-style .gm-control-active:hover img { filter: brightness(0) invert(1) !important; } /* Conteneur des contrôles */ .gm-style .gm-controls { background: transparent !important; } .pointsdevente_legende{display:flex; flex-direction:row; gap:24px; margin-top:16px}