/* ================================================================== MENU ALEXANDRA HILVERT Ordinateur : file de liens, points ocre, Contact en terre. Mobile : bouton à trois ronds + panneau fendu (rail + liste). ================================================================== */ /* Ne jamais laisser .ah-anim masquer (écran blanc mobile). */ html.ah-anim { opacity: 1 !important; transform: none !important; } .et_pb_menu .et-menu { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; } /* Pas de flex sur le li : ça cassait le sous-menu Divi (Réalisations → Particuliers / Professionnelles). */ .et_pb_menu .et-menu > li { position: relative; display: block; } .et_pb_menu .et-menu > li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 1.15em; border-radius: 50%; background: var(--ah-terre, #b07030); vertical-align: middle; } .et_pb_menu .et-menu > li > a { color: var(--ah-espresso, #2d1d12) !important; font-weight: 600; } .et_pb_menu .et-menu > li > a:hover, .et_pb_menu .et-menu > .current-menu-item > a, .et_pb_menu .et-menu > .current-menu-ancestor > a, .et_pb_menu .et-menu > li > a[href*="/contact"] { color: var(--ah-terre, #b07030) !important; } .et_pb_section--with-menu, .et_pb_menu, .et_pb_menu .et_pb_row, .et_pb_menu .et-menu { overflow: visible !important; } @media (min-width: 981px) { .et_pb_section--with-menu { z-index: 30; } } .et_pb_menu .et-menu > li > .sub-menu { z-index: 100010 !important; top: 100%; left: 0; } .et_pb_menu .et-menu > li:hover > .sub-menu, .et_pb_menu .et-menu > li:focus-within > .sub-menu { visibility: visible !important; opacity: 1 !important; } /* ---------- Mobile : on retire le menu Divi une fois le bouton AH en place ---------- */ @media (max-width: 980px) { body.ah-menu-pret .et_pb_section--with-menu, body.ah-menu-pret .et_pb_section:has(.et_pb_menu) { height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; pointer-events: none; } body.ah-menu-pret .et_pb_menu .mobile_nav, body.ah-menu-pret .et_pb_menu .et_mobile_nav_menu, body.ah-menu-pret .et_pb_menu .et_pb_menu__menu, body.ah-menu-pret .et_pb_menu__logo, body.ah-menu-pret .et_pb_menu .logo_container { display: none !important; } } .ah-menu-mobile { display: none; } @media (max-width: 980px) { .ah-menu-mobile { display: block; position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; left: auto; z-index: 1000000; pointer-events: none; } .ah-menu-mobile__ouvrir { box-sizing: border-box; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; -webkit-appearance: none; appearance: none; background: var(--ah-terre, #b07030); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; pointer-events: auto; } .ah-menu-mobile__ouvrir span { display: block; width: 5px; height: 5px; border-radius: 50%; background: #fff; } body.ah-menu-ouvert .ah-menu-mobile { visibility: hidden; } } .ah-menu-panneau { display: none; } @media (max-width: 980px) { .ah-menu-panneau { display: block; position: fixed; inset: 0; z-index: 1000001; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 12px; background: rgba(45, 29, 18, 0.28); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility .35s ease; } .ah-menu-panneau.est-ouvert { opacity: 1; visibility: visible; pointer-events: auto; } .ah-menu-panneau__cadre { display: flex; height: 100%; border-radius: 28px; overflow: hidden; background: var(--ah-fond-clair, #f7f2ec); transform: translateY(12px); transition: transform .4s cubic-bezier(.16,.84,.44,1); } .ah-menu-panneau.est-ouvert .ah-menu-panneau__cadre { transform: none; } .ah-menu-panneau__rail { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 72px; flex: none; padding: 22px 0 16px; background: #522202; color: #fff; } .ah-menu-panneau__sigle { width: 36px; color: #fff; } .ah-menu-panneau__sigle svg { display: block; width: 100%; height: auto; fill: currentColor; } .ah-menu-panneau__metier { margin: 0; color: #fff; font-family: MuseoModerno, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } .ah-menu-panneau__fermer { box-sizing: border-box; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; -webkit-appearance: none; appearance: none; background: var(--ah-terre, #b07030); color: #522202; font-size: 22px; line-height: 1; cursor: pointer; } .ah-menu-panneau__corps { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 28px 28px 22px; overflow: auto; } .ah-menu-panneau__liste { list-style: none; margin: 0; padding: 0; } .ah-menu-panneau__liste > li > a { display: block; padding: 16px 0; color: var(--ah-espresso, #2d1d12) !important; font-family: MuseoModerno, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.2; text-decoration: none !important; border-bottom: 1px solid rgba(45, 29, 18, 0.12); } .ah-menu-panneau__liste .current-menu-item > a, .ah-menu-panneau__liste > li > a[href*="/contact"] { color: var(--ah-terre, #b07030) !important; } .ah-menu-panneau__liste > li:last-child > a { border-bottom: 0; } .ah-menu-panneau__liste > li.menu-item-has-children > a { position: relative; padding-right: 28px; } .ah-menu-panneau__liste > li.menu-item-has-children > a::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); } .ah-menu-panneau__liste > li.menu-item-has-children.est-ouvert > a::after { margin-top: -2px; transform: rotate(-135deg); } .ah-menu-panneau__sous { display: none; list-style: none; margin: 0 0 8px; padding: 0 0 8px 4px; } .ah-menu-panneau__liste > li.est-ouvert > .ah-menu-panneau__sous { display: block; } .ah-menu-panneau__sous a { display: block; padding: 8px 0; color: var(--ah-espresso, #2d1d12) !important; font-family: MuseoModerno, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; text-decoration: none !important; border: 0; } .ah-menu-panneau__vague { margin: 28px 0 18px; height: 12px; background-color: var(--ah-terre, #b07030); -webkit-mask-image: var(--ah-sep-motif); mask-image: var(--ah-sep-motif); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: auto 100%; mask-size: auto 100%; } .ah-menu-panneau__coord { margin: 0; color: var(--ah-espresso, #2d1d12); font-family: MuseoModerno, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.55; } .ah-menu-panneau__coord a { color: inherit !important; text-decoration: none !important; } body.ah-menu-ouvert { overflow: hidden; } } @media (prefers-reduced-motion: reduce) { .ah-menu-panneau, .ah-menu-panneau__cadre { transition: none !important; } }