/* ============================================================================ responsive-fixes.css — TAL website Custom overrides loaded AFTER application.min(-en).css. Keep all hand-written responsive corrections here so the 457 KB minified theme file is never edited directly. Created 2026-06-25 — Fix: mobile hamburger menu would not open. ---------------------------------------------------------------------------- Cause: tapping the hamburger correctly adds `-responsive-menu-active` to , and the theme JS populates the `.responsive-menu` drawer, but the drawer's open-state CSS was broken: - tablet widths: drawer stayed parked off-screen (right:-300px, no rule ever moved it to right:0); - phone widths : drawer was on-screen but its inner wrapper collapsed to height:1px, so nothing was visible. This restores a proper full-height slide-in drawer below the breakpoint where the hamburger appears (61.25em / 980px). ========================================================================== */ /* Hide the mega-menu's decorative top-left corner arc (+ its shadow). At intermediate widths (~960–1050px) the top nav bar wraps and drops "Faire carrière au TAL" onto a second row directly above this corner, so the white arc pokes up into that cell. Hiding only this one corner removes the glitch; the search-box and other corners are untouched. */ .main-menu > .border-svg.-top.-left { display: none !important; } /* Close the 981–999px "dead band": the theme only shows the desktop top bar (.piv.second — Accueil / À propos / … / Bail électronique / English) at ≥62.5em (1000px), while the hamburger only appears at ≤61.25em (980px). That leaves 981–999px with no top navigation at all (the mega-menu still shows). Re-apply the desktop top-bar layout across that gap only. The theme's own ≥62.5em rules take over at 1000px, so this block is bounded to <62.5em. */ @media screen and (min-width: 61.3125em) and (max-width: 62.4375em) { .piv.second { display: block; } .piv.second .links { display: inline-block; } .piv.second .links li { display: inline-block; padding: .625em 1em; border-right: 2px solid #fff; margin-right: -0.25em; } .piv.second .language { display: inline-block; text-align: right; } .piv.second .social-media-logo { display: inline-block; width: 1.5625em; height: auto; vertical-align: middle; margin-left: .625em; } } @media only screen and (max-width: 61.25em) { /* Reveal the populated mobile drawer when the menu is toggled open */ .-responsive-menu-active .responsive-menu { display: block !important; position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 320px !important; max-width: 90vw !important; height: 100% !important; max-height: 100% !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; z-index: 9999 !important; } /* The theme collapses these inner containers to ~1px; let them grow so the menu items are actually visible and the drawer can scroll. */ .-responsive-menu-active .responsive-menu > div, .-responsive-menu-active .responsive-menu-wrapper { height: auto !important; min-height: 100% !important; overflow: visible !important; } /* The markup is duplicated and renders TWO drawers; responsive-fixes.js marks the empty/duplicate one so only the populated drawer shows. */ .-responsive-menu-active .responsive-menu.talfix-hide { display: none !important; } /* Close (X) button pinned to the top of the open drawer (added by responsive-fixes.js). On phones the drawer covers the header toggle, so this gives a reliable way to close the menu. */ .responsive-menu .talfix-close { position: sticky; top: 0; z-index: 20; display: block; margin: 0 0 0 auto; /* right-aligned */ width: 56px; height: 48px; padding: 0; border: 0; background: #095797; color: #fff; font-size: 30px; line-height: 46px; text-align: center; cursor: pointer; } .responsive-menu .talfix-close:hover, .responsive-menu .talfix-close:focus { background: #08416f; } /* --- Align the search block and language link with the other menu rows. --- The theme's desktop search form (inline label + a submit icon that drops to its own line, looking like a stray "+") and the language link's inline 1em indent don't fit the drawer. We reuse the rows' existing 20px indent for alignment, and keep every WIDTH fluid (flex / % / box-sizing) so the drawer stays responsive at any width. */ .responsive-menu .search-engine-block { box-sizing: border-box; padding-left: 20px; /* same indent as the other menu rows */ padding-right: 20px; } /* The theme treats the search row (li.main-menu-links-0) like a main menu item and paints decorative border SVGs and an expander "+" handle on it. The search row has no submenu, so suppress all of that — the only control is our magnifier submit button below. */ .responsive-menu .search-engine-block svg, .responsive-menu .search-engine-block .btn, .responsive-menu .search-engine-block [class*="handle"], .responsive-menu .search-engine-block [data-js*="handle"] { display: none !important; } .responsive-menu .search-engine-block .search-form-block { display: flex; align-items: flex-end; /* submit icon lines up with the input, not the label */ width: 100%; } .responsive-menu .search-engine-block .search-form-block-input-wrapper { flex: 1 1 auto; min-width: 0; /* allow the input to shrink instead of overflow */ } .responsive-menu .search-engine-block label { display: block; margin: 0 0 0.35em; padding: 0; } .responsive-menu .search-engine-block .form-item { margin: 0; } .responsive-menu .search-engine-block input[type="text"], .responsive-menu .search-engine-block input:not([type]) { width: 100%; box-sizing: border-box; } /* Submit button: the theme renders it as a bare icon-font glyph that, in the drawer, looks exactly like the menu's "+" expanders. Make it an unmistakable search button — a small blue square with a magnifier drawn as a background SVG (no icon-font dependency). The inner glyph is kept (its click submits) but made invisible so the stray "+" disappears. */ .responsive-menu .search-engine-block .search-form-block-submit { flex: 0 0 auto; margin: 0 0 0 0.5em; width: 2.6em; height: 2.6em; padding: 0; border: 0; cursor: pointer; position: relative; /* sit above any theme decoration in this row */ z-index: 1; overflow: hidden; /* clip anything the theme overflows into this box */ background: #095797 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") center / 1.3em no-repeat; } .responsive-menu .search-engine-block .search-form-block-submit:hover, .responsive-menu .search-engine-block .search-form-block-submit:focus-within { background-color: #08416f; } /* Remove the inner icon-font glyph entirely; the