/** * Surcharge de style — Template Ford E-Transit Custom * Source visuelle : documentation/LP-Ford (FlexStart Bootstrap) * * Ce fichier surcharge style.css. Il est chargé APRÈS dans header.twig. * Variables et règles ciblées pour rapprocher le rendu de la maquette. */ /* ============================================================ # Variables de couleurs Ford ============================================================ */ :root { --accent-color: #4154f1; --heading-color: #012970; --contrast-color: #ffffff; --nav-color: #012970; --nav-hover-color: #4154f1; } .dark-background { --background-color: #012970; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #ffffff; --contrast-color: #ffffff; } .light-background { --background-color: #f9f9f9; --surface-color: #ffffff; } /* ============================================================ # Header / Logo ------------------------------------------------------------ Sur les pages avec un hero (sélecteur :has(.bloc_lead_one) sur ), le header est en absolute, transparent au chargement et bascule en blanc + ombre quand reçoit la classe .scrolled (ajoutée par /js/1/website.js). ============================================================ */ .header { background-color: #ffffff; padding: 12px 0; box-shadow: 0 1px 0 rgb(0 0 0 / 5%); transition: background-color 0.4s ease, box-shadow 0.4s ease; z-index: 997; } .header .logo img { max-height: 60px; width: auto; } /* Pages avec hero : header au-dessus du visuel, transparent par défaut */ body:has(.bloc_lead_one) .header { position: fixed; top: 0; left: 0; right: 0; background-color: transparent; box-shadow: none; } /* Au scroll : header redevient solide */ body.scrolled .header { background-color: #ffffff; box-shadow: 0 0 18px rgb(0 0 0 / 10%); } /* Fallback pour navigateurs sans :has() — garde le header lisible */ @supports not selector(:has(*)) { .header { background-color: #ffffff; } } /* ============================================================ # Hero — Bloc Gauche Form ------------------------------------------------------------ Section pleine hauteur, image de fond qui démarre en haut de la page (header en absolute par-dessus). Pas de voile coloré : on laisse l'image respirer. ============================================================ */ .hero, .bloc_lead_one { min-height: 100vh; padding: 120px 0 60px; margin-top: 0; position: relative; display: flex; align-items: center; } .hero .hero-bg { object-position: center; z-index: 0; } .hero .container { position: relative; z-index: 2; } .hero h1, .hero .h1 { font-size: 50px; font-weight: 900; line-height: 1.1; color: #ffffff; padding-top: 0; margin-bottom: 16px; letter-spacing: 0.5px; } .hero h2, .hero .hero-subtitle { font-size: 30px; font-weight: 800; color: #ffffff; padding-bottom: 18px; line-height: 1.25; } .hero .hero-text, .hero p { color: #000; font-size: 18px; line-height: 1.5; } .hero .hero-text p, .hero .hero-text strong, .hero .hero-text span, .hero .hero-text sup { color: #ffffff; } .hero .btn-get-started { color: #ffffff; background: var(--accent-color); font-weight: 600; font-size: 16px; letter-spacing: 1px; padding: 12px 36px; border-radius: 4px; box-shadow: 0 8px 28px rgb(0 0 0 / 20%); border: 0; } .hero .btn-get-started:hover { background: color-mix(in srgb, var(--accent-color), transparent 15%); color: #ffffff; } @media (max-width: 991px) { .hero h1, .hero .h1 { font-size: 32px; } .hero h2, .hero .hero-subtitle { font-size: 22px; } .hero .hero-text, .hero p { font-size: 16px; } } /* ============================================================ # Formulaire (carte blanche translucide à droite du hero) ============================================================ */ .formulaire { background: #ffffff; border-radius: 8px; box-shadow: 0 0 29px rgb(68 88 144 / 25%); padding: 30px; color: var(--heading-color); text-align: center; } .formulaire h4 { color: var(--heading-color); font-size: 24px; font-weight: 700; margin-bottom: 18px; } /* ============================================================ # Alt Features (bloc_avantages_icones_texte_1) Reproduit le rendu .values du LP-Ford : cards blanches avec image en haut, titre H3 et texte centré. ============================================================ */ .alt-features { background-color: #ffffff; color: var(--heading-color); padding: 60px 0; } .alt-features.dark-background { --background-color: #ffffff; --default-color: #444444; --heading-color: #012970; } .alt-features h2 { color: var(--heading-color); font-weight: 700; text-align: center; padding-bottom: 30px; } .alt-features .row { --bs-gutter-y: 1.5rem; } .alt-features .icon-box { display: block; flex: 0 0 25%; max-width: 25%; background: #ffffff; box-shadow: 0 0 10px rgb(0 0 0 / 10%); text-align: center; padding: 0 0 20px; transition: 0.3s; height: auto; } .alt-features .icon-box:hover { box-shadow: 0 0 30px rgb(0 0 0 / 15%); } .alt-features .icon-box .icone { max-width: 100%; width: 100%; margin: 0 0 18px; overflow: hidden; } .alt-features .icon-box .icone img { width: 100%; height: auto; margin: 0; display: block; transition: 0.5s; aspect-ratio: 440 / 289; object-fit: cover; } .alt-features .icon-box:hover .icone img { transform: scale(0.96); } .alt-features .icon-box h3 { font-size: 22px; font-weight: 700; color: var(--heading-color); padding: 0 30px; margin: 0 0 6px; } .alt-features .icon-box p { color: var(--heading-color); padding: 0 30px; margin: 0; font-size: 15px; } @media (max-width: 991px) { .alt-features .icon-box { flex: 0 0 50%; max-width: 50%; } } @media (max-width: 575px) { .alt-features .icon-box { flex: 0 0 100%; max-width: 100%; } } /* ============================================================ # Text-Image Section (bloc_texte_image) Style "About" du LP-Ford : panneau bleu pâle sur le texte, H3 surligné en accent, image en regard. ============================================================ */ .text-image-section { background: #ffffff; padding: 40px 0 60px; } .text-image-section .text-image-item { background-color: color-mix(in srgb, var(--accent-color), transparent 95%); padding: 40px; border-radius: 4px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .text-image-section .text-image-item h3 { font-size: 14px; font-weight: 700; color: var(--accent-color); text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px; } /* Titre produit (gros) injecté via le HTML du champ texte */ .text-image-section .text-image-item .product-title { font-size: 26px; font-weight: 700; color: var(--heading-color); margin: 0 0 16px; line-height: 1.2; text-transform: none; } .text-image-section .text-image-item div { color: var(--default-color); font-size: 16px; line-height: 1.6; margin-bottom: 24px; } .text-image-section .text-image-item div p { color: var(--default-color); margin-bottom: 0; } .text-image-section .text-image-item .btn-primary { color: #ffffff; background: var(--accent-color); border-color: var(--accent-color); padding: 12px 32px; border-radius: 4px; font-weight: 600; align-self: flex-start; } .text-image-section .text-image-item .btn-primary:hover { background: color-mix(in srgb, var(--accent-color), transparent 15%); border-color: color-mix(in srgb, var(--accent-color), transparent 15%); } .text-image-section img.rounded, .text-image-section img.shadow { border-radius: 0 !important; box-shadow: none !important; } .text-image-section img { width: 100%; height: auto; object-fit: cover; } /* ============================================================ # Services (bloc_cartes_action) Reproduit le rendu .services du LP-Ford : cartes blanches, image en haut, titre, texte, lien "Découvrir" en bas. ============================================================ */ .services { background-color: #f9f9f9; padding: 60px 0; } .services .section-title { padding-bottom: 40px; } .services .section-title h2 { color: var(--heading-color); font-size: 32px; font-weight: 700; background: transparent; padding: 0; text-transform: none; letter-spacing: 0; border-radius: 0; display: block; text-align: center; line-height: 1.25; } .services .section-title h2 .title-main { display: block; font-size: 32px; font-weight: 800; color: var(--heading-color); } .services .section-title h2 .title-sub { display: block; margin-top: 8px; font-size: 18px; font-weight: 400; color: color-mix(in srgb, var(--default-color), transparent 20%); text-transform: none; } .services .service-item { background-color: #ffffff; box-shadow: 0 0 30px rgb(0 0 0 / 10%); padding: 0 0 30px; text-align: center; border-radius: 5px; overflow: hidden; border-bottom: 3px solid var(--heading-color); transition: 0.3s; height: 100%; display: flex; flex-direction: column; } .services .service-item:hover { transform: translateY(-6px); background: var(--heading-color); } .services .service-item .icon { font-size: inherit; padding: 0; border-radius: 0; margin-bottom: 20px; display: block; line-height: 0; background: transparent !important; } .services .service-item .icon img { width: 100%; height: auto; display: block; aspect-ratio: 1000 / 667; object-fit: cover; } .services .service-item h3 { font-size: 22px; font-weight: 700; color: var(--heading-color); margin: 10px 30px 15px; text-align: center; } .services .service-item .carte-texte, .services .service-item .carte-texte p { color: var(--default-color); font-size: 14px; line-height: 1.6; margin: 0 30px 20px; text-align: left; } .services .service-item .read-more { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--heading-color); font-weight: 600; font-size: 15px; padding: 8px 20px; box-shadow: none; border-radius: 0; margin: 0 30px; } .services .service-item .read-more:hover { background: transparent; color: var(--accent-color); padding-right: 25px; } .services .service-item:hover h3, .services .service-item:hover .carte-texte, .services .service-item:hover .carte-texte p, .services .service-item:hover .read-more { color: #ffffff; } /* ============================================================ # FAQ — Accordéon Bootstrap 4 stylé sobre ============================================================ */ .faq { background: #ffffff; padding: 60px 0; } .faq h2 { color: var(--heading-color); font-size: 32px; font-weight: 700; text-align: center; padding-bottom: 30px; } .faq #faq-accordion .card { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); border-radius: 0; background: transparent; margin-bottom: 0; } .faq #faq-accordion .card-header { background: transparent; border: 0; padding: 8px 0; } .faq #faq-accordion .card-header h3 { margin: 0; } .faq #faq-accordion .btn-link { color: var(--heading-color); font-size: 17px; font-weight: 600; padding: 12px 36px 12px 0; width: 100%; text-align: left; text-decoration: none; position: relative; white-space: normal; } .faq #faq-accordion .btn-link:hover, .faq #faq-accordion .btn-link:focus { color: var(--accent-color); text-decoration: none; box-shadow: none; } .faq #faq-accordion .btn-link::after { content: "\203A"; position: absolute; top: 50%; right: 6px; font-size: 24px; line-height: 0; color: var(--accent-color); transform: translateY(-50%) rotate(90deg); transition: transform 0.3s ease; } .faq #faq-accordion .btn-link.collapsed::after { transform: translateY(-50%) rotate(0deg); color: inherit; } .faq #faq-accordion .card-body { color: var(--default-color); font-size: 15px; line-height: 1.6; padding: 0 0 18px; } .faq #faq-accordion .card-body p { margin-bottom: 0; } /* ============================================================ # Footer ============================================================ */ .footer { background-color: color-mix(in srgb, var(--accent-color), transparent 97%); color: #000; } .footer .copyright { border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .footer h4,.footer a,.footer .footer-links ul a, .footer .btn-link,h4.card-title { color: #000; } #form_service .section_description { color: #000; } .hero small p{ font-size: 11px; } .hero p.lead{ margin-bottom: 0; }