/* ================================================================== 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; } /* Point dans la gouttière entre deux onglets, à hauteur du texte. top: 0.5lh le collait en haut (lh = interligne, pas la hauteur du li). Sur le a, left: 0 le collait à la première lettre au lieu du milieu. */ .et_pb_menu .et-menu > li + li > a::before { content: none !important; } .et_pb_menu .et-menu > li + li::before { content: "" !important; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin: 0; border-radius: 50%; background: var(--ah-terre, #b07030); transform: translate(-50%, -50%); pointer-events: none; } .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; } /* ---------- Perles HAUT + BAS de la barre blanche ---------- Accueil : visibles dès que la barre traverse le hero (pas seulement .et_pb_sticky). Header TB : toujours. */ :root { --ah-perle-masque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64.23 42.72' preserveAspectRatio='none'%3E%3Ccircle cx='32.115' cy='21.36' r='21.36' fill='%23000'/%3E%3Ccircle cx='0' cy='21.36' r='10.56' fill='%23000'/%3E%3Ccircle cx='64.23' cy='21.36' r='10.56' fill='%23000'/%3E%3C/svg%3E"); --ah-filet-hauteur: 4px; } .et_pb_section_0_tb_header, .et_pb_section:has(.menu-exceptionnel):not(.ah-histoire), .et_pb_section.et_pb_sticky_module:has(.menu-exceptionnel), .et_pb_section[class*="et_pb_sticky"]:has(.menu-exceptionnel) { --menu-sep-h: 22px; --menu-sep-couleur: #ffffff; --menu-sep-masque: var(--ah-perle-masque); overflow: visible !important; position: relative; isolation: isolate; } html body #page-container .et_pb_section:has(.menu-exceptionnel):not(.ah-histoire), html body #page-container .et_pb_section--with-menu:has(.menu-exceptionnel), html body .ah-carousel-section.et_pb_section ~ .et_pb_section:has(.menu-exceptionnel):not(.ah-histoire), html body .ah-carousel-section.et_pb_section ~ .et_pb_sticky_module:has(.menu-exceptionnel), html body .et_pb_section_0_tb_header { z-index: 30 !important; } @media (min-width: 981px) { html body #page-container .et_pb_section:has(.menu-exceptionnel):not(.ah-histoire), html body #page-container .et_pb_section.et_pb_sticky_module:has(.menu-exceptionnel), html body #page-container .et_pb_section.et_pb_sticky:has(.menu-exceptionnel), html body #page-container .et_pb_section[class*="et_pb_sticky"]:has(.menu-exceptionnel) { max-height: none !important; height: auto !important; min-height: 0 !important; padding-top: 54px !important; padding-bottom: 54px !important; overflow: visible !important; } html body #page-container .et_pb_section:has(.menu-exceptionnel) > .et_pb_row, html body #page-container .et_pb_section:has(.menu-exceptionnel) .et_pb_column, html body #page-container .et_pb_section:has(.menu-exceptionnel) .et_pb_menu { overflow: visible !important; } html body.page-id-3478 .et_builder_inner_content, html body .et_builder_inner_content.has_et_pb_sticky { overflow: visible !important; } html body.page-id-3478 #page-container .et_pb_section.et_pb_section_1:has(.menu-exceptionnel), html body.page-id-3478 #page-container .et_pb_section.et_pb_section--with-menu:has(.menu-exceptionnel) { padding-top: 16px !important; padding-bottom: 16px !important; min-height: 0 !important; max-height: none !important; height: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; background-color: #ffffff !important; z-index: 50 !important; } html body.page-id-3478 #page-container .et_pb_section.et_pb_section_1.et_pb_sticky:has(.menu-exceptionnel) { top: 0 !important; box-shadow: 0 -22px 0 0 #ffffff, 0 -80px 0 0 #ffffff !important; } html body.admin-bar.page-id-3478 #page-container .et_pb_section.et_pb_section_1.et_pb_sticky:has(.menu-exceptionnel) { top: 32px !important; } /* Siège du logo DÈS le flux — pas seulement au sticky. Sinon Divi mesure un placeholder de ~32 px, puis au collage le menu passe à ~118 px : Histoire saute / le menu « s'envole ». */ html body.page-id-3478 #page-container .et_pb_section_1 .et-menu, html body.page-id-3478 #page-container .et_pb_section--with-menu .et-menu, html body.page-id-3478 #page-container .et_pb_section.et_pb_sticky:has(.menu-exceptionnel) .et-menu, html body.page-id-3478 #page-container .et_pb_section_1.et_pb_sticky .et-menu { padding-top: 56px !important; padding-bottom: 0 !important; } /* Photo sticky derrière les perles : l'éteindre dès le collage. */ html body.page-id-3478:has(.et_pb_section.et_pb_sticky:has(.menu-exceptionnel)) .ah-carousel-section { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 0 !important; } } html body #page-container .et_pb_section:has(.menu-exceptionnel) .et_pb_menu::before, html body #page-container .et_pb_section:has(.menu-exceptionnel) .et_pb_menu::after, html body .et_pb_section_0_tb_header .et_pb_menu::before, html body .et_pb_section_0_tb_header .et_pb_menu::after { content: none !important; background: none !important; -webkit-mask-image: none !important; mask-image: none !important; height: 0 !important; opacity: 0 !important; } html body .et_pb_section_0_tb_header::before, html body .et_pb_section_0_tb_header::after, html body #page-container .et_pb_section:has(.menu-exceptionnel)::before, html body #page-container .et_pb_section:has(.menu-exceptionnel)::after, html body #page-container .et_pb_section.et_pb_sticky_module:has(.menu-exceptionnel)::before, html body #page-container .et_pb_section.et_pb_sticky_module:has(.menu-exceptionnel)::after, html body #page-container .et_pb_section[class*="et_pb_sticky"]:has(.menu-exceptionnel)::before, html body #page-container .et_pb_section[class*="et_pb_sticky"]:has(.menu-exceptionnel)::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; width: auto !important; height: var(--menu-sep-h) !important; transform: none !important; background-color: var(--menu-sep-couleur, #ffffff) !important; background-image: none !important; -webkit-mask-image: var(--ah-perle-masque) !important; mask-image: var(--ah-perle-masque) !important; -webkit-mask-size: calc(var(--menu-sep-h) * 1.5035) 100% !important; mask-size: calc(var(--menu-sep-h) * 1.5035) 100% !important; -webkit-mask-repeat: repeat-x !important; mask-repeat: repeat-x !important; -webkit-mask-position: center center !important; mask-position: center center !important; pointer-events: none !important; z-index: 1 !important; opacity: 1 !important; } html body .et_pb_section_0_tb_header::before, html body #page-container .et_pb_section:has(.menu-exceptionnel):not(.ah-histoire)::before, html body #page-container .et_pb_section.et_pb_sticky_module:has(.menu-exceptionnel)::before, html body #page-container .et_pb_section[class*="et_pb_sticky"]:has(.menu-exceptionnel)::before { height: var(--menu-sep-h, 22px) !important; top: calc(var(--menu-sep-h, 22px) / -2) !important; bottom: auto !important; margin: 0 !important; z-index: 1 !important; opacity: 1 !important; -webkit-mask-size: calc(var(--menu-sep-h, 22px) * 1.5035) 100% !important; mask-size: calc(var(--menu-sep-h, 22px) * 1.5035) 100% !important; } .ah-menu-sep { --h: 22px; position: absolute !important; left: 0 !important; right: 0 !important; top: calc(var(--h) / -2) !important; height: var(--h) !important; background-color: #ffffff !important; -webkit-mask-image: var(--ah-perle-masque) !important; mask-image: var(--ah-perle-masque) !important; -webkit-mask-size: calc(var(--h) * 1.5035) 100% !important; mask-size: calc(var(--h) * 1.5035) 100% !important; -webkit-mask-repeat: repeat-x !important; mask-repeat: repeat-x !important; -webkit-mask-position: center center !important; mask-position: center center !important; pointer-events: none !important; z-index: 1 !important; } html body .et_pb_section_0_tb_header::after, html body #page-container .et_pb_section:has(.menu-exceptionnel)::after, html body #page-container .et_pb_section.et_pb_sticky_module:has(.menu-exceptionnel)::after, html body #page-container .et_pb_section[class*="et_pb_sticky"]:has(.menu-exceptionnel)::after { top: auto !important; bottom: calc(var(--menu-sep-h) / -2) !important; margin: 0 !important; } .et_pb_section_0_tb_header .et_pb_menu, html body #page-container .et_pb_section:has(.menu-exceptionnel) .et_pb_menu { position: relative; z-index: 6; } .et_pb_section_0_tb_header .et_pb_menu__logo-wrap, html body #page-container .et_pb_section:has(.menu-exceptionnel) .et_pb_menu__logo-wrap { position: relative; z-index: 7; 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:not(.ah-hero):not(:has(.ah-sep)), body.ah-menu-pret .et_pb_section:has(.et_pb_menu):not(.ah-hero):not(:has(.ah-sep)) { 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 { /* Le sigle est haut (71 x 128) : 30 px de large suffisent dans la bande. */ width: 30px; color: #fff; } .ah-menu-panneau__sigle svg { display: block; width: 100%; height: auto; fill: currentColor; } /* « alexandra hilvert » debout dans la bande. La boîte garde les dimensions d'après rotation (22 x 190) : sans ça le mot couché déborderait le rail et casserait le space-between. */ .ah-menu-panneau__mot { position: relative; flex: 0 0 auto; width: 22px; height: min(190px, 34vh); color: #fff; } .ah-menu-panneau__mot svg { position: absolute; top: 50%; left: 50%; display: block; width: min(190px, 34vh); max-width: none; /* sinon la règle globale img/svg { max-width:100% } l'écrase à la largeur du rail (22 px) */ height: auto; transform: translate(-50%, -50%) rotate(-90deg); fill: currentColor; } .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: 20px 22px 18px; overflow: auto; } .ah-menu-panneau__liste { list-style: none; margin: 0; padding: 0; } .ah-menu-panneau__liste > li > a { display: block; padding: 11px 0; color: var(--ah-espresso, #2d1d12) !important; font-family: MuseoModerno, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none !important; /* Filet le plus fin que l'écran sache tracer : sur les écrans retina du mobile, .5px donne un vrai cheveu. */ border-bottom: .5px solid rgba(45, 29, 18, 0.16); } .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: 6px 0; color: var(--ah-espresso, #2d1d12) !important; font-family: MuseoModerno, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; text-decoration: none !important; border: 0; } .ah-menu-panneau__vague { margin: 16px 0 12px; height: 7px; background-color: var(--ah-terre, #b07030); -webkit-mask-image: var(--ah-perle-masque); mask-image: var(--ah-perle-masque); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: calc(7px * 1.5035) 100%; mask-size: calc(7px * 1.5035) 100%; -webkit-mask-position: center center; mask-position: center center; } .ah-menu-panneau__coord { margin: 0; color: var(--ah-espresso, #2d1d12); font-family: MuseoModerno, sans-serif; font-size: 12px; 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; } } /* ---------- Filets du site : même perle, ancienne épaisseur ---------- */ .ah-recits__filet, .ah-recits__trait, .ah-ouv__filet, .ah-expertise-parcours__filet, .ah-agence__filet, .ah-agence__signature-filet, .ah-pil__filet, .ah-hist .ah-hist-texte:first-child::after, .ah-projets .et_pb_text::after, .ah-ag-citation.et_pb_text::after, .ah-ag-cles.et_pb_text::before, .ah-avis-zone .ah-zone__city::before, .ah-avis-zone .ah-zone__city::after, #ah-zone-unique .ah-zone__city::before, #ah-zone-unique .ah-zone__city::after, .ah-histoire .motsclés li::after, .ah-agence .projetreussimotsclés li::after, .ah-expertises .ah-exp-ligne::after, .ah-pag-guide__ligne::after { height: var(--ah-filet-hauteur, 4px) !important; -webkit-mask-image: var(--ah-perle-masque) !important; mask-image: var(--ah-perle-masque) !important; -webkit-mask-repeat: repeat-x !important; mask-repeat: repeat-x !important; -webkit-mask-size: calc(var(--ah-filet-hauteur, 4px) * 1.5035) 100% !important; mask-size: calc(var(--ah-filet-hauteur, 4px) * 1.5035) 100% !important; -webkit-mask-position: center center !important; mask-position: center center !important; } .ah-btn__filet i { -webkit-mask-image: var(--ah-perle-masque) !important; mask-image: var(--ah-perle-masque) !important; -webkit-mask-size: calc(10px * 1.5035) 100% !important; mask-size: calc(10px * 1.5035) 100% !important; } .ah-grille--rectiligne .entry-title::before { -webkit-mask-image: var(--ah-perle-masque) !important; mask-image: var(--ah-perle-masque) !important; -webkit-mask-size: calc(7px * 1.5035) 100% !important; mask-size: calc(7px * 1.5035) 100% !important; } .ah-grille--large .entry-title::after { -webkit-mask-image: var(--ah-perle-masque) !important; mask-image: var(--ah-perle-masque) !important; -webkit-mask-size: calc(8px * 1.5035) 100% !important; mask-size: calc(8px * 1.5035) 100% !important; }