.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:"Orbitron";--e-global-typography-primary-font-size:18px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Orbitron";--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;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:"Orbitron", Sans-serif;font-size:64px;font-weight:700;line-height:80px;}.elementor-kit-6 h2{font-family:"Orbitron", Sans-serif;font-size:48px;font-weight:700;line-height:64px;}.elementor-kit-6 h3{font-family:"Orbitron", Sans-serif;font-size:32px;font-weight:700;text-transform:uppercase;line-height:40px;}.elementor-kit-6 h4{font-family:"Orbitron", Sans-serif;font-size:24px;font-weight:700;}.elementor-kit-6 h5{font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--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{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 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{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:36px;line-height:1.4em;}.elementor-kit-6 h2{font-size:28px;line-height:1.2em;}.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 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. 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; } /* ================================================== 7. 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; } /* ================================================== 8. 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; } /* ================================================== 9. 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; } /* ================================================== 10. ACCESSIBILITÉ ================================================== */ @media (prefers-reduced-motion: reduce) { #site-header, #site-header *, #site-header .header-nav a, #site-header .header-nav button { transition: none !important; } } /* CARDS */ /* * Asphalt stock cards — pure CSS version * No JavaScript, no ResizeObserver, no calculated masonry rows. * * Loop Grid widget class: * stock-loop-grid * * Card structure: * stock-card * stock-card__image * Top * stock-card__reveal * stock-card__bottom (single direct child of reveal) */ /* Elementor Loop Grid variables. Column count stays responsive in the UI. */ .stock-loop-grid { --grid-column-gap: 28px; --grid-row-gap: 48px; } .stock-loop-grid .elementor-loop-container, .stock-loop-grid .e-loop-item { overflow: visible; } .stock-card { --card-ease: cubic-bezier(.22, 1, .36, 1); position: relative; width: 100%; min-height: 0 !important; overflow: visible; background: transparent; } .stock-card__image { overflow: hidden; } .stock-card__image img { display: block; width: 100%; transition: transform 900ms var(--card-ease); will-change: transform; } /* * The reveal container must have exactly one direct child: stock-card__bottom. * Animating a 0fr/1fr grid track gives us the real content height without JS. */ @media (hover: hover) and (pointer: fine) { .stock-card__reveal { display: grid !important; grid-template-rows: 0fr; overflow: hidden; opacity: 0; pointer-events: none; transition: grid-template-rows 800ms cubic-bezier(.2, .72, .24, 1), opacity 420ms ease; } .stock-card__bottom { min-height: 0 !important; overflow: hidden; padding-top: 0 !important; padding-bottom: 0 !important; opacity: 0; transform: translateY(-8px); transition: padding 800ms cubic-bezier(.2, .72, .24, 1), opacity 480ms ease, transform 650ms var(--card-ease); } .stock-card:hover .stock-card__reveal, .stock-card:focus-within .stock-card__reveal { grid-template-rows: 1fr; opacity: 1; pointer-events: auto; } .stock-card:hover .stock-card__bottom, .stock-card:focus-within .stock-card__bottom { padding-top: 16px !important; padding-bottom: 16px !important; opacity: 1; transform: translateY(0); } .stock-card:hover .stock-card__image img, .stock-card:focus-within .stock-card__image img { transform: scale(1.02); } } /* Touch devices have no dependable hover, so useful information stays visible. */ @media (hover: none), (pointer: coarse) { .stock-card__reveal { display: grid !important; grid-template-rows: 1fr; opacity: 1; } .stock-card__bottom { min-height: 0 !important; overflow: hidden; padding-top: 16px !important; padding-bottom: 16px !important; opacity: 1; transform: none; } } @media (max-width: 1024px) { .stock-loop-grid { --grid-column-gap: 20px; --grid-row-gap: 36px; } } @media (max-width: 767px) { .stock-loop-grid { --grid-row-gap: 28px; } } @media (prefers-reduced-motion: reduce) { .stock-card__image img, .stock-card__reveal, .stock-card__bottom { transition-duration: .01ms !important; } }/* End custom CSS */