/* * Surcharges propres au site alarma.comparer-changer.fr — chargées APRÈS * style.css, default.css et blocs.css (cadre/header.twig). Le template ne * fournit pas ce fichier : il survit aux mises à jour depuis le template. * Même approche qu'automobile.comparer-changer.fr. */ @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@300;400;500;700&family=Poppins:wght@400;500;600&display=swap"); /* ── Palette du site (reprise de l'ancien style.css) ── */ :root { --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", arial, sans-serif; --heading-font: "Nunito", sans-serif; --nav-font: "Poppins", sans-serif; --default-color: #444; --heading-color: #012970; --accent-color: #ff0033; --contrast-color: #012970; /* le thème s'en sert comme bleu des titres */ --nav-color: #012970; --nav-hover-color: #ff0033; --nav-dropdown-hover-color: #ff0033; } .light-background { --background-color: #f9f9f9; } .dark-background { --background-color: #012970; --contrast-color: #012970; } /* ── Header d'origine du site ── Balisage repris à l'identique de l'ancien cadre/navbar.twig, posé en tête de composition (« Bloc HTML personnalisé », id header-origine). Règles reprises de l'ancien style.css, sélecteurs préfixés par #header pour passer devant celles du thème v4. */ #header-origine { padding: 0; } #header { color: var(--default-color); background-color: var(--background-color); padding: 20px 0; transition: all 0.5s; z-index: 997; } #header .logo { line-height: 1; } #header .logo img { max-height: 36px; margin-right: 8px; } #header .logo h1 { font-size: 30px; margin: 0; font-weight: 700; color: var(--heading-color); } #header .btn-getstarted, #header .btn-getstarted:focus { color: var(--contrast-color); background: var(--accent-color); font-size: 15px; padding: 8px 25px; margin: 0 0 0 30px; border-radius: 4px; transition: 0.3s; font-weight: 500; } #header .btn-getstarted:hover, #header .btn-getstarted:focus:hover { color: var(--contrast-color); background: color-mix(in srgb, var(--accent-color), transparent 15%); } @media (max-width: 1200px) { #header .logo { order: 1; } #header .btn-getstarted { order: 2; margin: 0 15px 0 0; padding: 6px 15px; } #header .navmenu { order: 3; } } /* En haut de page le header est transparent sur la photo, blanc au défilement (l'ancien portait .index-page ; main.js pose .scrolled). */ #header { --background-color: rgb(255 255 255 / 0%); } /* Valeurs de l'ancienne page, que le thème v4 redéfinit : titre bleu, texte du bouton blanc (le thème fait de --contrast-color un bleu), et largeur du conteneur de Bootstrap 5 (1320px dès 1400px), que chargeait l'ancienne page, là où le thème charge Bootstrap 4 (1140px). */ #header .logo h1 { color: #012970; } #header .btn-getstarted, #header .btn-getstarted:focus, #header .btn-getstarted:hover { color: #fff; } @media (width >= 1400px) { #header .container-xl { max-width: 1320px; } } /* default.css donne au formulaire un z-index de 1001 : sans ça, sur mobile, la carte du formulaire recouvre le header. */ #header { z-index: 1002; } @media (width <= 992px) { .hero { padding-top: 90px; } } .scrolled #header { --background-color: #fff; box-shadow: 0 0 18px rgb(0 0 0 / 10%); } /* Navmenu - Desktop */ @media (min-width: 1200px) { #header .navmenu { padding: 0; } #header .navmenu ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center; } #header .navmenu li { position: relative; } #header .navmenu a, #header .navmenu a:focus { color: var(--nav-color); padding: 18px 12px; font-size: 15px; font-family: var(--nav-font); font-weight: 500; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s; } #header .navmenu a i, #header .navmenu a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; transition: 0.3s; } #header .navmenu li:last-child a { padding-right: 0; } #header .navmenu li:hover>a, #header .navmenu .active, #header .navmenu .active:focus { color: var(--nav-hover-color); } #header .navmenu .dropdown ul { margin: 0; padding: 10px 0; background: var(--nav-dropdown-background-color); display: block; position: absolute; visibility: hidden; left: 14px; top: 130%; opacity: 0; transition: 0.3s; border-radius: 4px; z-index: 99; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); } #header .navmenu .dropdown ul li { min-width: 200px; } #header .navmenu .dropdown ul a { padding: 10px 20px; font-size: 15px; text-transform: none; color: var(--nav-dropdown-color); } #header .navmenu .dropdown ul a i { font-size: 12px; } #header .navmenu .dropdown ul a:hover, #header .navmenu .dropdown ul .active:hover, #header .navmenu .dropdown ul li:hover>a { color: var(--nav-dropdown-hover-color); } #header .navmenu .dropdown:hover>ul { opacity: 1; top: 100%; visibility: visible; } #header .navmenu .dropdown .dropdown ul { top: 0; left: -90%; visibility: hidden; } #header .navmenu .dropdown .dropdown:hover>ul { opacity: 1; top: 0; left: -100%; visibility: visible; } } /* Navmenu - Mobile */ @media (max-width: 1199px) { #header .mobile-nav-toggle { color: var(--nav-color); font-size: 28px; line-height: 0; margin-right: 10px; cursor: pointer; transition: color 0.3s; } #header .navmenu { padding: 0; z-index: 9997; } #header .navmenu ul { display: none; list-style: none; position: absolute; inset: 60px 20px 20px 20px; padding: 10px 0; margin: 0; border-radius: 6px; background-color: var(--nav-mbile-background-color); overflow-y: auto; transition: 0.3s; z-index: 9998; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); } #header .navmenu a, #header .navmenu a:focus { color: var(--nav-dropdown-color); padding: 10px 20px; font-family: var(--nav-font); font-size: 17px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s; } #header .navmenu a i, #header .navmenu a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.3s; background-color: color-mix(in srgb, var(--accent-color), transparent 90%); } #header .navmenu a i:hover, #header .navmenu a:focus i:hover { background-color: var(--accent-color); color: var(--contrast-color); } #header .navmenu a:hover, #header .navmenu .active, #header .navmenu .active:focus { color: var(--nav-dropdown-hover-color); } #header .navmenu .active i, #header .navmenu .active:focus i { background-color: var(--accent-color); color: var(--contrast-color); transform: rotate(180deg); } #header .navmenu .dropdown ul { position: static; display: none; z-index: 99; padding: 10px 0; margin: 10px 20px; background-color: var(--nav-dropdown-background-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); box-shadow: none; transition: all 0.5s ease-in-out; } #header .navmenu .dropdown ul ul { background-color: rgba(33, 37, 41, 0.1); } #header .navmenu .dropdown>.dropdown-active { display: block; background-color: rgba(33, 37, 41, 0.03); } .mobile-nav-active { overflow: hidden; } .mobile-nav-active #header .mobile-nav-toggle { color: #fff; position: absolute; font-size: 32px; top: 15px; right: 15px; margin-right: 0; z-index: 9999; } .mobile-nav-active #header .navmenu { position: fixed; overflow: hidden; inset: 0; background: rgba(33, 37, 41, 0.8); transition: 0.3s; } .mobile-nav-active #header .navmenu>ul { display: block; } } /* Listing Dropdown - Desktop */ @media (min-width: 1200px) { #header .navmenu .listing-dropdown { position: static; } #header .navmenu .listing-dropdown ul { margin: 0; padding: 10px; background: var(--nav-dropdown-background-color); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); position: absolute; top: 130%; left: 0; right: 0; visibility: hidden; opacity: 0; display: flex; transition: 0.3s; border-radius: 4px; z-index: 99; } #header .navmenu .listing-dropdown ul li { flex: 1; } #header .navmenu .listing-dropdown ul li a, #header .navmenu .listing-dropdown ul li:hover>a { padding: 10px 20px; font-size: 15px; color: var(--nav-dropdown-color); background-color: var(--nav-dropdown-background-color); } #header .navmenu .listing-dropdown ul li a:hover, #header .navmenu .listing-dropdown ul li .active, #header .navmenu .listing-dropdown ul li .active:hover { color: var(--nav-dropdown-hover-color); background-color: var(--nav-dropdown-background-color); } #header .navmenu .listing-dropdown:hover>ul { opacity: 1; top: 100%; visibility: visible; } } /* Listing Dropdown - Mobile */ @media (max-width: 1199px) { #header .navmenu .listing-dropdown ul { position: static; display: none; z-index: 99; padding: 10px 0; margin: 10px 20px; background-color: var(--nav-dropdown-background-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); box-shadow: none; transition: all 0.5s ease-in-out; } #header .navmenu .listing-dropdown ul ul { background-color: rgba(33, 37, 41, 0.1); } #header .navmenu .listing-dropdown>.dropdown-active { display: block; background-color: rgba(33, 37, 41, 0.03); } } /* ── Hero + formulaire ── */ /* Titre et bouton du hero : ceux de l'ancienne page. Le titre était un sur fond blanc dans le

