/* ============================================================================ InstantLCAi -- socle responsive mobile (charge sur toutes les pages live). Sous 1024px, la barre .menu devient un tiroir lateral. Pour etre ROBUSTE sur iOS Safari (ou un position:fixed imbrique dans un ancetre stylé -- header sticky + backdrop-filter -- se positionne/affiche mal apres un scroll), mobile-nav.js DEPLACE le menu, l'overlay et le bouton en ENFANTS DIRECTS du : leur bloc conteneur est alors le viewport, sans interference. Le menu n'est pas clone : i18n / nav-auth / langue / settings continuent d'agir sur les memes noeuds. DESKTOP (>= 1024px) : aucun effet (JS retire la classe is-drawer et remet le menu dans le header). ============================================================================ */ /* --- Hamburger (injecte dans le body) : cache par defaut (desktop) --- */ .nav-burger { display: none; position: fixed; top: 14px; right: 16px; z-index: 1001; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(30, 136, 229, 0.25); border-radius: 14px; background: rgba(255, 255, 255, 0.94); cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(24, 53, 80, 0.14); } .nav-burger__box { position: relative; width: 22px; height: 16px; display: block; } .nav-burger__bar { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #183550; transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease; } .nav-burger__bar:nth-child(1) { top: 0; } .nav-burger__bar:nth-child(2) { top: 7px; } .nav-burger__bar:nth-child(3) { top: 14px; } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(1) { top: 7px; transform: rotate(45deg); } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(3) { top: 7px; transform: rotate(-45deg); } /* --- Overlay (injecte dans le body) --- */ .mobile-nav-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(24, 53, 80, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } html.mobile-nav-open .mobile-nav-overlay { opacity: 1; visibility: visible; } /* --- Tiroir : le .menu, deplace en enfant direct du body, recoit .is-drawer --- */ .menu.is-drawer { position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(330px, 86vw); display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 6px; margin: 0; padding: 74px 20px calc(24px + env(safe-area-inset-bottom, 0px)); background: #ffffff; border-left: 1px solid rgba(30, 136, 229, 0.18); box-shadow: -24px 0 70px rgba(24, 53, 80, 0.22); overflow-y: auto; -webkit-overflow-scrolling: touch; /* ferme : reste dans le viewport (droite), cache sans debordement */ visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; z-index: 1000; font-size: 16px; } html.mobile-nav-open .menu.is-drawer { visibility: visible; opacity: 1; pointer-events: auto; } /* liens : pleine largeur, cible tactile >= 46px, alignes a gauche */ .menu.is-drawer .menu-link { width: 100%; justify-content: flex-start; min-height: 46px; padding: 12px 16px; font-size: 16px; border-radius: 12px; } .menu.is-drawer .menu-link[data-auth-signin] { justify-content: center; margin-top: 8px; } /* settings-widget (connecte) : deroule en flux, pleine largeur */ .menu.is-drawer .settings-widget { width: 100%; } .menu.is-drawer .settings-widget .settings-toggle { width: 100%; border-radius: 12px; justify-content: flex-start; padding: 0 14px; min-height: 46px; gap: 10px; } .menu.is-drawer .settings-widget .settings-menu { position: static; min-width: 0; width: 100%; margin-top: 8px; box-shadow: none; border-color: rgba(30, 136, 229, 0.14); background: rgba(248, 250, 252, 0.92); } /* selecteur de langue : pleine largeur, le menu s'ouvre EN DESSOUS du toggle (le .lang-dropdown est en inline-flex a l'origine -> le menu s'affichait A COTE). */ .menu.is-drawer .lang-dropdown { width: 100%; display: flex; flex-direction: column; align-items: stretch; } .menu.is-drawer .lang-dropdown__toggle { width: 100%; border-radius: 12px; justify-content: flex-start; padding: 0 12px; min-height: 46px; gap: 10px; } .menu.is-drawer .lang-dropdown__menu { position: static; top: auto; right: auto; grid-template-columns: repeat(4, 44px); justify-content: start; margin-top: 8px; box-shadow: none; background: rgba(248, 250, 252, 0.92); } /* --- Utilitaire tableau scrollable (neutre en desktop) --- */ .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ========================================================================== < 1024px : activer le bouton + garde-fous transverses ========================================================================== */ @media (max-width: 1023.98px) { .nav-burger { display: inline-flex; } /* protege du debordement horizontal SANS creer de conteneur de defilement (clip, pas hidden -> ne casse pas les position:sticky). */ body { overflow-x: clip; background-attachment: scroll !important; /* iOS : fixed est janky */ } /* verrou de scroll quand le tiroir est ouvert */ html.mobile-nav-open, html.mobile-nav-open body { overflow: hidden; } /* garde-fous transverses */ img { max-width: 100%; height: auto; } video, canvas { max-width: 100%; } input, select, textarea { font-size: max(16px, 1em); } }