/* --------------------------------------------------------------------------- css/medespoir-fixes.css Correctifs issus de l'audit technique du 2026-09-01. Chargé après medespoir.min-1.css et responsive.css, jamais à leur place : aucune règle existante n'est modifiée. --------------------------------------------------------------------------- */ /* --- 1. Maillage par famille dans le pied de page ------------------------ */ .footer-sitemap { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 34px; } .footer-sitemap .footer-family-title { font-size: 15px; line-height: 1.3; margin: 0 0 12px; font-weight: 600; color: #1e788e; } .footer-sitemap .footer-family-list { list-style: none; margin: 0 0 28px; padding: 0; } .footer-sitemap .footer-family-list li { margin: 0 0 5px; line-height: 1.45; } .footer-sitemap .footer-family-list a { font-size: 13.5px; color: #313131; text-decoration: none; /* WCAG 2.5.8 : cible tactile d'au moins 24 px de haut. 38 des 135 liens visibles mesuraient 20 px. */ display: inline-block; min-height: 24px; line-height: 24px; } .footer-sitemap .footer-family-list a:hover, .footer-sitemap .footer-family-list a:focus { color: #1e788e; text-decoration: underline; } /* --- 2. Bouton WhatsApp flottant ---------------------------------------- */ /* Il recouvrait le libellé « Téléphone » et le champ de saisie du formulaire héros sur mobile : un champ de formulaire était physiquement inaccessible. On le remonte au-dessus de la zone du formulaire. */ .whatsapp-icon { z-index: 60; } @media (max-width: 767px) { .whatsapp-link .whatsapp-icon { bottom: 84px; right: 12px; } .whatsapp-link .whatsapp-icon img { width: 48px; height: 48px; } } /* --- 3. Cibles tactiles et focus clavier -------------------------------- */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #216bad; outline-offset: 2px; } @media (max-width: 767px) { .elementskit-navbar-nav a, .elementskit-dropdown a { min-height: 44px; display: flex; align-items: center; } } /* --- 4. Stabilité de mise en page (CLS) --------------------------------- */ /* Les 625 images du site n'avaient ni width ni height. Les attributs sont ajoutés dans le HTML ; cette règle garantit qu'ils ne cassent pas le responsive existant. */ img { max-width: 100%; height: auto; } img[width][height] { height: auto; } /* --- 5. Iframe du formulaire de devis ----------------------------------- */ /* Le titre du bloc de devis utilisait un @import de Google Fonts (Poppins) déclaré dans le : requête bloquante, et transmission de l'IP du visiteur à Google. Remplacé par une pile de polices système. */ .title-iframe { text-align: center; font-size: 31px; line-height: 1.25; font-weight: 600; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; padding: 20px 0; margin: 0; background: linear-gradient(90deg, #216bad, #3fb55b, #216bad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #216bad; /* repli si background-clip n'est pas supporté */ } @media (max-width: 575px) { .title-iframe { font-size: 24px; } } /* Ligne de secours toujours visible sous le formulaire. Discrète, mais présente : si app.metocrm.com ne répond pas, la page de conversion principale du site n'offrait plus aucun moyen de contact. */ .devis-fallback-always { margin: 10px 0 0; padding: 0; border: 0; background: none; text-align: center; font-size: 13.5px; color: #5a6673; } .devis-iframe-wrap { position: relative; width: 100%; } .devis-iframe-wrap iframe { display: block; width: 100%; min-height: 800px; border: 0; border-radius: 10px; } /* Repli visible si l'iframe MetoCRM ne charge pas : la page de conversion principale n'offrait aucun autre moyen de contact. */ .devis-fallback { margin: 18px 0 0; padding: 16px 18px; border: 1px solid #d9e2e8; border-radius: 8px; background: #f6f9fb; font-size: 15px; line-height: 1.55; } .devis-fallback strong { display: block; margin-bottom: 4px; } /* --- 6. Titre de section décoratif ------------------------------------- */ /* Onze balises Hn étaient vides et servaient uniquement de séparateur visuel, dont 7 sur la seule page Genève. Elles sont remplacées par cette classe, qui reprend leur apparence sans polluer la structure. */ .section-rule { display: block; height: 1px; margin: 26px 0; background: rgba(0, 0, 0, .08); border: 0; } /* --- 7. Impression ----------------------------------------------------- */ @media print { .whatsapp-link, .footer-sitemap, .scroll-to-top, #cookieyes { display: none !important; } }