; le bloc rend le

en texte brut, on pose donc le fond blanc sur le

lui-même, en ligne, pour qu'il épouse le texte comme le faisait le . */ .hero .bloc_desktop h1, .hero .bloc_mobile .h1 { display: inline; margin: 0; padding: 0 0.2em; font-family: var(--heading-font); font-size: 48px; font-weight: 700; line-height: 56px; color: var(--accent-color); background-color: #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hero .bloc_desktop .d-flex { margin-top: 24px; } /* Bouton : .btn-read-more de l'ancienne page (rouge, angles de 4px, flèche) */ .hero .btn-get-started { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--accent-color); font-family: var(--default-font); font-weight: 600; font-size: 16px; letter-spacing: 1px; line-height: 1; padding: 15px 40px; border-radius: 4px; transition: 0.5s; box-shadow: 0 5px 25px rgb(0 0 0 / 10%); } .hero .btn-get-started::after { content: "\f138"; font-family: bootstrap-icons; margin-left: 5px; font-size: 18px; transition: 0.3s; } .hero .btn-get-started:hover { color: #fff; background: var(--accent-color); } .hero .btn-get-started:hover::after { transform: translateX(5px); } @media (width <= 640px) { .hero .bloc_desktop h1, .hero .bloc_mobile .h1 { font-size: 28px; line-height: 36px; } } /* Le formulaire est une carte blanche posée dans un hero sombre : ses textes ne doivent pas hériter du blanc du hero (illisibles sur mobile). */ .hero #lead_form { --default-color: #444; color: #444; } /* Bouton d'étape du formulaire : gris pleine largeur, rouge au survol. `float: none` porte !important parce que .float-right le déclare en !important ; sans ça « Précédent » chevauche « Suivant ». */ .form-navigation .next, .form-navigation .next:focus, .form-navigation .previous, .form-navigation .previous:focus { background-color: #e9ecef; border-color: #ced4da; color: #313131; width: 100%; float: none !important; } .form-navigation .previous { margin-bottom: 8px; } .form-navigation .next:hover, .form-navigation .previous:hover { background-color: color-mix(in srgb, var(--accent-color), #000 12%); border-color: color-mix(in srgb, var(--accent-color), #000 12%); color: #fff; } /* Le bloc « Gauche form » rend une version bureau et une version mobile ; sur ce site la version mobile restait visible en bureau (et inversement). */ @media (width >= 993px) { .hero .bloc_mobile { display: none !important; } } @media (width <= 992px) { .hero .bloc_desktop { display: none !important; } .hero .bloc_mobile .h1 { color: var(--accent-color); } } /* ── Contenu d'origine sous le hero ── Les sections de l'ancienne page (contact, offres, trois « about », services) sont reprises telles quelles dans des « Bloc HTML personnalisé », chacune enveloppée d'un
. Leurs règles viennent de l'ancien style.css, préfixées par .lp-origine pour ne toucher ni le hero, ni le formulaire, ni le reste du thème. */ /* L'enveloppe
du bloc ne doit rien ajouter : c'est la section d'origine, à l'intérieur, qui porte ses marges. */ .lp-origine { --contrast-color: #fff; /* valeur de l'ancienne page (texte des boutons) */ } .bloc-html-personnalise:has(> .lp-origine) { padding: 0; background: none; overflow: visible; } /* Utilitaires Bootstrap 5 employés par l'ancienne page (qui chargeait Bootstrap 5) et absents du Bootstrap 4 du thème. */ .lp-origine .row.gy-4 { margin-top: -1.5rem; } .lp-origine .row.gy-4 > * { margin-top: 1.5rem; } .lp-origine .row.gx-0 { margin-right: 0; margin-left: 0; } .lp-origine .row.gx-0 > * { padding-right: 0; padding-left: 0; } @media (width >= 992px) { .lp-origine .text-lg-start { text-align: left !important; } } @media (width >= 1400px) { .lp-origine .container { max-width: 1320px; } } /* L'ancien header n'était plus fixe sous 765px */ @media (width <= 765px) { #header { position: relative; } } .lp-origine a { color: var(--accent-color); text-decoration: none; transition: 0.3s; } .lp-origine a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); text-decoration: none; } .lp-origine h1, .lp-origine h2, .lp-origine h3, .lp-origine h4, .lp-origine h5, .lp-origine h6 { color: var(--accent-color); font-family: var(--heading-font); } .lp-origine section, .lp-origine .section { color: var(--default-color); background-color: var(--background-color); padding: 60px 0; scroll-margin-top: 98px; overflow: clip; } @media (max-width: 1199px) { .lp-origine section, .lp-origine .section { scroll-margin-top: 56px; } } .lp-origine .section-title { text-align: center; padding-bottom: 60px; position: relative; } .lp-origine .section-title h2 { font-size: 13px; letter-spacing: 1px; font-weight: 700; padding: 8px 20px; margin: 0; background: color-mix(in srgb, var(--accent-color), transparent 90%); color: var(--accent-color); display: inline-block; text-transform: uppercase; border-radius: 50px; font-family: var(--default-font); } .lp-origine .section-title p { margin: 10px 0 0 0; font-family: var(--heading-font); } .lp-origine .section-title p .description-title { color: var(--accent-color); } .lp-origine .about .content { background-color: color-mix(in srgb, var(--default-color), transparent 95%); padding: 40px; } .lp-origine .about .content h3 { font-size: 14px; font-weight: 700; color: var(--accent-color); text-transform: uppercase; } .lp-origine .about .content h2 { font-size: 24px; font-weight: 700; } .lp-origine .about .content p { margin: 15px 0 30px 0; line-height: 24px; } .lp-origine .about .content .btn-read-more { color: var(--contrast-color); background: var(--accent-color); line-height: 0; padding: 15px 40px; border-radius: 4px; transition: 0.5s; box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1); } .lp-origine .about .content .btn-read-more span { font-family: var(--default-font); font-weight: 600; font-size: 16px; letter-spacing: 1px; } .lp-origine .about .content .btn-read-more i { margin-left: 5px; font-size: 18px; transition: 0.3s; } .lp-origine .about .content .btn-read-more:hover i { transform: translateX(5px); } .lp-origine .about2 .content { background-color: color-mix(in srgb, var(--default-color), transparent 95%); padding: 40px; } .lp-origine .about2 .content h3 { font-size: 14px; font-weight: 700; color: var(--accent-color); text-transform: uppercase; } .lp-origine .about2 .content h2 { font-size: 24px; font-weight: 700; } .lp-origine .about2 .content p { margin: 15px 0 30px 0; line-height: 24px; } .lp-origine .about2 .content .btn-read-more { color: var(--contrast-color); background: var(--accent-color); line-height: 0; padding: 15px 40px; border-radius: 4px; transition: 0.5s; box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1); } .lp-origine .about2 .content .btn-read-more span { font-family: var(--default-font); font-weight: 600; font-size: 16px; letter-spacing: 1px; } .lp-origine .about2 .content .btn-read-more i { margin-left: 5px; font-size: 18px; transition: 0.3s; } .lp-origine .about2 .content .btn-read-more:hover i { transform: translateX(5px); } .lp-origine .values .card { background-color: #f3f3f3; color: var(--default-color); padding-top: 20px; padding-right: 20px; padding-left: 20px; padding-bottom: 0; margin: 30px; box-shadow: 0px 0 10px rgba(0, 0, 0, 0.1); text-align: center; transition: 0.3s; height: 100%; border: 0; } .lp-origine .values .card img { padding: 0; transition: 0.5s; transform: scale(1.1); padding-bottom: 20px; } .lp-origine .values .card h3 { font-size: 35px; font-weight: 700; margin-bottom: 0; color: var(--heading-color); } .lp-origine .values .card h4 { font-size: 28px; font-weight: 700; margin-bottom: 18px; color: var(--accent-color); } .lp-origine .values .card p { margin-bottom: 40px; } .lp-origine .values .card h3 span { font-weight: 800; color: var(--accent-color); } .lp-origine .values .card:hover { box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1); } .lp-origine .values .card:hover img { transform: scale(1); } .lp-origine .btn-read-more { color: var(--contrast-color); background: var(--accent-color); line-height: 0; padding: 15px 40px; border-radius: 4px; transition: 0.5s; box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.1); } .lp-origine .btn-read-more span { font-family: var(--default-font); font-weight: 600; font-size: 16px; letter-spacing: 1px; } .lp-origine .btn-read-more i { margin-left: 5px; font-size: 18px; transition: 0.3s; } .lp-origine .btn-read-more:hover i { transform: translateX(5px); } .lp-origine .services .service-item { background-color: var(--surface-color); box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1); height: 100%; padding: 60px 30px; text-align: center; transition: 0.3s; border-radius: 5px; } .lp-origine .services .service-item .icon { font-size: 36px; padding: 20px 20px; border-radius: 4px; position: relative; margin-bottom: 25px; display: inline-block; line-height: 0; transition: 0.3s; } .lp-origine .services .service-item h3 { font-size: 24px; font-weight: 700; } .lp-origine .services .service-item .read-more { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; padding: 8px 20px; } .lp-origine .services .service-item .read-more i { line-height: 0; margin-left: 5px; font-size: 18px; } .lp-origine .services .service-item.item-cyan { border-bottom: 3px solid var(--heading-color); } .lp-origine .services .service-item.item-cyan .icon { color: var(--heading-color); background: rgba(13, 202, 240, 0.1); } .lp-origine .services .service-item.item-cyan .read-more { color: var(--heading-color); } .lp-origine .services .service-item.item-cyan:hover { background: var(--heading-color); } .lp-origine .services .service-item.item-orange { border-bottom: 3px solid #fd7e14; } .lp-origine .services .service-item.item-orange .icon { color: #fd7e14; background: rgba(253, 126, 20, 0.1); } .lp-origine .services .service-item.item-orange .read-more { color: #fd7e14; } .lp-origine .services .service-item.item-orange:hover { background: #fd7e14; } .lp-origine .services .service-item.item-teal { border-bottom: 3px solid #20c997; } .lp-origine .services .service-item.item-teal .icon { color: #20c997; background: rgba(32, 201, 151, 0.1); } .lp-origine .services .service-item.item-teal .read-more { color: #20c997; } .lp-origine .services .service-item.item-teal:hover { background: #20c997; } .lp-origine .services .service-item.item-red { border-bottom: 3px solid #df1529; } .lp-origine .services .service-item.item-red .icon { color: #df1529; background: rgba(223, 21, 4, 0.1); } .lp-origine .services .service-item.item-red .read-more { color: #df1529; } .lp-origine .services .service-item.item-red:hover { background: #df1529; } .lp-origine .services .service-item.item-indigo { border-bottom: 3px solid #6610f2; } .lp-origine .services .service-item.item-indigo .icon { color: #6610f2; background: rgba(102, 16, 242, 0.1); } .lp-origine .services .service-item.item-indigo .read-more { color: #6610f2; } .lp-origine .services .service-item.item-indigo:hover { background: #6610f2; } .lp-origine .services .service-item.item-pink { border-bottom: 3px solid #f3268c; } .lp-origine .services .service-item.item-pink .icon { color: #f3268c; background: rgba(243, 38, 140, 0.1); } .lp-origine .services .service-item.item-pink .read-more { color: #f3268c; } .lp-origine .services .service-item.item-pink:hover { background: #f3268c; } .lp-origine .services .service-item:hover h3, .lp-origine .services .service-item:hover p, .lp-origine .services .service-item:hover .read-more { color: #fff; } .lp-origine .services .service-item:hover .icon { background: #fff; } .lp-origine .specific-paragraph { text-transform: lowercase; } .lp-origine .specific-paragraph:first-letter { text-transform: uppercase; } .lp-origine .section-title h2.form_title { font-size: 1.2rem; padding: 15px; margin: -20px -32px 15px -32px; background-color: var(--accent-color); color: #FFFFFF; text-align: center; font-variant: small-caps; font-weight: bolder; font-size: 1.5rem; border-radius: 0; width:100%; } .lp-origine #arrow { content: ''; left: 0; right: 0; top: 45px; margin: 0 auto; width: 0; height: 0; border-top: 25px solid var(--accent-color); border-left: 50px solid transparent; border-right: 50px solid transparent; } .lp-origine #bloc_gauche a { color: #fff; } .lp-origine #image_mobile { display:none; } .lp-origine .bloc_mobile { display:none; } .lp-origine .bloc_desktop { display:block; } @media (max-width: 992px) { .lp-origine #image_mobile, .lp-origine .bloc_mobile { display:block; } .lp-origine .bloc_desktop { display:none; } } @media (max-width: 765px) { .lp-origine #contact, .lp-origine #values { top:0px; padding-top:0px; padding-bottom:0px; } .lp-origine #arrow { top:80px; } .lp-origine #bloc_gauche { display:none; } .lp-origine .section-title h2.form_title { margin:0px; margin-bottom:15px; } .lp-origine .section-title { padding-bottom:0px; } } /* Le default.css du template place #arrow en absolu ; sur l'ancienne page (où cette règle était commentée) c'était un simple élément en ligne. */ .lp-origine #arrow { position: static; } /* Liens « Pide Presupuesto » des cartes de services : de simples liens sur l'ancienne page. Le thème v4 fait de .read-more un bouton rouge. */ .lp-origine .services .service-item .read-more { background: none; border: 0; border-radius: 0; box-shadow: none; } .lp-origine .services .service-item.item-cyan .read-more { color: var(--heading-color); } /* ── Footer : couleurs et logo de l'ancienne page ── Le footer du template porte .dark-background (fond gris foncé) ; l'ancien était bleu très clair. Son logo (img/1/logo2.png) est écrit en dur dans cadre/footer.twig : on y substitue le logo du site suivi de « Alarma », comme dans l'ancien footer. */ #site-footer { --background-color: color-mix(in srgb, #012970, transparent 97%); --default-color: #444; --heading-color: #012970; --contrast-color: #fff; color: var(--default-color); background-color: var(--background-color); border-top: 1px solid color-mix(in srgb, #012970, transparent 85%); } #site-footer .footer-about .logo img { content: url("/img/1/logo.png"); width: auto; max-height: 36px; margin-right: 8px; } #site-footer .footer-about .logo::after { content: "Alarma"; font-family: var(--heading-font); font-size: 30px; font-weight: 700; line-height: 1; color: #012970; } /* Propriétés que le thème v4 pose sur ces éléments et que l'ancienne page n'avait pas (blocs.css / style.css du template). */ .lp-origine .services .service-item .read-more { font-family: var(--default-font); font-weight: 600; letter-spacing: normal; } .lp-origine .services .service-item .read-more:hover { background: none; padding-right: 20px; } .lp-origine .services .service-item p { font-size: 1rem; line-height: 1.5; margin-bottom: 1rem; } .lp-origine .services .service-item:hover { transform: none; } .lp-origine .about h2, .lp-origine .about2 h2 { text-align: left; padding-bottom: 0; } /* Titre « Enlaces útiles » : rouge sur l'ancienne page */ #site-footer h4 { color: var(--accent-color); } /* Photo du hero calée en bas, comme l'ancienne page (background: url(hero-bg.png) bottom center) : le bas de l'image porte les équipements d'alarme, que le recadrage centré du bloc coupait. */ .hero .hero-bg { object-position: bottom center; } /* Hauteur du hero : la photo couvre le hero ; si le hero est plus haut que la photo à cette largeur, elle est agrandie et son bas (les équipements) est coupé. La carte du formulaire est donc resserrée, et les marges du hero réduites, pour que le hero garde la hauteur de l'ancienne page. */ @media (width >= 993px) { .hero { padding: 50px 0 30px; } .hero #lead_form { padding: 10px 24px 0; } .hero #lead_form .form_title { font-size: 22px; line-height: 1.2; margin-bottom: 4px; padding: 4px !important; } .hero #lead_form .progress { margin-bottom: 6px; } .hero #lead_form .form-group, .hero #lead_form .form-navigation { margin-bottom: 6px; } .hero #lead_form #help-form { margin-top: 6px !important; font-size: 11px; line-height: 1.3; } .hero #lead_form #form-footer { padding: 2px 0 !important; margin-bottom: 0 !important; font-size: 13px; } .hero #lead_form #form-footer .row { width: 100%; margin: 0; padding: 0 !important; column-gap: 24px; justify-content: center !important; } .hero #lead_form #form-footer .row > div { padding: 2px !important; margin-top: 0 !important; } .hero #lead_form #form-footer img { height: 22px !important; } } /* Les liens « Pide Presupuesto » des sections d'origine visent #lead_form : la marge laisse la place du header fixe à l'arrivée sur le formulaire. */ #lead_form { scroll-margin-top: 100px; } /* Focus sur le formulaire (showForm() du template, comme sur automobile) : le défilement laisse la place du header fixe, et le header passe sous le voile gris tant qu'il est affiché, pour que seul le formulaire ressorte. */ #form_service { scroll-margin-top: 110px; } body:has(.overlay[style*="block"]) #header { z-index: 999; } /* Formulaire en une seule étape : le texte légal sous le bouton (contenu n°6) se termine déjà par les deux phrases d'aide, comme sur l'ancien formulaire ; on ne les répète pas dessous. */ .hero #help-form { display: none; } /* Le formulaire complet est haut : le titre du hero ne doit pas remonter sous le header fixe. */ @media (width >= 993px) { .hero { padding-top: 110px; } } /* Carte du formulaire resserrée pour tenir dans le hero, surtout à la 2e étape (case de consentement + texte légal). */ @media (width >= 993px) { .hero #lead_form .form_title { font-size: 20px; margin-bottom: 2px; } .hero #lead_form .form_title br { display: none; } .hero #lead_form .form-control, .hero #lead_form .input-group-text, .hero #lead_form .bootstrap-select > .dropdown-toggle { height: 36px; padding-top: 4px; padding-bottom: 4px; font-size: 15px; } .hero #lead_form .input-group, .hero #lead_form .form-group, .hero #lead_form .form-row { margin-bottom: 6px; } .hero #bloc_optin label, .hero #bloc_optin small { font-size: 12px; line-height: 1.35; } .hero #cgu_form { margin-top: 4px; font-size: 10px; line-height: 1.25; } .hero #cgu_form small { font-size: 10px; } .hero #btn_submit { padding: 6px 20px; font-size: 18px; } } /* ── Hero sur le modèle de ford.comparer-changer.fr ── Formulaire en une seule étape : le hero prend au moins la hauteur de l'écran et grandit avec le formulaire, la photo le couvre. Elle est calée en bas, et le bas de hero-bg.png (12 % de sa hauteur) est un fond blanc portant les équipements : la marge basse garde la carte au-dessus. */ @media (width >= 993px) { .hero { min-height: 100vh; padding: 110px 0 calc(12vh + 50px); align-items: center; } .hero .hero-bg { object-position: center bottom; } } /* Le texte légal (contenu n°6) est un

que le thème met à 14px via « .hero p » : la taille réduite doit viser le paragraphe lui-même. */ @media (width >= 993px) { .hero #cgu_form p { margin: 0; font-size: 10px; line-height: 1.3; } } /* ── Hero pour le formulaire en trois étapes ── Plus besoin de la pleine hauteur d'écran (formulaire en une étape) : le hero a une hauteur fixe, calée sur l'étape la plus longue (la 3e, avec le consentement et le texte légal), et la carte est alignée en haut — elle ne saute plus d'une étape à l'autre, et le hero ne change pas de taille. La marge basse garde la carte au-dessus du fond blanc des équipements. */ @media (width >= 993px) { .hero { min-height: calc(760px + 12vh); padding: 110px 0 calc(12vh + 40px); align-items: flex-start; } .hero .container > .row { align-items: flex-start !important; } .hero .bloc_desktop { padding-top: 40px; } /* Le thème centre la carte par top: 50% + translateY(-50%) ; alignée en haut, elle remonterait hors du hero. */ .hero #lead_form { top: 0 !important; transform: none !important; } } /* Titre de chaque étape du formulaire (description de section). blocs.css du template impose « .hero p { margin-bottom: 0 !important } » : l'espace sous le titre doit porter le même !important. */ .hero #form_service p.section_description { margin: 4px 0 18px !important; font-family: var(--heading-font); font-size: 18px; font-weight: 700; color: #012970; } /* Titre du formulaire : plus grand que les titres d'étape (18px) */ @media (width >= 993px) { .hero #lead_form .form_title { font-size: 28px; line-height: 1.2; margin-bottom: 6px; } }