.elementor-kit-6{--e-global-color-primary:#E51B1F;--e-global-color-secondary:#131110;--e-global-color-text:#010101;--e-global-color-accent:#E8E0DD;--e-global-color-1d0193f:#C7C8C6;--e-global-color-a5e785c:#FBFBFB;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-size:18px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-size:18px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Barlow";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"Barlow";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:500;--e-global-typography-da39890-font-family:"Barlow";--e-global-typography-da39890-font-size:14px;--e-global-typography-da39890-font-weight:600;--e-global-typography-da39890-text-transform:uppercase;--e-global-typography-da39890-letter-spacing:2px;--e-global-typography-d70053b-font-family:"Manrope";--e-global-typography-d70053b-font-size:64px;--e-global-typography-d70053b-font-weight:700;--e-global-typography-d70053b-text-transform:uppercase;--e-global-typography-d70053b-line-height:80px;--e-global-typography-1e3e255-font-family:"Manrope";--e-global-typography-1e3e255-font-size:48px;--e-global-typography-1e3e255-font-weight:700;--e-global-typography-1e3e255-text-transform:uppercase;--e-global-typography-1e3e255-line-height:64px;--e-global-typography-0a6c5ba-font-family:"Manrope";--e-global-typography-0a6c5ba-font-size:32px;--e-global-typography-0a6c5ba-font-weight:700;--e-global-typography-0a6c5ba-text-transform:uppercase;--e-global-typography-0a6c5ba-line-height:40px;--e-global-typography-e9b23e9-font-family:"Manrope";--e-global-typography-e9b23e9-font-size:24px;--e-global-typography-e9b23e9-font-weight:700;--e-global-typography-20bc0a5-font-family:"Manrope";--e-global-typography-20bc0a5-font-size:20px;--e-global-typography-89ec56b-font-family:"Manrope";--e-global-typography-89ec56b-font-size:18px;--e-global-typography-89ec56b-font-weight:700;--e-global-typography-89ec56b-text-transform:uppercase;--e-global-typography-89ec56b-line-height:18px;background-color:var( --e-global-color-a5e785c );color:var( --e-global-color-secondary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-secondary );font-family:var( --e-global-typography-da39890-font-family ), Sans-serif;font-size:var( --e-global-typography-da39890-font-size );font-weight:var( --e-global-typography-da39890-font-weight );text-transform:var( --e-global-typography-da39890-text-transform );letter-spacing:var( --e-global-typography-da39890-letter-spacing );color:var( --e-global-color-1d0193f );border-radius:0px 0px 0px 0px;padding:16px 024px 16px 024px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-6 h1{font-family:var( --e-global-typography-d70053b-font-family ), Sans-serif;font-size:var( --e-global-typography-d70053b-font-size );font-weight:var( --e-global-typography-d70053b-font-weight );text-transform:var( --e-global-typography-d70053b-text-transform );line-height:var( --e-global-typography-d70053b-line-height );}.elementor-kit-6 h2{font-family:var( --e-global-typography-1e3e255-font-family ), Sans-serif;font-size:var( --e-global-typography-1e3e255-font-size );font-weight:var( --e-global-typography-1e3e255-font-weight );text-transform:var( --e-global-typography-1e3e255-text-transform );line-height:var( --e-global-typography-1e3e255-line-height );}.elementor-kit-6 h3{font-family:var( --e-global-typography-0a6c5ba-font-family ), Sans-serif;font-size:var( --e-global-typography-0a6c5ba-font-size );font-weight:var( --e-global-typography-0a6c5ba-font-weight );text-transform:var( --e-global-typography-0a6c5ba-text-transform );line-height:var( --e-global-typography-0a6c5ba-line-height );}.elementor-kit-6 h4{font-family:var( --e-global-typography-e9b23e9-font-family ), Sans-serif;font-size:var( --e-global-typography-e9b23e9-font-size );font-weight:var( --e-global-typography-e9b23e9-font-weight );}.elementor-kit-6 h5{font-family:"Manrope", Sans-serif;font-size:20px;}.elementor-kit-6 h6{font-family:"Manrope", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-1e3e255-font-size:48px;font-size:var( --e-global-typography-text-font-size );}.elementor-kit-6 a{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-6 h1{font-size:var( --e-global-typography-d70053b-font-size );line-height:var( --e-global-typography-d70053b-line-height );}.elementor-kit-6 h2{font-size:var( --e-global-typography-1e3e255-font-size );line-height:var( --e-global-typography-1e3e255-line-height );}.elementor-kit-6 h3{font-size:var( --e-global-typography-0a6c5ba-font-size );line-height:var( --e-global-typography-0a6c5ba-line-height );}.elementor-kit-6 h4{font-size:var( --e-global-typography-e9b23e9-font-size );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-da39890-font-size );letter-spacing:var( --e-global-typography-da39890-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-d70053b-font-size:28px;--e-global-typography-1e3e255-font-size:24px;--e-global-typography-1e3e255-line-height:1.3em;--e-global-typography-0a6c5ba-font-size:20px;font-size:var( --e-global-typography-text-font-size );}.elementor-kit-6 a{font-size:var( --e-global-typography-text-font-size );}.elementor-kit-6 h1{font-size:var( --e-global-typography-d70053b-font-size );line-height:var( --e-global-typography-d70053b-line-height );}.elementor-kit-6 h2{font-size:var( --e-global-typography-1e3e255-font-size );line-height:var( --e-global-typography-1e3e255-line-height );}.elementor-kit-6 h3{font-size:var( --e-global-typography-0a6c5ba-font-size );line-height:var( --e-global-typography-0a6c5ba-line-height );}.elementor-kit-6 h4{font-size:var( --e-global-typography-e9b23e9-font-size );}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-size:var( --e-global-typography-da39890-font-size );letter-spacing:var( --e-global-typography-da39890-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ================================================== ASPHALT — HEADER DYNAMIQUE ================================================== */ /* ================================================== 1. LA HERO REMONTE DERRIÈRE LE HEADER ================================================== */ #page-hero { margin-top: calc(-1 * var(--site-header-height, 80px)); } /* ================================================== 2. HEADER AU-DESSUS DE LA HERO ================================================== */ #site-header { --header-text-color: #ffffff; width: 100%; z-index: 1000; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.24) 58%, rgba(0, 0, 0, 0) 100% ) !important; box-shadow: none; transition: background-color 0.3s ease, box-shadow 0.3s ease; } /* ================================================== 3. HEADER APRÈS LA HERO ================================================== */ #site-header.is-past-hero { --header-text-color: #111111; background: #ffffff !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); } /* ================================================== 4. COULEUR DE LA NAVIGATION ================================================== */ #site-header .header-nav a, #site-header .header-nav button, #site-header .header-nav .elementor-item, #site-header .header-nav .e-n-menu-title, #site-header .header-nav .e-n-menu-title-text, #site-header .header-nav .elementor-menu-toggle { color: var(--header-text-color) !important; fill: var(--header-text-color) !important; transition: color 0.25s ease, fill 0.25s ease; } /* ================================================== 5. ICÔNES DE LA NAVIGATION ET MENU MOBILE ================================================== */ #site-header .header-nav svg, #site-header .header-nav svg path { color: currentColor; fill: currentColor; transition: color 0.25s ease, fill 0.25s ease; } /* ================================================== 6. ICÔNE BURGER PERSONNALISÉE Classe Elementor : icon_burger ================================================== */ #site-header .icon_burger, #site-header .icon_burger a, #site-header .icon_burger button, #site-header .icon_burger i, #site-header .icon_burger svg { color: var(--header-text-color) !important; fill: var(--header-text-color) !important; stroke: var(--header-text-color) !important; transition: color 0.25s ease, fill 0.25s ease, stroke 0.25s ease; } #site-header .icon_burger svg path, #site-header .icon_burger svg line, #site-header .icon_burger svg rect, #site-header .icon_burger svg polyline, #site-header .icon_burger svg polygon, #site-header .icon_burger svg circle { color: var(--header-text-color) !important; fill: var(--header-text-color) !important; stroke: var(--header-text-color) !important; transition: color 0.25s ease, fill 0.25s ease, stroke 0.25s ease; } /* ================================================== 7. LIEN ACTIF ================================================== */ #site-header .header-nav .elementor-item-active, #site-header .header-nav .current-menu-item > a, #site-header .header-nav .current_page_item > a { color: var(--header-text-color) !important; fill: var(--header-text-color) !important; } /* ================================================== 8. COULEUR AU SURVOL ================================================== */ #site-header .header-nav a:hover, #site-header .header-nav button:hover, #site-header .header-nav .elementor-item:hover, #site-header .header-nav .e-n-menu-title:hover { color: #e31b23 !important; fill: #e31b23 !important; } /* ================================================== 9. MENUS DÉROULANTS ================================================== */ #site-header .header-nav .sub-menu, #site-header .header-nav .elementor-nav-menu--dropdown { background-color: #ffffff !important; } #site-header .header-nav .sub-menu a, #site-header .header-nav .elementor-nav-menu--dropdown a { color: #111111 !important; fill: #111111 !important; } #site-header .header-nav .sub-menu a:hover, #site-header .header-nav .elementor-nav-menu--dropdown a:hover { color: #e31b23 !important; fill: #e31b23 !important; } /* ================================================== 10. ALTERNANCE DES LOGOS Les dimensions restent gérées par Elementor ================================================== */ /* Au-dessus de la hero : logo blanc */ #site-header .logo-light { display: block !important; } #site-header .logo-dark { display: none !important; } /* Après la hero : logo noir */ #site-header.is-past-hero .logo-light { display: none !important; } #site-header.is-past-hero .logo-dark { display: block !important; } /* ================================================== 11. ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { #site-header, #site-header *, #site-header .header-nav a, #site-header .header-nav button, #site-header .icon_burger, #site-header .icon_burger * { transition: none !important; } } /* ================================================== HEADER TOUJOURS TRANSPARENT SUR /ktm-x-bow ================================================== */ #site-header.is-always-transparent { --header-text-color: #ffffff; background: transparent !important; box-shadow: none !important; } /* Logo blanc permanent */ #site-header.is-always-transparent .logo-light { display: block !important; } #site-header.is-always-transparent .logo-dark { display: none !important; } /* Navigation blanche permanente */ #site-header.is-always-transparent .header-nav a, #site-header.is-always-transparent .header-nav button, #site-header.is-always-transparent .header-nav .elementor-item, #site-header.is-always-transparent .header-nav .e-n-menu-title, #site-header.is-always-transparent .header-nav .e-n-menu-title-text, #site-header.is-always-transparent .elementor-menu-toggle { color: #ffffff !important; fill: #ffffff !important; } /* Burger blanc permanent */ #site-header.is-always-transparent .icon_burger, #site-header.is-always-transparent .icon_burger i, #site-header.is-always-transparent .icon_burger svg, #site-header.is-always-transparent .icon_burger svg * { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; } /* ======================================== MOSAÏQUE VÉHICULE ======================================== */ .vehicle-mosaic .gallery { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); /* Première ligne = hauteur naturelle */ grid-template-rows: auto; /* Toutes les lignes suivantes = mosaïque */ grid-auto-rows: clamp(70px, 8vw, 130px); grid-auto-flow: dense; gap: 4px; width: 100%; } /* ======================================== RESET ELEMENTOR ======================================== */ .vehicle-mosaic .gallery-item { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; overflow: hidden; position: relative; } .vehicle-mosaic .gallery-icon, .vehicle-mosaic .gallery-icon a { display: block; width: 100%; height: 100%; overflow: hidden; } /* ======================================== IMAGES ======================================== */ .vehicle-mosaic .gallery img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center; display: block; border: 0 !important; transition: transform 0.45s cubic-bezier(.2,.6,.2,1), filter 0.35s ease; } /* ======================================== PREMIÈRE PHOTO FULL WIDTH + RATIO ORIGINAL ======================================== */ .vehicle-mosaic .gallery-item:first-child { grid-column: 1 / -1 !important; grid-row: 1 !important; height: auto !important; aspect-ratio: auto !important; } .vehicle-mosaic .gallery-item:first-child .gallery-icon, .vehicle-mosaic .gallery-item:first-child .gallery-icon a { width: 100% !important; height: auto !important; } .vehicle-mosaic .gallery-item:first-child img { width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center; display: block; } /* ======================================== MOSAÏQUE APRÈS LA PREMIÈRE PHOTO ======================================== */ /* GRANDE GAUCHE 2, 12, 22, 32... */ .vehicle-mosaic .gallery-item:nth-child(10n + 2) { grid-column: 1 / span 2; grid-row: span 2; } /* PETITES À DROITE */ .vehicle-mosaic .gallery-item:nth-child(10n + 3), .vehicle-mosaic .gallery-item:nth-child(10n + 5) { grid-column: 3; } .vehicle-mosaic .gallery-item:nth-child(10n + 4), .vehicle-mosaic .gallery-item:nth-child(10n + 6) { grid-column: 4; } /* PETITES À GAUCHE */ .vehicle-mosaic .gallery-item:nth-child(10n + 7), .vehicle-mosaic .gallery-item:nth-child(10n + 9) { grid-column: 1; } .vehicle-mosaic .gallery-item:nth-child(10n + 8), .vehicle-mosaic .gallery-item:nth-child(10n + 10) { grid-column: 2; } /* GRANDE DROITE 11, 21, 31... */ .vehicle-mosaic .gallery-item:nth-child(10n + 11) { grid-column: 3 / span 2; grid-row: span 2; } /* ======================================== HOVER ======================================== */ @media (hover: hover) and (pointer: fine) { .vehicle-mosaic .gallery-item { cursor: zoom-in; } .vehicle-mosaic .gallery-item:hover img { transform: scale(1.035); filter: brightness(0.88); } } /* ======================================== TABLETTE ======================================== */ @media (max-width: 1024px) { .vehicle-mosaic .gallery { grid-auto-rows: clamp(65px, 10vw, 110px); } } /* ======================================== MOBILE ======================================== */ @media (max-width: 767px) { .vehicle-mosaic .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); /* première ligne toujours automatique */ grid-template-rows: auto; grid-auto-rows: 100px; gap: 4px; } /* Reset des positions desktop */ .vehicle-mosaic .gallery-item:not(:first-child) { grid-column: auto !important; grid-row: auto !important; } /* Première image */ .vehicle-mosaic .gallery-item:first-child { grid-column: 1 / -1 !important; grid-row: 1 !important; height: auto !important; } .vehicle-mosaic .gallery-item:first-child img { width: 100% !important; height: auto !important; } /* Grandes images après la première */ .vehicle-mosaic .gallery-item:nth-child(5n + 2) { grid-column: 1 / -1 !important; grid-row: span 2 !important; } } /* ======================================== ACCESSIBILITÉ ======================================== */ @media (prefers-reduced-motion: reduce) { .vehicle-mosaic .gallery img { transition: none; } .vehicle-mosaic .gallery-item:hover img { transform: none; } }/* End custom CSS */