/* ============================================================== Surcharges spécifiques au site — LP Assu Auto US Chargé après /css/1/style.css (cf. cadre/header.twig). Ne contient QUE les écarts entre le template générique et la maquette « LP Assu Auto Us » (documentation/LP Assu Auto Us). ============================================================== */ /* ============================================================== # Couleurs globales ============================================================== */ :root { --background-color: #ffffff; --default-color: #444444; --heading-color: #151515; --accent-color: #007dff; --surface-color: #ffffff; --contrast-color: #151515; } .light-background { --background-color: #f9f9f9; --surface-color: #ffffff; } /* --surface-color reste blanc : style.css l'utilise pour la couleur du texte du hero (.hero h1) et pour le fond des cartes .service-item. */ .dark-background { --background-color: #060606; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #ffffff; --contrast-color: #ffffff; } /* ============================================================== # Header (bloc_header) ============================================================== */ /* Bandeau fixe, transparent au-dessus du hero puis opaque au défilement. La classe `scrolled` est posée sur par /js/main.js dès 50px. */ #site-header { --default-color: #ffffff; --heading-color: #ffffff; position: fixed; top: 0; right: 0; left: 0; z-index: 1002; padding: 22px 0; background-color: transparent; box-shadow: none; transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease; } body.scrolled #site-header { padding: 12px 0; background-color: rgba(0, 0, 0, 0.85); box-shadow: 0 2px 18px rgba(0, 0, 0, 0.25); } @media (prefers-reduced-motion: reduce) { #site-header { transition: none; } } @media (min-width: 1200px) { #site-header .container-fluid { max-width: 1140px; } } .header .bloc_textes { float: none; } .header .bloc_texte_1, .header .bloc_texte_1 p { font-family: var(--nav-font); font-size: 30px; font-weight: 700; line-height: 1.1; color: #ffffff; margin: 0; } .header .bloc_texte_1 p::after { content: "."; color: var(--accent-color); } .header .bloc_texte_2, .header .bloc_texte_2 p { font-size: 15px; color: color-mix(in srgb, #ffffff, transparent 30%); margin: 0; } @media (max-width: 575.98px) { .header .bloc_texte_1, .header .bloc_texte_1 p { font-size: 22px; } } /* ============================================================== # Hero (bloc_gauche_form) ============================================================== */ /* Le header est fixe : le hero passe dessous, d'où le padding haut. */ .hero { min-height: 88vh; padding: 140px 0 70px; } .hero .hero-bg { object-position: center bottom; z-index: 1; } /* Voile sombre au-dessus de la photo de fond */ .hero::before { content: ""; background: color-mix(in srgb, var(--background-color), transparent 30%); position: absolute; inset: 0; z-index: 2; } /* 1001 = au-dessus de .overlay (z-index 1000, default.css), en permanence. #hero-content crée le contexte d'empilement du formulaire : c'est le seul niveau qui compte, un z-index posé sur le formulaire lui-même resterait prisonnier de ce conteneur. Valeur fixe et non conditionnée à une classe JS : le voile ne doit jamais pouvoir recouvrir le formulaire, même si le script inline ne s'exécute pas (WebView, minification, erreur JS). */ #hero-content { z-index: 1001; } .hero .left { padding-top: 30px; } .hero h1, .hero .h1 { font-family: var(--nav-font); font-size: 52px; font-weight: 700; line-height: 1.15; text-align: left; padding-top: 0; margin-bottom: 16px; } .hero .hero-subtitle.h2 { font-size: 24px; font-weight: 500; line-height: 1.35; text-align: left; color: color-mix(in srgb, #ffffff, transparent 20%); padding-bottom: 0; margin: 0 0 16px; } .hero .hero-text, .hero .hero-text p { font-size: 16px; text-align: left; color: color-mix(in srgb, #ffffff, transparent 25%); } /* Bouton fantôme de la maquette (bordure accent, fond transparent) */ .hero .btn-get-started, .hero .btn-get-started:focus { color: #ffffff; background: transparent; border: 2px solid var(--accent-color); border-radius: 4px; box-shadow: none; font-size: 18px; padding: 10px 30px; margin: 22px 0 0; } .hero .btn-get-started:hover, .hero .btn-get-started:focus:hover { color: #ffffff; background: var(--accent-color); } @media (max-width: 991.98px) { .hero { min-height: 0; padding: 110px 0 40px; } .hero h1, .hero .h1 { font-size: 34px; } .hero .hero-subtitle.h2 { font-size: 20px; } } /* -------------------------------------------------------------- Panneau formulaire du hero -------------------------------------------------------------- */ /* Le header fixe ne doit pas recouvrir le formulaire quand showForm() le fait défiler dans la vue. */ #form_service, #lead_form { scroll-margin-top: 100px; } /* -------------------------------------------------------------- Mise en avant du formulaire (showForm) -------------------------------------------------------------- Le passage du formulaire au-dessus du voile est traité plus haut par le z-index de #hero-content, sans JavaScript. Il ne reste ici que le confort visuel : estomper la colonne de gauche pour que le projecteur porte sur le seul formulaire. Si la classe n'est pas posée, on perd cet effet, pas la lisibilité du formulaire. -------------------------------------------- */ body.form-focus #hero-content .left { opacity: 0.25; pointer-events: none; } #hero-content .left { transition: opacity 0.3s ease; } @media (prefers-reduced-motion: reduce) { #hero-content .left { transition: none; } } #lead_form, #form-success { border-radius: 8px; box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.18); overflow: hidden; } #bloc_full_form .droite { padding: 10px 8px 20px; } #lead_form .form_title { font-family: var(--heading-font); font-size: 24px; font-weight: 700; line-height: 1.25; margin-bottom: 4px; } /* ============================================================== # Partenaires (bloc_partenaires_images) ============================================================== */ #clients { background-color: var(--background-color); padding: 45px 0 35px; } #clients h2 { font-family: var(--default-font); font-size: 14px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; color: color-mix(in srgb, var(--default-color), transparent 40%); padding-bottom: 22px; } #clients .swiper-slide img { opacity: 0.55; filter: grayscale(100%); transition: 0.3s; } #clients .swiper-slide img:hover { opacity: 1; filter: none; transform: none; } #clients .swiper-pagination { position: relative; margin-top: 18px; } #clients .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; background-color: color-mix(in srgb, var(--default-color), transparent 80%); } #clients .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--accent-color); } /* ============================================================== # Bandeaux d'appel à l'action (bloc_texte_action) ============================================================== */ .details.dark-background { position: relative; padding: 80px 0; background-color: #060606; background-position: center center; background-size: cover; background-repeat: no-repeat; } .details.dark-background::before { content: ""; position: absolute; inset: 0; background: rgba(6, 6, 6, 0.62); z-index: 1; } .details.dark-background > .container { position: relative; z-index: 2; } #cta-1 { background-image: url("/img/1/cta-bg.jpg"); } #cta-2 { background-image: url("/img/1/cta-bg-2.jpg"); } #cta-3 { background-image: url("/img/1/cta-bg-3.jpg"); } @media (min-width: 992px) { .details.dark-background { background-attachment: fixed; } } .details.dark-background h2 { font-size: 28px; font-weight: 700; color: #ffffff; margin-bottom: 16px; } .details.dark-background .cta-text, .details.dark-background .cta-text p { color: color-mix(in srgb, #ffffff, transparent 15%); margin-bottom: 0; } /* Bouton contour blanc de la maquette */ .details.dark-background .read-more { background: transparent; border: 2px solid #ffffff; color: #ffffff; margin-top: 22px; padding: 10px 38px; } .details.dark-background .read-more:hover { background: var(--accent-color); border-color: var(--accent-color); color: #ffffff; padding-right: 33px; } /* ============================================================== # Titres de section ============================================================== */ .section-title h2 { font-family: var(--heading-font); font-size: 34px; font-weight: 700; line-height: 1.25; text-align: center; text-transform: uppercase; color: var(--heading-color); margin: 0; } .section-title h2::after { content: ""; display: block; width: 120px; height: 2px; background: var(--accent-color); margin: 14px auto 0; } @media (max-width: 767.98px) { .section-title h2 { font-size: 24px; } } /* ============================================================== # Arguments (bloc_image_icones_textes — « features ») ============================================================== */ #features { background-color: var(--background-color); } #features .flex-grow-1 h4, #features .flex-grow-1 .h4 { font-size: 20px; font-weight: 700; color: var(--heading-color); margin-bottom: 6px; } /* Puce accent en remplacement des icônes de la maquette (aucune icône n'est renseignée dans le back-office pour ce bloc). */ #features .flex-grow-1 .h4::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--accent-color); margin-right: 12px; vertical-align: middle; } #features .item-texte, #features .item-texte p { font-size: 15px; color: color-mix(in srgb, var(--default-color), transparent 20%); margin-bottom: 0; } #features img.rounded { border-radius: 0 !important; width: 100%; object-fit: cover; } /* ============================================================== # Étapes (bloc_icones_textes_2 — « how it works ») ============================================================== */ #how-it-works .service-item { background-color: var(--surface-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); border-radius: 0; padding: 26px 20px; transition: all 0.3s ease-in-out; } #how-it-works .service-item:hover { box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1); transform: translateY(-10px); } #how-it-works .service-item .icon { width: 64px; height: 64px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: var(--accent-color); } #how-it-works .service-item .icon-number { font-family: var(--heading-font); font-size: 38px; font-weight: 700; line-height: 1; color: #ffffff; } #how-it-works .service-item h3 { font-size: 21px; font-weight: 700; color: var(--heading-color); margin: 10px 0 0; } /* ============================================================== # Garanties (bloc_image_icones_textes — « about ») ============================================================== */ #about { background-color: var(--background-color); } #about .flex-grow-1 .h4 { font-size: 18px; font-weight: 700; color: var(--heading-color); margin-bottom: 4px; } /* Coche accent, comme les bi-check2-all de la maquette */ #about .flex-grow-1 .h4::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--accent-color); margin-right: 10px; } #about .item-texte, #about .item-texte p { font-size: 15px; color: color-mix(in srgb, var(--default-color), transparent 20%); margin-bottom: 0; } #about img.rounded { border-radius: 0 !important; width: 100%; object-fit: cover; } /* ============================================================== # Footer ============================================================== */ .footer { background-color: #060606; color: color-mix(in srgb, #ffffff, transparent 25%); } .footer .footer-top { padding-top: 45px; } .footer .footer-disclaimer p { font-size: 13px; line-height: 1.7; text-align: center; color: color-mix(in srgb, #ffffff, transparent 35%); margin: 0; } .footer .footer-links { margin-bottom: 10px; } .footer .footer-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; } .footer .footer-links ul li { padding: 0; } .footer .footer-links ul a, .footer .footer-links ul .btn-link { font-size: 13px; color: color-mix(in srgb, #ffffff, transparent 30%); padding: 0; } .footer .footer-links ul a:hover, .footer .footer-links ul .btn-link:hover { color: var(--accent-color); } .footer .footer-legal { font-size: 12px; text-align: center; color: color-mix(in srgb, #ffffff, transparent 45%); } .footer .copyright { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 22px 10px; font-size: 13px; } .footer .copyright .sitename { color: #ffffff; }