/* ============================================================ style.css — Site HTML statique MonPlombierDeboucheur.fr Feuille de styles pour site HTML statique (non-WordPress) Design moderne et responsive Police Inter (Google Fonts) chargée dans chaque ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', sans-serif; color: var(--texte); background: var(--blanc); line-height: 1.65; font-size: 15px; } /* Appliquer Oswald sur tous les titres, menus, boutons, logo et CTAs */ h1, h2, h3, h4, .logo-text strong, .ticker__item, .contact-content h2, #main-nav a, .mobile-nav a, .header-tel, .header-tel-icon, .mobile-tel, .btn, .btn-flottant, .footer-col h4 { font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.03em; } /* S'assurer que le texte dans les spans de boutons utilise bien Oswald */ .btn-flottant span, .btn span, .header-tel span { font-family: 'Oswald', sans-serif !important; font-weight: 600; } /* Appliquer Inter sur les éléments textuels et de lecture */ body, p, li, span, input, textarea, .logo-text>span, .header-top-bar span, .footer-brand p, .footer-col ul li a, .footer-col ul li, .footer-bas p, .footer-bas-links a { font-family: 'Inter', sans-serif; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } :root { --bleu: #0e7490; --bleu-clair: #0e7490; --bleu-vif: #dc2626; --gris-bg: #f8fafc; --gris-bord: #0e7490; --texte: #0e7490; --texte-doux: #0e7490; --blanc: #ffffff; } .container { max-width: 1120px; margin: 0 auto; padding: 0 28px; } .section-pad { padding: 72px 0; } .bg-gris { background: var(--gris-bg); } .label-section { color: var(--bleu-vif); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .centré { text-align: center; } /* ===== HEADER ===== */ #main-header { position: sticky; top: 0; z-index: 100; transition: transform 0.3s ease-in-out, box-shadow 0.3s; border: none !important; border-bottom: none !important; box-shadow: none !important; } /* #main-header.header--hidden { transform: translateY(-100%); } */ #main-header.scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28); } /* Barre top (urgence - maintenant sous le header) */ .header-top-bar { background: var(--bleu-vif); padding: 8px 0; } .header-top-bar .container { display: flex; align-items: center; justify-content: center; text-align: center; gap: 12px; } .header-top-bar span { color: rgba(255, 255, 255, 0.85); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.02em; } .header-top-bar a { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; opacity: 0.95; transition: opacity 0.15s; } .header-top-bar a:hover { opacity: 1; } /* Barre principale */ .header-main { background: var(--bleu); border-bottom: none; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: auto; min-height: 64px; gap: 24px; } /* Logo */ .logo-wrap { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } /* Logo header calibré comme serrureprotect.com : max-height 70px pour s'adapter à la barre de navigation sans déformer, width:auto pour préserver le ratio d'aspect */ .logo-wrap img { height: auto; width: auto; max-height: 65px; max-width: none; } .logo-text { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 0.03em; } .logo-text span { font-family: inherit !important; font-weight: inherit !important; color: #ff4d4d; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /* Nav desktop */ #main-nav { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; } #main-nav a { color: #ffffff; font-size: 0.84rem; font-weight: 500; padding: 6px 12px; border-radius: 6px; position: relative; transition: color 0.18s, background 0.18s; white-space: nowrap; } #main-nav a::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%) scaleX(0); width: 60%; height: 2px; background: var(--bleu-vif); border-radius: 2px; transition: transform 0.22s ease; } #main-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } #main-nav a:hover::after { transform: translateX(-50%) scaleX(1); } #main-nav a.active { color: #fff; background: rgba(25, 118, 210, 0.18); } #main-nav a.active::after { transform: translateX(-50%) scaleX(1); } /* CTA téléphone */ .header-tel { display: flex; align-items: center; gap: 8px; background: var(--bleu-vif); color: var(--blanc) !important; font-weight: 700; font-size: 0.9rem; padding: 9px 18px; border-radius: 0px; border: 2px solid var(--bleu-vif); transition: background 0.2s, color 0.2s, transform 0.15s; white-space: nowrap; flex-shrink: 0; letter-spacing: 0.01em; } .header-tel:hover { background: var(--blanc); color: var(--bleu-vif) !important; transform: translateY(-1px); } .header-tel svg { stroke: var(--blanc); transition: stroke 0.2s; } .header-tel:hover svg { stroke: var(--bleu-vif); } /* Hamburger + actions mobiles (cachés sur desktop) */ .header-mobile-actions { display: none; align-items: center; gap: 4px; flex-shrink: 0; } .header-tel-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--bleu-vif); border-radius: 0px; border: 2px solid var(--bleu-vif); color: var(--blanc); transition: background 0.2s, color 0.2s; } .header-tel-icon:hover { background: var(--blanc); color: var(--bleu-vif); } .header-tel-icon svg { stroke: var(--blanc); transition: stroke 0.2s; } .header-tel-icon:hover svg { stroke: var(--bleu-vif); } .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 6px; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.08); border: none; border-radius: 8px; flex-shrink: 0; transition: background 0.18s; } .hamburger:hover { background: rgba(255, 255, 255, 0.14); } .hamburger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; margin: 0 auto; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Menu mobile — slide-down animé */ .mobile-nav { display: flex; flex-direction: column; background: #0e7490; border-top: 1px solid rgba(255, 255, 255, 0.08); max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; } .mobile-nav.open { max-height: 520px; opacity: 1; } .mobile-nav-links { padding: 6px 0 0; } .mobile-nav a { display: flex; align-items: center; gap: 12px; color: #ffffff; font-size: 0.93rem; padding: 13px 20px; font-weight: 500; border-left: 3px solid transparent; transition: color 0.18s, background 0.18s, border-color 0.18s; min-height: 48px; } .mobile-nav a svg { flex-shrink: 0; opacity: 0.7; } .mobile-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); border-left-color: rgba(25, 118, 210, 0.5); } .mobile-nav a:hover svg { opacity: 1; } .mobile-nav a.active { color: #fff; background: rgba(25, 118, 210, 0.12); border-left-color: var(--bleu-vif); } .mobile-nav a.active svg { opacity: 1; } .mobile-nav-footer { padding: 10px 16px 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 4px; } .mobile-nav a.mobile-tel { background: var(--bleu-vif); border-radius: 8px; color: #fff; font-weight: 700; justify-content: center; font-size: 0.96rem; padding: 14px 20px; border-left: none; min-height: 50px; transition: background 0.18s, transform 0.15s; } .mobile-nav a.mobile-tel:hover { background: #991b1b; border-left-color: transparent; transform: translateY(-1px); } /* ======================================== CSS VARIABLES FOR HERO & TICKER ======================================== */ :root { --color-orange: #dc2626; --color-orange-dark: #b91c1c; --color-white: #ffffff; --color-blue: #0e7490; } /* ======================================== BUTTONS (Style 21. Outline & Fill Strict) ======================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 0.05em; font-size: 15px; text-transform: uppercase; padding: 14px 32px; border-radius: 0px; border: 2.5px solid var(--bleu-vif); cursor: pointer; transition: all 0.25s ease-in-out; text-align: center; line-height: 1.3; text-decoration: none; } /* Bouton principal (Rempli Rouge -> Devient Outline Blanc au survol) */ .btn--primary { background: var(--bleu-vif); color: var(--blanc); } .btn--primary:hover { background: var(--blanc); color: var(--bleu-vif); transform: translateY(-2px); } /* Bouton secondaire (Outline Blanc/Transparent -> Devient Rempli Rouge au survol) */ .btn--outline-white { background: transparent; color: var(--blanc); border-color: var(--blanc); } .btn--outline-white:hover { background: var(--bleu-vif); color: var(--blanc); border-color: var(--bleu-vif); transform: translateY(-2px); } /* ======================================== [C] HERO (Copie Conforme site-glm-1) ======================================= */ .hero { margin-top: -2px; min-height: 90vh; display: flex; align-items: center; justify-content: center; background-image: url('IMG-CHAUFF/hero-bg-3.webp'); background-size: cover; background-position: center; position: relative; padding: 100px 20px 80px; text-align: center; overflow: hidden; } /* Surtitre Hero (Style 13. Encadré Lignes) */ .hero__kicker { display: inline-block; border-top: 2px solid var(--bleu-vif); border-bottom: 2px solid var(--bleu-vif); color: var(--bleu-vif); font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.25em; padding: 6px 16px; margin-bottom: 24px; } .hero::before { content: ''; position: absolute; inset: 0; background: rgba(26, 34, 41, 0.85); /* Overlay bleu ardoise foncé / anthracite */ z-index: 1; } .hero .container { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; } .hero__title { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: clamp(28px, 4.2vw, 46px); color: var(--color-white); margin-bottom: 20px; line-height: 1.2; } .hero__title .highlight { color: var(--color-orange); } .nowrap { white-space: nowrap; } .hero__subtitle { font-size: clamp(16px, 2vw, 18px); color: rgba(255, 255, 255, 0.85); font-weight: 500; max-width: 680px; margin: 0 auto 28px; line-height: 1.7; } .hero__ctas { display: flex; justify-content: center; gap: 16px; margin-bottom: 32px; } .hero__advantages { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 36px; } .hero__advantage { color: rgba(255, 255, 255, 0.95); font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 8px; font-family: 'Quicksand', sans-serif; } .hero__advantage svg, .hero__advantage i { color: var(--color-orange); font-size: 15px; } /* ======================================== [T] TICKER DÉFILANT (La Clé Savoyarde) ======================================== */ .ticker { background: var(--color-blue); padding: 14px 0; overflow: hidden; position: relative; border-top: 3px solid var(--color-orange); border-bottom: 3px solid var(--color-orange); } .ticker__track { display: flex; width: max-content; animation: ticker-scroll 28s linear infinite; } .ticker__track:hover { animation-play-state: paused; } .ticker__item { display: flex; align-items: center; gap: 10px; padding: 0 40px; white-space: nowrap; font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-white); } .ticker__item i { color: var(--color-orange); font-size: 14px; flex-shrink: 0; } .ticker__sep { color: var(--color-orange); font-size: 18px; opacity: 0.5; padding: 0 8px; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 767px) { .hero__ctas { flex-direction: column; align-items: center; } .hero__ctas .btn { width: 100%; max-width: 320px; } .hero__advantages { flex-direction: column; align-items: center; gap: 12px; } } /* ===== BANDE INFO ===== */ .bande-info { background: var(--bleu-vif); padding: 13px 0; } .bande-inner, .bande-info-inner { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; } .bande-inner span, .bande-info-inner span { color: #fff; font-size: 0.9rem; font-weight: 500; } .bande-info p { color: #fff; font-size: 0.9rem; font-weight: 500; } .bande-info a { color: #fff; font-weight: 700; font-size: 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.5); transition: border-color 0.18s; } .bande-info a:hover { border-color: #fff; } /* ===== PRÉSENTATION ===== */ .presentation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .imgs-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .imgs-group img { width: 100%; object-fit: cover; border-radius: 4px; } .imgs-group img:first-child { grid-column: 1 / -1; height: 240px; } .imgs-group img:not(:first-child) { height: 175px; } .pres-texte h2 { font-size: 1.6rem; font-weight: 700; color: var(--bleu); margin-bottom: 14px; } .pres-texte p { font-size: 0.95rem; color: var(--texte-doux); line-height: 1.75; margin-bottom: 18px; } .pres-stats { display: flex; gap: 32px; margin-top: 24px; } .stat-item { display: flex; flex-direction: column; } .stat-num { font-size: 1.8rem; font-weight: 700; color: var(--bleu-vif); line-height: 1; } .stat-label { font-size: 0.78rem; color: var(--texte-doux); margin-top: 4px; } .section-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bleu-vif); margin-bottom: 12px; } h2.titre { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; color: var(--bleu); line-height: 1.25; margin-bottom: 16px; } .sous-titre { color: var(--texte-doux); margin-bottom: 20px; font-size: 0.95rem; } .corps { color: #444; font-size: 0.9rem; line-height: 1.75; margin-bottom: 14px; } .chiffres { display: flex; gap: 28px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--gris-bord); flex-wrap: wrap; } .chiffre strong { display: block; font-size: 1.8rem; font-weight: 700; color: var(--bleu); line-height: 1; } .chiffre span { font-size: 0.8rem; color: var(--texte-doux); margin-top: 3px; display: block; } /* ===== SERVICES ===== */ .entete-section { margin-bottom: 44px; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .card-service { background: #fff; border: 1px solid var(--gris-bord); border-radius: 4px; overflow: hidden; transition: box-shadow 0.2s; } .card-service:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09); } .card-service img { width: 100%; height: 165px; object-fit: cover; } .card-corps { padding: 18px 20px 22px; } .card-icone { width: 38px; height: 38px; background: #ffffff; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--bleu); } .card-corps h3 { font-size: 0.95rem; font-weight: 700; color: var(--bleu); margin-bottom: 6px; } .card-corps p { font-size: 0.82rem; color: var(--texte-doux); line-height: 1.65; } .prix-service { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--gris-bord); font-size: 1rem; font-weight: 700; color: var(--bleu-vif); text-align: center; } /* ===== POURQUOI ===== */ #pourquoi { position: relative; overflow: hidden; } .pourquoi-img-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .pourquoi-img-bg::after { content: ''; position: absolute; inset: 0; background: rgba(12, 24, 50, 0.85); } .pourquoi-inner { position: relative; z-index: 1; } .pourquoi-inner .section-label { color: #ffffff; } .pourquoi-inner h2.titre { color: #fff; } .pourquoi-inner .sous-titre { color: #ffffff; margin-bottom: 0; } .engagements-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; } .engagement, .engagement-item { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; padding: 26px 20px; } .engagement-icone, .eng-icone { width: 42px; height: 42px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #ffffff; margin-bottom: 14px; font-size: 1.5rem; } .engagement h3, .engagement-item h4 { font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: 8px; } .engagement p, .engagement-item p { font-size: 0.82rem; color: #ffffff; line-height: 1.65; } /* ===== ZONE ===== */ .zone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .zone-texte h2 { font-size: 1.6rem; font-weight: 700; color: var(--bleu); margin-bottom: 14px; } .zone-texte p { font-size: 0.95rem; color: var(--texte-doux); line-height: 1.75; margin-bottom: 18px; } .zone-img-wrap { position: relative; border-radius: 4px; overflow: hidden; } .zone-img, .zone-img-wrap img { position: relative; border-radius: 4px; overflow: hidden; } .zone-img img { width: 100%; height: 380px; object-fit: cover; } .zone-img-label { position: absolute; bottom: 0; left: 0; right: 0; background: var(--bleu); color: #fff; font-size: 0.8rem; font-weight: 600; padding: 10px 16px; text-align: center; } .villes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 20px 0 24px; } .ville { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--texte); font-weight: 500; } .ville-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); flex-shrink: 0; } .note-zone { background: #ffffff; border-left: 3px solid var(--bleu); padding: 12px 16px; font-size: 0.83rem; color: var(--bleu); font-weight: 500; border-radius: 0 4px 4px 0; } /* ===== AVIS ===== */ .note-globale { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; } .note-chiffre { font-size: 3rem; font-weight: 700; color: var(--bleu); line-height: 1; } .note-etoiles { color: #c8901a; font-size: 1.2rem; letter-spacing: 1px; } .note-meta { font-size: 0.8rem; color: var(--texte-doux); margin-top: 3px; } .avis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .avis-card { background: #fff; border: 1px solid var(--gris-bord); border-radius: 4px; padding: 22px; } .avis-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .avis-initiales { width: 40px; height: 40px; border-radius: 50%; background: var(--bleu); color: #fff; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .avis-meta-auth strong { font-size: 0.9rem; font-weight: 700; display: block; } .avis-meta-auth span { font-size: 0.75rem; color: var(--texte-doux); } .etoiles-sm { color: #c8901a; font-size: 0.8rem; margin-bottom: 8px; } .avis-card p { font-size: 0.83rem; color: #444; line-height: 1.7; } .mention-google { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 32px; font-size: 0.8rem; color: var(--texte-doux); } .badge-google { border: 1px solid var(--gris-bord); border-radius: 3px; padding: 4px 12px; font-size: 0.78rem; font-weight: 600; color: #333; } /* ===== FAQ ===== */ .faq-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .faq-content h2 { font-size: 1.6rem; font-weight: 700; color: var(--bleu); margin-bottom: 14px; } .faq-img { border-radius: 4px; overflow: hidden; } .faq-img img { width: 100%; height: 400px; object-fit: cover; } .accordeon { display: flex; flex-direction: column; border-top: 1px solid var(--gris-bord); } .acc-item { border-bottom: 1px solid var(--gris-bord); } .acc-btn { width: 100%; background: none; border: none; padding: 16px 0; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; color: var(--texte); transition: color 0.18s; } .acc-btn:hover { color: var(--bleu); } .acc-btn.ouvert { color: var(--bleu); } .acc-chevron { flex-shrink: 0; transition: transform 0.22s; color: var(--texte-doux); } .acc-btn.ouvert .acc-chevron { transform: rotate(180deg); color: var(--bleu); } .acc-corps { display: none; padding: 0 0 16px; font-size: 0.84rem; color: var(--texte-doux); line-height: 1.75; } .acc-corps.ouvert { display: block; } /* ===== CONTACT ===== */ .contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; } .contact-form-wrap h3 { font-size: 1.3rem; font-weight: 700; color: var(--bleu); margin-bottom: 20px; } .contact-infos { display: flex; flex-direction: column; gap: 20px; } .info-ligne { display: flex; align-items: flex-start; gap: 14px; } .info-icone { width: 40px; height: 40px; background: #ffffff; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--bleu); flex-shrink: 0; } .info-texte strong { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texte-doux); margin-bottom: 2px; } .info-texte span { font-size: 0.9rem; font-weight: 600; color: var(--texte); } .urgence-encart { background: var(--bleu); border-radius: 4px; padding: 22px; margin-top: 8px; } .urgence-encart h3, .urgence-encart h4 { color: #fff; font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; } .urgence-encart p { color: #ffffff; font-size: 0.83rem; margin-bottom: 16px; } .urgence-encart a { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--bleu-vif); color: #fff; font-weight: 700; font-size: 1rem; padding: 13px 20px; border-radius: 4px; transition: background 0.18s; } .urgence-encart a:hover { background: #1255a8; } /* Formulaire standard */ .formulaire { background: #fff; border: 1px solid var(--gris-bord); border-radius: 4px; padding: 32px; } .formulaire h3 { font-size: 1rem; font-weight: 700; color: var(--bleu); margin-bottom: 24px; } .champ-rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .champ { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .champ label { font-size: 0.8rem; font-weight: 600; color: #555; } .champ input, .champ select, .champ textarea { border: 1px solid var(--gris-bord); border-radius: 3px; padding: 10px 12px; font-size: 0.875rem; font-family: 'Inter', sans-serif; color: var(--texte); background: #fff; outline: none; transition: border-color 0.18s; } .champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bleu); } .champ textarea { resize: vertical; min-height: 100px; } .btn-envoyer { width: 100%; background: var(--bleu); color: #fff; font-weight: 600; font-size: 0.9rem; padding: 13px; border: none; border-radius: 3px; cursor: pointer; font-family: 'Inter', sans-serif; transition: background 0.18s; } .btn-envoyer:hover { background: #152e52; } .note-form { font-size: 0.75rem; color: var(--texte-doux); text-align: center; margin-top: 8px; } /* Page contact — coordonnées */ .contact-coords { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 24px; } .coord-item { background: #fff; border: 1px solid var(--gris-bord); border-radius: 4px; padding: 28px 24px; text-align: center; } .coord-icone { font-size: 2.4rem; margin-bottom: 10px; } .coord-item h3 { font-size: 1rem; font-weight: 700; color: var(--bleu); margin-bottom: 8px; } .coord-item p { font-size: 0.875rem; color: var(--texte-doux); line-height: 1.6; } .coord-item a { color: var(--bleu); text-decoration: none; transition: color 0.18s; } .coord-item a:hover { color: var(--bleu-vif); } /* Page contact — urgence large */ .urgence-full { background: var(--bleu); border-radius: 4px; padding: 36px 40px; text-align: center; } .urgence-full h2 { color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; } .urgence-full p { color: #ffffff; font-size: 0.95rem; margin-bottom: 16px; max-width: 620px; margin-left: auto; margin-right: auto; } .urgence-depts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; } .dept-tag { background: rgba(255, 255, 255, 0.12); color: #fff; padding: 6px 14px; border-radius: 3px; font-size: 0.8rem; font-weight: 500; } /* Page contact — formulaire complet */ .contact-form-full { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--gris-bord); border-radius: 4px; padding: 36px 40px; } .contact-form-full .form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .contact-form-full .form-group { margin-bottom: 14px; } .contact-form-full .form-group label { display: block; font-size: 0.75rem; font-weight: 600; color: #555; margin-bottom: 4px; } .contact-form-full .form-group input, .contact-form-full .form-group select, .contact-form-full .form-group textarea { width: 100%; border: 1px solid var(--gris-bord); border-radius: 3px; padding: 10px 12px; font-size: 0.875rem; font-family: 'Inter', sans-serif; color: var(--texte); background: #fff; outline: none; transition: border-color 0.18s; } .contact-form-full .form-group input:focus, .contact-form-full .form-group select:focus, .contact-form-full .form-group textarea:focus { border-color: var(--bleu); } .contact-form-full .form-group textarea { resize: vertical; min-height: 110px; } .contact-form-full .btn-envoyer { width: 100%; background: var(--bleu); color: #fff; font-weight: 600; font-size: 0.95rem; padding: 14px; border: none; border-radius: 3px; cursor: pointer; font-family: 'Inter', sans-serif; transition: background 0.18s; } .contact-form-full .btn-envoyer:hover { background: #152e52; } /* Page contact — horaires */ .horaires-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; } .horaire-item { background: #fff; border: 1px solid var(--gris-bord); border-radius: 4px; padding: 24px 20px; text-align: center; } .horaire-item h3 { font-size: 0.95rem; font-weight: 700; color: var(--bleu); margin-bottom: 4px; } .horaire-heures { font-size: 1.1rem; font-weight: 700; color: var(--texte); margin: 6px 0; } .horaire-desc { font-size: 0.8rem; color: var(--texte-doux); } /* Page contact — mentions légales */ .mentions-block { background: #fff; border: 1px solid var(--gris-bord); border-radius: 4px; padding: 28px 32px; max-width: 760px; margin: 0 auto; } .mentions-block h3 { font-size: 1rem; font-weight: 700; color: var(--bleu); margin-bottom: 16px; } .mentions-block p { font-size: 0.83rem; color: var(--texte); line-height: 1.75; margin-bottom: 10px; } .mentions-block a { color: var(--bleu); text-decoration: none; } .mentions-block a:hover { text-decoration: underline; } /* ===== FOOTER ===== */ footer { background: #0e7490; color: #ffffff; padding: 52px 0 22px; border-top: 4px solid var(--bleu-vif); } .footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 36px; margin-bottom: 36px; } .footer-brand { align-self: start; } .footer-brand img { height: auto; width: auto; max-width: 140px; max-height: none; margin-bottom: 14px; } .footer-brand p { font-size: 0.83rem; line-height: 1.75; color: #ffffff; } .footer-col h4 { color: #fff; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 16px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; } .footer-col ul li a { font-size: 0.83rem; color: #ffffff; transition: color 0.18s; } .footer-col ul li a:hover { color: #fff; } .footer-col ul li { font-size: 0.83rem; color: #ffffff; } .footer-bas { border-top: 1px solid #ffffff; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .footer-bas p { font-size: 0.75rem; color: #ffffff; } .footer-bas-links { display: flex; gap: 18px; } .footer-bas-links a { font-size: 0.75rem; color: #ffffff; transition: color 0.18s; } .footer-bas-links a:hover { color: #b91c1c; } /* ===== RESPONSIVE ===== */ @media (max-width: 1024px) { .engagements-grid { grid-template-columns: repeat(2, 1fr); } .footer-cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 992px) { .hero { min-height: auto !important; padding: 70px 20px 60px !important; } } @media (max-width: 768px) { .header-top-bar { display: none; } #main-nav { display: none; } /* Cacher seulement l'icône téléphone seule dans header-mobile-actions */ .header-mobile-actions .header-tel-icon { display: none; } .header-mobile-actions { display: flex; } .logo-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; line-height: 1.15 !important; font-size: 16px; } .logo-text span { display: block !important; font-size: 0.85rem !important; } /* Agrandir le logo sur mobile */ .logo-wrap img { max-height: 50px; width: auto; } .header-inner { gap: 10px; height: 58px; justify-content: space-between; align-items: center; position: relative; padding: 0 8px; } /* Masquer le bouton numéro de téléphone dans le header sur mobile */ .header-tel { display: none !important; } /* Hover du bouton téléphone sur mobile - maintenir le centrage */ .header-tel:hover { background: #991b1b; transform: translateX(-50%); } /* Ajuster le logo-wrap pour ne pas être caché par le bouton centré */ .logo-wrap { z-index: 11; position: relative; } /* Ajuster header-mobile-actions pour ne pas être caché par le bouton centré */ .header-mobile-actions { z-index: 11; position: relative; } .hero-layout { grid-template-columns: 1fr; gap: 28px; } #hero { min-height: auto; padding: 60px 0; } .presentation-grid, .zone-grid, .faq-layout, .contact-layout { grid-template-columns: 1fr; gap: 32px; } .services-grid { grid-template-columns: 1fr 1fr; } .avis-grid { grid-template-columns: 1fr; } .engagements-grid { grid-template-columns: 1fr 1fr; } .footer-cols { grid-template-columns: 1fr; gap: 24px; } /* Logo du footer même taille que le header sur mobile */ .footer-brand img { max-width: none; max-height: 60px; width: auto; } .champ-rangee { grid-template-columns: 1fr; } .villes { grid-template-columns: 1fr; } .footer-bas { flex-direction: column; text-align: center; } .hero-actions { flex-direction: column; align-items: flex-start; } .hero-actions a { width: auto; } .hero-points { flex-direction: column; gap: 12px; } .faq-layout { grid-template-columns: 1fr; } .faq-img { display: none; } .contact-coords { grid-template-columns: 1fr; } .contact-form-full { padding: 24px 20px; } .contact-form-full .form-row { grid-template-columns: 1fr; } .horaires-grid { grid-template-columns: 1fr; } .urgence-full { padding: 24px 20px; } } @media (max-width: 520px) { .services-grid { grid-template-columns: 1fr; } .engagements-grid { grid-template-columns: 1fr; } .avis-grid { grid-template-columns: 1fr; } } /* ===== MASQUER SECTION AVIS ===== */ #avis { display: none !important; } /* ===== MASQUER SECTIONS AVIS - Toutes les pages ===== */ /* Masquer les sections qui contiennent note-globale (section avis) */ section:has(.note-globale) { display: none !important; } /* Masquer spécifiquement la section avec ID avis */ #avis { display: none !important; } /* Masquer également les éléments internes de la section avis */ .note-globale, .note-etoiles, .note-texte, .note-chiffre, .avis-grid, .avis-card, .avis-top, .avis-initiales, .avis-meta-auth, .etoiles-sm, .avis-header, .mention-google { display: none !important; } /* ===== MASQUER SECTION TARIFS - Toutes les pages ===== */ #tarifs { display: none !important; } /* Animation de vibration (téléphone) - La Clé Savoyarde */ @keyframes ring-vibrate { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-15deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(15deg); } } /* Vibration de l'icône de téléphone au survol des boutons */ .btn:hover i, .header-tel:hover i, .header-tel-icon:hover i, .btn-flottant:hover i, .mobile-tel:hover i { animation: ring-vibrate 0.3s ease-in-out infinite; display: inline-block; transform-origin: center; } /* ===== BOUTON FLOTTANT STRICT (STYLE 21) ===== */ .btn-flottant { position: fixed; bottom: 24px; right: 24px; display: flex; align-items: center; gap: 10px; padding: 14px 24px; background-color: var(--bleu-vif); color: var(--blanc) !important; border-radius: 0px; border: 2.5px solid var(--bleu-vif); font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 10px 25px rgba(185, 28, 28, 0.4); z-index: 999; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease, color 0.2s ease; text-decoration: none; animation: pulse 2s infinite; } /* L'icône de téléphone vibre doucement en continu */ .btn-flottant i { display: inline-block; transform-origin: center; animation: ring-vibrate 1.5s ease-in-out infinite; } .btn-flottant:hover i { animation: ring-vibrate 0.3s ease-in-out infinite; } .btn-flottant:hover { background-color: var(--blanc); color: var(--bleu-vif) !important; transform: translateY(-4px) scale(1.03); } .btn-flottant:hover i { animation: ring-vibrate 0.3s ease-in-out infinite; } @media (max-width: 768px) { .btn-flottant { bottom: 0px; right: 0px; left: 0px; width: 100%; justify-content: center; padding: 18px 20px; font-size: 16px; border-left: none; border-right: none; border-bottom: none; } } /* ===== POPUP OVERLAY ===== */ .popup-overlay { position: fixed; inset: 0; background: rgba(14, 116, 144, 0.6); z-index: 1000; display: none; backdrop-filter: blur(4px); } /* ===== POPUP CONTACT (STRICT 3 COULEURS & CARRE) ===== */ .contact-popup { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--blanc); border: 3px solid var(--bleu); padding: 40px; z-index: 1001; width: 100%; max-width: 460px; display: none; border-radius: 0px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .close-popup { position: absolute; top: 12px; right: 18px; background: none; border: none; font-size: 28px; color: var(--bleu); cursor: pointer; line-height: 1; } .close-popup:hover { color: var(--bleu-vif); } .contact-content h2 { font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 24px; color: var(--bleu); margin-bottom: 6px; } .contact-content p { font-size: 14px; color: var(--bleu); margin-bottom: 28px; opacity: 0.8; } /* ===== FORMULAIRE EN LIGNES MINIMALISTE (STYLE 3) ===== */ .popup-form-lignes { display: flex; flex-direction: column; gap: 24px; } .popup-form-lignes .contact-input, .popup-form-lignes .contact-textarea { width: 100%; border: none; border-bottom: 1.5px solid var(--bleu); background: transparent; padding: 8px 0; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--bleu); outline: none; transition: border-color 0.2s ease-in-out; border-radius: 0px; } .popup-form-lignes .contact-textarea { resize: none; } .popup-form-lignes .contact-input::placeholder, .popup-form-lignes .contact-textarea::placeholder { color: var(--bleu); opacity: 0.6; } .popup-form-lignes .contact-input:focus, .popup-form-lignes .contact-textarea:focus { border-bottom: 2px solid var(--bleu-vif); } .popup-form-lignes button[type="submit"] { align-self: flex-start; margin-top: 10px; } @media (max-width: 520px) { .contact-popup { padding: 30px 20px; max-width: 90%; } } /* ============================================================================== SECTION NOTRE ENTREPRISE (Style CABINET ENERGIS avec Palette 42 & Duo 14) ============================================================================== */ .about { background: var(--blanc); } .presentation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .presentation-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .presentation-images img { width: 100%; height: 200px; object-fit: cover; border-radius: 0px !important; } .presentation-images img:nth-child(3) { grid-column: span 2; } /* Surtitre "13. Encadré Lignes" */ .about .section-label { display: inline-block; border-top: 2px solid var(--bleu-vif); border-bottom: 2px solid var(--bleu-vif); color: var(--bleu-vif); font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.25em; padding: 6px 16px; margin-bottom: 24px; } /* Titres et paragraphes en noir uniforme */ .about-title { font-family: 'Oswald', sans-serif; font-size: 36px; font-weight: 700; color: #000000; line-height: 1.25; margin-bottom: 20px; } .about-paragraph { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: normal; color: #000000; line-height: 1.65; margin-bottom: 16px; } .action-buttons { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 30px; } /* CTA Secondaire (Outline Bleu -> Devient Rempli Bleu au survol) */ .btn--outline-blue { background: transparent; color: var(--bleu); border-color: var(--bleu) !important; } .btn--outline-blue:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu) !important; transform: translateY(-2px); } @media (max-width: 992px) { .presentation-grid { grid-template-columns: 1fr; gap: 40px; } } /* ============================================================================== SECTION SERVICES (Style LOUISE SERVICE avec Palette 42 & Duo 14) ============================================================================== */ .services { background: var(--blanc); } .section-header-center { text-align: center; margin-bottom: 50px; } .services-main-title { font-family: 'Oswald', sans-serif; font-size: 36px; font-weight: 700; color: #000000; line-height: 1.25; margin-top: 15px; margin-bottom: 12px; } .services-main-desc { font-family: 'Inter', sans-serif; font-size: 16px; color: #000000; opacity: 0.8; max-width: 600px; margin: 0 auto; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .service-card { position: relative; background: var(--blanc); padding: 0 !important; border-radius: 0px !important; border: 2.5px solid var(--bleu); transition: all 0.3s ease-in-out; display: flex; flex-direction: column; overflow: hidden; } .service-card:hover { transform: translateY(-5px); border-color: var(--bleu-vif); } .service-card-img { width: 100%; height: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom: 2.5px solid var(--bleu); transition: border-color 0.3s ease-in-out; } .service-card:hover .service-card-img { border-bottom-color: var(--bleu-vif); } .service-number { position: absolute; top: 15px; right: 15px; font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 700; color: var(--blanc); text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); line-height: 1; z-index: 2; } .service-content { padding: 25px 25px 30px 25px; display: flex; flex-direction: column; flex-grow: 1; } .service-title { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: #000000; line-height: 1.3; } .service-description { font-family: 'Inter', sans-serif; color: #000000; font-size: 14px; margin-bottom: 24px; line-height: 1.7; opacity: 0.9; flex-grow: 1; } .service-link { display: inline-flex; align-items: center; gap: 8px; color: var(--bleu-vif); font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s ease-in-out; } .service-link:hover { gap: 12px; color: var(--bleu); } .services-disclaimer { text-align: center; margin-top: 40px; color: #000000; font-family: 'Inter', sans-serif; font-size: 13px; opacity: 0.7; } @media (max-width: 992px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================================== SECTION NOTRE ENTREPRISE & SERVICES (Style adapté Duo 14 & Palette 42) ============================================================================== */ .about { background: var(--blanc); } .services { background: var(--gris-bg); } .presentation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .presentation-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .presentation-images img { width: 100%; height: 200px; object-fit: cover; border-radius: 0px !important; } .presentation-images img:nth-child(3) { grid-column: span 2; } /* Surtitre global "13. Encadré Lignes" */ .section-label { display: inline-block !important; border-top: 2px solid var(--bleu-vif) !important; border-bottom: 2px solid var(--bleu-vif) !important; color: var(--bleu-vif) !important; font-family: 'Oswald', sans-serif !important; font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.25em !important; padding: 6px 16px !important; margin-bottom: 24px !important; background: transparent !important; border-radius: 0px !important; } .section-header-center { text-align: center; margin-bottom: 50px; } /* --- Typographie & Tailles de la Section À Propos --- */ .about-title { font-family: 'Oswald', sans-serif; font-size: 36px; font-weight: 700; color: #000000; line-height: 1.25; margin-bottom: 20px; } .about-paragraph { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: normal; color: #000000; line-height: 1.65; margin-bottom: 16px; } /* --- Typographie & Tailles de la Section Services --- */ .services-main-title { font-family: 'Oswald', sans-serif; font-size: 36px; font-weight: 700; color: #000000; line-height: 1.25; margin-top: 15px; margin-bottom: 12px; } .services-main-desc { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: normal; color: #000000; opacity: 0.8; max-width: 600px; margin: 0 auto; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .service-card { position: relative; background: var(--blanc); padding: 0 !important; border-radius: 0px !important; border: 2.5px solid var(--bleu); transition: all 0.3s ease-in-out; display: flex; flex-direction: column; overflow: hidden; } .service-card:hover { transform: translateY(-5px); border-color: var(--bleu-vif); } .service-card-img { width: 100%; height: 200px; background-size: cover; background-position: center; background-repeat: no-repeat; border-bottom: 2.5px solid var(--bleu); transition: border-color 0.3s ease-in-out; } .service-card:hover .service-card-img { border-bottom-color: var(--bleu-vif); } .service-number { position: absolute; top: 15px; right: 15px; font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 700; color: var(--blanc); text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); line-height: 1; z-index: 2; } .service-content { padding: 25px 25px 30px 25px; display: flex; flex-direction: column; flex-grow: 1; } .service-title { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 700; margin-bottom: 12px; color: #000000; line-height: 1.3; } .service-description { font-family: 'Inter', sans-serif; color: #000000; font-size: 14px; margin-bottom: 24px; line-height: 1.7; opacity: 0.9; flex-grow: 1; } .service-link { display: inline-flex; align-items: center; gap: 8px; color: var(--bleu-vif); font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s ease-in-out; } .service-link:hover { gap: 12px; color: var(--bleu); } .services-disclaimer { text-align: center; margin-top: 40px; color: #000000; font-family: 'Inter', sans-serif; font-size: 13px; opacity: 0.7; } .action-buttons { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 30px; } /* CTA Secondaire */ .btn--outline-blue { background: transparent; color: var(--bleu); border-color: var(--bleu) !important; } .btn--outline-blue:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu) !important; transform: translateY(-2px); } /* --- Responsive --- */ @media (max-width: 992px) { .presentation-grid { grid-template-columns: 1fr; gap: 40px; } .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } } /* ============================================================================== SECTION CHIFFRES CLÉS (Style 35. BorderRadius Organique avec Palette 42 & Duo 14) ============================================================================== */ .stats { background: var(--blanc); } .stats-main-title { font-family: 'Oswald', sans-serif; font-size: 36px; font-weight: 700; color: #000000; line-height: 1.25; margin-top: 15px; margin-bottom: 40px; } .stats-grid-organique { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; } .stat-card { background: var(--blanc); padding: 40px 20px; border: 2.5px solid var(--bleu); transition: all 0.3s ease-in-out; } .stat-card--organique-1 { border-radius: 40px 10px 40px 10px; } .stat-card--organique-2 { border-radius: 10px 40px 10px 40px; } .stat-card:hover { transform: translateY(-5px); border-color: var(--bleu-vif); } .stat-number { font-family: 'Oswald', sans-serif; font-size: 42px; font-weight: 700; color: var(--bleu); line-height: 1.1; margin-bottom: 8px; } .stat-suffix { color: var(--bleu-vif); } .stat-label-text { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: #000000; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.05em; } /* --- Responsive --- */ @media (max-width: 992px) { .stats-grid-organique { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .stats-grid-organique { grid-template-columns: 1fr; } } /* ============================================================================== SECTION ZONE D'INTERVENTION (Style SOS EXPERT DEBARRAS avec Palette 42 & Duo 14) ============================================================================== */ .zone { background: var(--gris-bg); } .zone-main-title { font-family: 'Oswald', sans-serif; font-size: 36px; font-weight: 700; color: #000000; line-height: 1.25; margin-top: 15px; margin-bottom: 12px; } .zone-intro { font-family: 'Inter', sans-serif; font-size: 16px; color: #000000; opacity: 0.8; max-width: 700px; margin: 0 auto 36px auto; text-align: center; } .zone-badges-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; } /* Badges arrondis (pilules) pour éviter l'effet trop carré */ .zone-tag-badge { background: var(--bleu); color: var(--blanc); font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 20px; border-radius: 50px !important; /* Forme pilule arrondie */ transition: all 0.25s ease-in-out; cursor: default; } .zone-tag-badge:hover { background: var(--bleu-vif); transform: translateY(-2px); } /* Conteneur de CTAs parfaitement centré */ .action-buttons-center { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; margin-top: 40px; width: 100%; } /* ============================================================================== SECTION FAQ (Style CABINET ENERGIS avec Palette 42 & Duo 14) ============================================================================== */ .faq-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; } .faq-img { position: relative; } /* Bordure de la photo retirée - bords carrés stricts */ .faq-img img { width: 100%; border-radius: 0 !important; border: none !important; box-shadow: none !important; } .acc-btn { font-family: 'Oswald', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: #000000 !important; text-transform: uppercase; letter-spacing: 0.03em; padding: 18px 0 !important; } .acc-btn:hover, .acc-btn.ouvert { color: var(--bleu-vif) !important; } .acc-btn.ouvert .acc-chevron { color: var(--bleu-vif) !important; } /* Transition glissante fluide pour l'ouverture (défilement doux) */ .acc-corps { display: block !important; /* Force le block pour permettre les transitions de hauteur */ max-height: 0; overflow: hidden; opacity: 0; padding: 0 !important; font-family: 'Inter', sans-serif; color: #000000 !important; font-size: 14px !important; line-height: 1.65; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.35s ease-in-out; } .acc-corps.ouvert { max-height: 200px; /* Hauteur max pour contenir tout le texte */ opacity: 0.85; padding: 0 0 18px !important; } @media (max-width: 992px) { .faq-layout { grid-template-columns: 1fr; gap: 40px; } } /* ============================================================================== SECTION CONTACT (Style LA CLE SAVOYARDE avec Palette 42 & Duo 14) ============================================================================== */ .contact-section { position: relative; padding: 80px 0; color: var(--blanc); overflow: hidden; background-color: var(--bleu); } .contact-bg-wrap { position: absolute; inset: 0; z-index: 1; } .contact-section .container { position: relative; z-index: 2; } .contact-bg-img { width: 100%; height: 100%; object-fit: cover; } .contact-overlay { position: absolute; inset: 0; background-color: rgba(6, 40, 50, 0.96); /* Overlay plus sombre pour maximiser le contraste */ } /* Formes floues décoratives */ .contact-deco-shapes { position: absolute; inset: 0; opacity: 0.15; z-index: 1; pointer-events: none; } .contact-shape { position: absolute; border-radius: 50%; filter: blur(80px); } .contact-shape.shape-1 { top: 10%; left: 5%; width: 250px; height: 250px; background-color: var(--blanc); } .contact-shape.shape-2 { bottom: 10%; right: 5%; width: 350px; height: 350px; background-color: var(--bleu-vif); } .contact-header { margin-bottom: 50px; text-align: center; } .contact-section .section-title { font-family: 'Oswald', sans-serif; font-size: 36px; font-weight: 700; color: var(--blanc); text-align: center; line-height: 1.25; margin-top: 15px; margin-bottom: 12px; } .contact-subtitle { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); max-width: 650px; margin: 15px auto 0; text-align: center; } /* Grille et cartes */ .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .contact-card { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); padding: 30px 24px; transition: all 0.3s ease; display: block; text-decoration: none; color: inherit; /* Angles droits stricts */ border-radius: 0 !important; } .contact-card--link:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .contact-card-inner { display: flex; align-items: flex-start; gap: 20px; } .contact-icon-box { flex-shrink: 0; width: 50px; height: 50px; background-color: var(--bleu-vif); /* Rouge */ color: var(--blanc); display: flex; align-items: center; justify-content: center; font-size: 20px; /* Angles droits stricts */ border-radius: 0 !important; } .contact-info { flex: 1; } .contact-info-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); margin-bottom: 6px; } .contact-info-value { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 600; color: var(--blanc); margin: 0; line-height: 1.3; } .contact-info-value--lg { font-size: 22px; letter-spacing: 0.02em; } .contact-info-sub { font-family: 'Inter', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.6); margin: 6px 0 0 0; } @media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; gap: 16px; } .contact-card { padding: 24px 20px; } } /* Correction police ville dynamique */ .ville-dynamique { font-family: inherit !important; font-weight: inherit !important; } /* Logo Pied de page avec texte à côté */ .footer-logo-wrapper { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .footer-logo-wrapper img { height: auto; max-height: 50px; width: auto; } .footer-logo-text { font-family: 'Oswald', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--blanc); text-transform: uppercase; letter-spacing: 0.03em; } .footer-logo-text span { font-family: inherit !important; font-weight: inherit !important; color: #ff4d4d; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /* MOBILE CALL BUTTON */ .mobile-call-btn { display: none; } @media (max-width: 1024px) { .mobile-call-btn { display: inline-block; background-color: var(--color-orange, #ff4d4d); color: #ffffff; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 4px; text-decoration: none; margin-right: 12px; transition: background-color 0.2s ease; } .mobile-call-btn:hover { background-color: var(--color-blue-dark, #0a3d62); } } /* MOBILE STARS BAR */ .mobile-stars-bar { display: none; } @media (max-width: 1024px) { .mobile-stars-bar { display: flex; justify-content: center; align-items: center; gap: 8px; background-color: var(--color-orange, #ff4d4d); padding: 10px 0; } .mobile-stars-bar i { color: #FFD700; font-size: 12px; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0px rgba(185, 28, 28, 0.6); } 70% { box-shadow: 0 0 0 14px rgba(185, 28, 28, 0); } 100% { box-shadow: 0 0 0 0px rgba(185, 28, 28, 0); } } /* CALLBACK POPUP */ .callback-popup { position: fixed; right: 20px; top: 150px; background: var(--color-white, #ffffff); border-right: 4px solid var(--color-orange, #dc2626); box-shadow: 0 8px 32px rgba(0,0,0,0.15); border-radius: 0; padding: 20px; z-index: 1000; min-width: 260px; display: none; } .close-popup { position: absolute; top: 8px; right: 10px; background: none; border: none; font-size: 20px; color: #64748b; cursor: pointer; padding: 5px; line-height: 1; } .close-popup:hover { color: var(--color-orange, #dc2626); } .callback-content h3 { font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 600; color: var(--color-blue, #0e7490); margin-bottom: 8px; } .callback-content p { font-family: 'Inter', sans-serif; font-size: 13px; color: #64748b; margin-bottom: 15px; } .callback-input { width: 100%; padding: 10px; border: 1px solid #cbd5e1; border-radius: 0; font-family: 'Inter', sans-serif; font-size: 14px; margin-bottom: 12px; } .callback-btn { width: 100%; padding: 10px; background: var(--color-orange, #dc2626); color: var(--color-white, #ffffff); font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600; border: none; border-radius: 0; cursor: pointer; text-transform: uppercase; transition: background-color 0.2s ease; } .callback-btn:hover { background: var(--color-orange-dark, #b91c1c); } @media (max-width: 1024px) { .callback-popup { left: 10px; right: 10px; top: auto; bottom: 20px; transform: none; min-width: auto; border-right: 4px solid var(--color-orange, #dc2626); border-left: none; } }