/* ========================================================================= Celtic Freight Consulting — retouches responsive (mobile) Injecté en dernier dans par build.py → surcharge le thème/Elementor. Le site d'origine n'avait aucun design mobile → on corrige ici. ========================================================================= */ /* H1 sémantique (SEO/accessibilité) rendu invisible visuellement — le titre visible reste géré par le thème. Technique "screen-reader only" standard. */ .cfc-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 767px) { /* Filet de sécurité : aucun débordement horizontal */ html, body { overflow-x: hidden !important; max-width: 100%; } /* ===================== HEADER MOBILE ===================== */ /* 1) Supprime la marge haute redondante (prévue pour un header "fixed") : le header est en flux sur mobile → 90px de vide en trop sous le logo. */ .content.content_top_margin { margin-top: 0 !important; } /* 2) Header compact : on contraint TOUS les conteneurs internes du header (sinon leur fond recouvre le haut du hero et masque « CELTIC »). */ header.scroll_header_top_area, header .header_inner, header .header_inner_left, header .header_bottom, header .header_top_bottom_holder, header .q_logo, header .logo_wrapper, header .mobile_menu_button { height: 64px !important; min-height: 64px !important; line-height: 64px !important; } header img.mobile, header .mobile img, header .logo_wrapper img { max-height: 44px !important; width: auto !important; vertical-align: middle !important; } /* 3) Burger : décollé du bord gauche, plus grand et bien centré verticalement */ header .mobile_menu_button { padding-left: 18px !important; box-sizing: border-box !important; } header .mobile_menu_button i, header .mobile_menu_button .fa, header .mobile_menu_button [class*="icon"] { font-size: 24px !important; } /* 4) Menu déroulant (ouvert via notre toggle assets/menu.js) */ nav.mobile_menu { display: none !important; } body.cfc-menu-open nav.mobile_menu { display: block !important; position: absolute !important; top: 64px !important; left: 0 !important; right: 0 !important; width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; background: #fff !important; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important; z-index: 130 !important; } body.cfc-menu-open nav.mobile_menu ul, body.cfc-menu-open nav.mobile_menu li { display: block !important; height: auto !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; float: none !important; } body.cfc-menu-open nav.mobile_menu li { border-top: 1px solid #eee !important; } body.cfc-menu-open nav.mobile_menu a { display: block !important; padding: 15px 22px !important; color: #14294c !important; font-weight: 600 !important; text-decoration: none !important; line-height: 1.3 !important; } body.cfc-menu-open nav.mobile_menu a span { color: inherit !important; } /* flèches de sous-menu inutiles ici */ body.cfc-menu-open nav.mobile_menu .mobile_arrow { display: none !important; } /* le burger reste au-dessus du menu déroulant */ header .mobile_menu_button { position: relative !important; z-index: 140 !important; } /* ========================================================= */ /* --- Contrainte en cascade : rien ne dépasse la largeur de son parent --- Neutralise les largeurs fixes (px) et transform desktop, et coupe les longues chaînes (emails, URLs) qui déborderaient. */ .elementor-section *, .elementor-container * { max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word; /* coupe emails/URLs trop longs, mais pas les mots normaux */ } .elementor-column, .elementor-inner-column, .elementor-widget-wrap, .elementor-widget, .elementor-widget-container { transform: none !important; } .elementor-heading-title, .elementor-widget-text-editor .elementor-widget-container, .elementor-widget-text-editor p { width: auto !important; } /* Sous-sections : pas de marges latérales desktop (ex. 0 45px) */ .elementor-inner-section { margin-left: 0 !important; margin-right: 0 !important; } /* Gouttières latérales cohérentes sur toutes les colonnes (haut + internes) */ .elementor-top-column > .elementor-widget-wrap, .elementor-inner-column > .elementor-widget-wrap { padding-left: 20px !important; padding-right: 20px !important; } /* Boutons : jamais plus larges que l'écran, texte qui peut passer à la ligne */ .elementor-button, .elementor-button-wrapper { max-width: 100% !important; } .elementor-button { white-space: normal !important; } /* --- HERO (accueil) : les 3 blocs du titre s'empilent proprement --- */ .elementor-element-4f11434, .elementor-element-8bfea63, .elementor-element-363a00c { display: block !important; width: 100% !important; float: none !important; } .elementor-element-4f11434 .elementor-heading-title, .elementor-element-8bfea63 .elementor-heading-title, .elementor-element-363a00c .elementor-heading-title { font-size: 40px !important; line-height: 1.05 !important; } /* Sous-titre du hero aligné à gauche (aligné à droite en desktop) */ .elementor-element-679a78a, .elementor-element-679a78a * { text-align: left !important; } /* --- Titres de page / section trop grands en desktop (43–60px) --- clamp() ne rabote que les grands titres : à 390px, ~29px ; les titres de section (28px) bougent à peine. Le hero garde sa règle dédiée (plus spécifique). */ .elementor-heading-title { font-size: clamp(26px, 7.5vw, 38px) !important; line-height: 1.15 !important; } }