/* ============================================================ BURGER MENU — ONaCVG (fichier unique unifié) Remplace burger-menu.css + burger-panels.css ============================================================ */ /* ── BURGER BUTTON ───────────────────────────────────────── */ .burger-menu-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 64px; background: white; border: none; border-radius: 0 5px 5px 0; cursor: pointer; padding: 10px; flex-shrink: 0; order: -1; } .burger-icon { display: flex; flex-direction: column; justify-content: space-between; width: 22px; height: 16px; } .burger-icon span { display: block; width: 100%; height: 3px; background-color: #161616; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center; } .burger-menu-btn[aria-expanded="true"] .burger-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger-menu-btn[aria-expanded="true"] .burger-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); } .burger-menu-btn[aria-expanded="true"] .burger-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── OVERLAY ─────────────────────────────────────────────── */ .burger-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 998; opacity: 0; transition: opacity 0.3s ease; } .burger-overlay.is-visible { display: block; } .burger-overlay.is-active { opacity: 1; } /* ── DRAWER ────────────────────────────────────────────────── Approche Drupal : • position: fixed + top: 0 + bottom: 0 (pas height: 100vh) • display: grid → header fixe | zone scrollable | footer fixe • overflow: hidden sur le drawer (le scroll est dans chaque panel) Le drawer et l'overlay sont placés directement dans via le PHP (juste avant ) — PAS dans .header-hero-wrapper. Ça évite tout appendChild() en JS qui provoquerait un scroll-to-top. ──────────────────────────────────────────────────────────── */ .burger-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 460px; max-width: 90vw; background: #ffffff; border-right: 5px solid #e1000f; z-index: 1000; display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; transform: translateX(-100%); visibility: hidden; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s; } /* Barre admin WordPress */ .admin-bar .burger-drawer { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .burger-drawer { top: 46px; } } .burger-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; z-index: 9999; } /* ── HEADER (ligne 1) ────────────────────────────────────── */ .burger-drawer__header { grid-row: 1; padding: 1.75rem 2rem 1.5rem; } .burger-drawer__close { display: flex; align-items: center; gap: 1rem; background: none; border: none; cursor: pointer; padding: 0; color: #1a1a2e; font-family: "Karma", "Georgia", serif; font-size: 1.6rem; font-weight: 400; transition: color 0.2s; } .burger-drawer__close:hover { color: #000091; } .burger-drawer__close svg { width: 22px; height: 22px; flex-shrink: 0; } /* ── PANELS WRAPPER (ligne 2) ────────────────────────────── */ .burger-panels-wrapper { grid-row: 2; position: relative; overflow: hidden; height: 300px; } /* ── PANEL — base ────────────────────────────────────────── */ .burger-panel { position: absolute; inset: 0; overflow-y: auto; /* chaque panel scroll indépendamment */ overflow-x: hidden; background: #ffffff; transform: translateX(100%); visibility: hidden; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s; } /* Panel racine : hors écran à gauche par défaut */ .burger-panel--root { transform: translateX(-100%); } /* Panel actif : centré, visible */ .burger-panel--active { transform: translateX(0); visibility: visible; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } /* Panel masqué : sort vers la gauche */ .burger-panel--hidden { transform: translateX(-100%); visibility: hidden; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s; } /* ── NAVIGATION ──────────────────────────────────────────── */ .burger-drawer__nav { padding: 1rem 0 0; } .burger-nav__list { list-style: none !important; margin: 0 !important; padding: 0 !important; } .burger-nav__item { border-bottom: none !important; } .burger-nav__link { display: flex !important; align-items: center; justify-content: space-between; padding: 0.75rem 2rem !important; color: #1a1a2e !important; text-decoration: none !important; background: none !important; background-image: none !important; box-shadow: none !important; border: none; width: 100%; text-align: left; font-family: "Montserrat", Arial, sans-serif; font-size: 1rem; font-weight: 400; cursor: pointer; transition: color 0.2s; } .burger-nav__link:hover { color: #000091 !important; background: none !important; } .burger-nav__link.is-current { color: #000091 !important; font-weight: 600; } .burger-nav__arrow { flex-shrink: 0; color: #1a1a2e; opacity: 0.65; transition: color 0.2s; } .burger-nav__link:hover .burger-nav__arrow { color: #000091; opacity: 1; } /* Liens dans sous-panels */ .burger-panel .burger-nav__list { padding-top: 0.25rem !important; } .burger-panel .burger-nav__link { font-size: 1rem; font-weight: 400; color: #1a1a2e !important; padding: 0.65rem 2rem !important; } .burger-panel .burger-nav__link:hover { color: #000091 !important; } /* ── BOUTON RETOUR ───────────────────────────────────────── */ .burger-panel__back { display: flex; align-items: center; gap: 0.75rem; background: none !important; border: none; width: 100%; padding: 1.75rem 2rem 1.5rem; font-family: "Karma", "Georgia", serif; font-size: 1.6rem; font-weight: 400; color: #1a1a2e; cursor: pointer; text-align: left; transition: color 0.2s; flex-shrink: 0; line-height: 1.2; } .burger-panel__back:hover { color: #000091; background: none !important; } .burger-panel__back svg { flex-shrink: 0; transform: rotate(180deg); width: 20px; height: 20px; opacity: 0.55; } .burger-panel__title { display: none; } /* "Première visite ?" */ .burger-nav__item--register { display: flex; flex-direction: column; } .burger-nav__register-label { font-family: "Montserrat", Arial, sans-serif; font-size: 0.875rem; color: #888; padding: 0.5rem 2rem 0; display: block; } .burger-nav__link--register { padding-top: 0.25rem !important; } /* ── FOOTER (ligne 3 — toujours ancré en bas) ─────────────── */ .burger-drawer__footer { grid-row: 3; border-top: 1px solid #e5e5e5; background: #fff; min-height: 600px; } .burger-drawer__separator { margin: 0; border: none; border-top: 1px solid #e5e5e5; } .burger-drawer__account { padding: 1.25rem 2rem; } .burger-account__link { display: flex !important; align-items: center; justify-content: space-between; width: 100%; color: #1a1a2e !important; text-decoration: none !important; background: none !important; background-image: none !important; box-shadow: none !important; border: none; font-family: "Montserrat", Arial, sans-serif; font-size: 1rem; font-weight: 400; padding: 0; cursor: pointer; transition: color 0.2s; text-align: left; } .burger-account__link:hover { color: #000091 !important; } .burger-drawer__search { padding: 0 2rem 1.25rem; } .burger-search__group { display: flex; align-items: center; border: 1px solid #c1c1c1; overflow: hidden; background: #fff; } .burger-search__input { flex: 1; border: none; background: transparent; padding: 0.7rem 1rem; font-size: 0.875rem; font-family: "Montserrat", Arial, sans-serif; color: #1a1a2e; outline: none; } .burger-search__input::placeholder { color: #000091; opacity: 1; } .burger-search__btn { background: #132a67; border: none; color: white; padding: 0.7rem 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color 0.2s; } .burger-search__btn:hover { background: #000091; } .burger-drawer__secondary { padding: 0.5rem 2rem 1.5rem; } .burger-secondary__list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; } .burger-secondary__link { display: block; color: #555 !important; text-decoration: none !important; background-image: none !important; box-shadow: none !important; font-family: "Montserrat", Arial, sans-serif; font-size: 0.9rem; font-weight: 400; padding: 0.4rem 0; transition: color 0.2s; } .burger-secondary__link:hover { color: #000091 !important; } /* ── PAS DE body overflow:hidden ─────────────────────────── */ /* La page reste scrollable derrière le drawer (comportement Drupal) */ /* ── ACCESSIBILITÉ ────────────────────────────────────────── */ .burger-menu-btn:focus-visible, .burger-drawer__close:focus-visible, .burger-panel__back:focus-visible, .burger-nav__link:focus-visible, .burger-search__btn:focus-visible { outline: 3px solid #0a76f6; outline-offset: 2px; } /* ── MOBILE PLEIN ÉCRAN ───────────────────────────────────── */ @media (max-width: 1139px) { .burger-drawer { width: 100vw; max-width: 100vw; border-right: none; } }