#header-navigation ul.primary-menu { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap; justify-content: center; -ms-align-items: stretch; align-items: stretch; padding: 0 40px; padding: 0 25px; } #header-navigation ul.primary-menu > li { -webkit-flex: 1 1 auto; -moz-flex: 1 1 auto; -ms-flex: 1 1 auto; -o-flex: 1 1 auto; flex: 1 1 auto; margin: 0; text-align: left; position: relative; display: flex; justify-content: center; align-items: center; } #header-navigation ul.primary-menu > li a, #header-navigation ul.primary-menu > li > span { display: inline-block; display: inline-flex; justify-content: center; align-items: center; text-transform: uppercase; padding: 24px 10px 15px 10px; width: auto; height: 100%; text-decoration: none; text-align: center; font-family: "Lora", serif; font-weight: 500; font-size: 15px; font-size: .9375rem; color: var(--theme-color); letter-spacing: -0.02em; position: relative; -webkit-transition: none; -o-transition: none; transition: none; } @media screen and (max-width:1000px) { #header-navigation ul.primary-menu > li a, #header-navigation ul.primary-menu > li > span { padding-top: 15px; padding-bottom: 12px; width: min-content; } } #header-navigation ul.primary-menu li.current-product_cat-ancestor > a, #header-navigation ul.primary-menu li.current-menu-item > a, #header-navigation ul.primary-menu li.current-menu-parent > a, #header-navigation ul.primary-menu li.current-menu-ancestor > a, #header-navigation ul.primary-menu li.current-page-item > a, #header-navigation ul.primary-menu li.current-page-parent > a, #header-navigation ul.primary-menu li.current-page-ancestor > a, #header-navigation ul.primary-menu li.current-product_cat-ancestor > span, #header-navigation ul.primary-menu li.current-menu-item > span, #header-navigation ul.primary-menu li.current-menu-parent > span, #header-navigation ul.primary-menu li.current-menu-ancestor > span, #header-navigation ul.primary-menu li.current-page-item > span, #header-navigation ul.primary-menu li.current-page-parent > span, #header-navigation ul.primary-menu li.current-page-ancestor > span { font-weight: 700; color: var(--theme-color-light); } #header-navigation ul.primary-menu li a:hover, #header-navigation ul.primary-menu li span:hover, #header-navigation ul.primary-menu li:hover > a, #header-navigation ul.primary-menu li:hover > span { color: var(--theme-color-lighter); } #header-navigation ul.primary-menu > li.current-product_cat-ancestor > a:before, #header-navigation ul.primary-menu > li.current-menu-item > a:before, #header-navigation ul.primary-menu > li.current-menu-parent > a:before, #header-navigation ul.primary-menu > li.current-menu-ancestor > a:before, #header-navigation ul.primary-menu > li.current-page-item > a:before, #header-navigation ul.primary-menu > li.current-page-parent > a:before, #header-navigation ul.primary-menu > li.current-page-ancestor > a:before, #header-navigation ul.primary-menu > li.current-product_cat-ancestor > span:before, #header-navigation ul.primary-menu > li.current-menu-item > span:before, #header-navigation ul.primary-menu > li.current-menu-parent > span:before, #header-navigation ul.primary-menu > li.current-menu-ancestor > span:before, #header-navigation ul.primary-menu > li.current-page-item > span:before, #header-navigation ul.primary-menu > li.current-page-parent > span:before, #header-navigation ul.primary-menu > li.current-page-ancestor > span:before { content: ''; width: 77px; height: 24px; display: block; position: absolute; left: 50%; bottom: -26px; margin-left: -38px; pointer-events: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2277px%22%20height%3D%2224px%22%20viewBox%3D%220%200%20770%20240%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%20xmlns:xlink%3D%22http://www.w3.org/1999/xlink%22%20preserveAspectRatio%3D%22none%22%20xml-space%3D%22preserve%22%3E%3Cpath%20fill%3D%22%235B3514%22%20d%3D%22M71.78%2C0.142c-3.814%2C5.501-7.385%2C11.252-10.595%2C17.341c-15.375%2C29.166-20.853%2C60.211-16.569%2C92.905c2.997%2C22.9%2C10.714%2C44.174%2C23.225%2C63.635c13.667%2C21.266%2C31.479%2C38.063%2C53.974%2C49.587c24.955%2C12.789%2C51.486%2C17.494%2C79.348%2C14.469c21.598-2.334%2C41.604-9.388%2C59.21-22.104c41.25-29.795%2C59.924-69.946%2C52.981-120.975c-3.322-24.418-14.153-45.552-31.767-62.738C263.827%2C14.928%2C243.54%2C4.03%2C220.735%2C0.142h131.703c14.146%2C12.968%2C26.531%2C27.644%2C37.237%2C43.849c9.639%2C14.61%2C18.386%2C29.808%2C27.548%2C44.733c14.55%2C23.703%2C29.66%2C47.023%2C47.493%2C68.438c15.816%2C19.005%2C33.157%2C36.36%2C53.768%2C50.203c31.694%2C21.288%2C66.464%2C31.368%2C104.643%2C29.433c20.08-1.018%2C39.189-5.707%2C57.456-14.197c24.543-11.422%2C44.809-28.063%2C60.315-50.183c21.568-30.771%2C30.941-64.873%2C26.148-102.543c-2.298-18.054-7.872-35.013-16.722-50.838c-3.794-6.788-8.125-13.047-12.858-18.895H71.78z%20M198.689%2C164.268c0%2C0-97.971%2C11.921-74.982-91.654C123.707%2C72.613%2C113.207%2C156.757%2C198.689%2C164.268%20M110.291%2C119.291c4.809%2C16.899%2C14.042%2C31.109%2C28.099%2C41.773c16.687%2C12.665%2C35.574%2C17.871%2C56.383%2C15.103c18.261-2.431%2C33.275-10.949%2C44.6-25.544c8.784-11.327%2C13.46-24.3%2C11.517-38.674c-2.747-20.427-14.823-33.916-33.703-41.22c-8.129-3.151-16.516-3.048-24.439%2C1.221c-5.898%2C3.183-9.255%2C8.276-10.625%2C14.941c4.123%2C0.877%2C7.922%2C1.385%2C11.523%2C2.526c12.017%2C3.778%2C18.092%2C14.52%2C15.139%2C26.383c-3.033%2C12.231-13.777%2C20.089-25.396%2C18.46c-11.656-1.619-21.111-7.318-27.82-16.833c-11.082-15.699-11.244-32.612-3.232-49.542c11.855-25.094%2C39.881-38.893%2C68.355-34.076c24.586%2C4.145%2C42.893%2C17.849%2C55.514%2C39.083c10.427%2C17.563%2C13.026%2C36.848%2C9.808%2C56.804c-3.446%2C21.287-12.953%2C39.777-28.475%2C54.696c-26.037%2C25.035-57.436%2C32.98-92.485%2C27.214c-20.235-3.335-38.15-12.214-53.908-25.389c-17.812-14.881-30.367-33.401-37.782-55.432c-5.736-17.068-7.408-34.566-5.854-52.487c0.973-11.237%2C3.52-22.09%2C7.585-32.502c6.605-16.937%2C16.642-32.593%2C29.196-45.655c0.272-0.279%2C0.544%2C0.281%2C0.802%2C0h76.92c-17.459%2C3.004-33.167%2C10.472-46.28%2C23.026C107.875%2C49.853%2C99.747%2C82.253%2C110.291%2C119.291%20M431.022%2C0.142h14.093c-2.43%2C13.373-18.578%2C124.488%2C98.715%2C201.089C543.83%2C201.231%2C424.057%2C154.843%2C431.022%2C0.142%20M741.842%2C107.016c-3.845%2C25.979-15.14%2C48.275-33.299%2C67.096c-12.164%2C12.605-26.396%2C22.216-42.435%2C29.13c-16.671%2C7.187-34.151%2C10.706-52.26%2C10.551c-14.446-0.124-28.318-3.533-41.735-8.82c-31.973-12.614-58.443-32.826-79.657-59.695c-33.394-42.289-45.767-91.832-37.224-145.135c0.073-0.487%2C0.155%2C0.472%2C0.249%2C0h86.028c-3.659%2C4.993-6.979%2C10.294-9.816%2C16.009c-10.565%2C21.295-14.156%2C43.731-10.948%2C67.346c3.491%2C25.67%2C13.74%2C48.069%2C32.938%2C65.505c25.779%2C23.402%2C55.866%2C30.471%2C89.437%2C20.75c17.944-5.197%2C32.687-15.669%2C44.395-30.094c20.169-24.882%2C25.154-52.508%2C12.694-82.404c-11.171-26.789-38.262-44.578-67.479-41.89c-11.855%2C1.096-22.134%2C5.749-30.521%2C14.262c-8.8%2C8.932-13.02%2C19.971-14.618%2C32.296c-1.928%2C14.815%2C7.646%2C30.219%2C23.719%2C34.358c2.776%2C0.715%2C5.721%2C0.854%2C8.586%2C1.253c0.154-0.311%2C0.311-0.634%2C0.465-0.942c-3.866-5.538-4.007-11.768-3.411-18.041c0.495-5.2%2C1.797-10.265%2C5.892-13.889c11.076-9.808%2C30.559-8.025%2C37.443%2C7.218c5.75%2C12.708%2C5.25%2C25.271-2.061%2C37.082c-9.979%2C16.141-25.161%2C23.63-43.711%2C23.977c-13.864%2C0.257-26.529-4.345-37.347-13.019c-21.502-17.252-29.557-40.235-26.09-67.111c2.784-21.604%2C13.218-39.173%2C29.772-52.664h120.089c13.1%2C10.103%2C23.614%2C23.505%2C31.62%2C39.911C742.901%2C61.289%2C745.279%2C83.785%2C741.842%2C107.016%20M607.075%2C164.761c0%2C0%2C68.097-9.947%2C91.049-83.4C698.124%2C81.361%2C699.656%2C164.761%2C607.075%2C164.761%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; background-position: bottom 24px center; transition: background-position .3s ease-in-out; } body.loaded #header-navigation ul.primary-menu > li.current-product_cat-ancestor > a:before, body.loaded #header-navigation ul.primary-menu > li.current-menu-item > a:before, body.loaded #header-navigation ul.primary-menu > li.current-menu-parent > a:before, body.loaded #header-navigation ul.primary-menu > li.current-menu-ancestor > a:before, body.loaded #header-navigation ul.primary-menu > li.current-page-item > a:before, body.loaded #header-navigation ul.primary-menu > li.current-page-parent > a:before, body.loaded #header-navigation ul.primary-menu > li.current-page-ancestor > a:before, body.loaded #header-navigation ul.primary-menu > li.current-product_cat-ancestor > span:before, body.loaded #header-navigation ul.primary-menu > li.current-menu-item > span:before, body.loaded #header-navigation ul.primary-menu > li.current-menu-parent > span:before, body.loaded #header-navigation ul.primary-menu > li.current-menu-ancestor > span:before, body.loaded #header-navigation ul.primary-menu > li.current-page-item > span:before, body.loaded #header-navigation ul.primary-menu > li.current-page-parent > span:before, body.loaded #header-navigation ul.primary-menu > li.current-page-ancestor > span:before { background-position: top center; } #site-navigation__current-deco { position: absolute; left: 17px; top: 0; width: 4px; height: 7px; background-color: var(--theme-color-secondary); transition: top .4s cubic-bezier(.8,0,.2,1); } #site-navigation .site-navigation__close-button { display: none; } /** * SOUS-MENU */ #site-navigation .sub-menu-block { position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); min-width: 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; pointer-events: none; overflow: hidden; width: 100vw; justify-content: center; -ms-align-items: center; align-items: center; pointer-events: none!important; } #site-navigation .sub-menu-block-inner { -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; -o-flex: 0 0 auto; flex: 0 0 auto; overflow: hidden; position: relative; pointer-events: all; background-color: #000000; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: transform .4s cubic-bezier(.7,0,.3,1), margin-top .4s cubic-bezier(.7,0,.3,1); -o-transition: transform .4s cubic-bezier(.7,0,.3,1), margin-top .4s cubic-bezier(.7,0,.3,1); transition: transform .4s cubic-bezier(.7,0,.3,1), margin-top .4s cubic-bezier(.7,0,.3,1); border-left: 4px solid var(--theme-color-light); border-bottom: 4px solid var(--theme-color-light); border-right: 4px solid var(--theme-color-light); } #site-navigation li:hover > .sub-menu-block .sub-menu-block-inner, #site-navigation li > a:hover ~ .sub-menu-block .sub-menu-block-inner, #site-navigation li > span:hover ~ .sub-menu-block .sub-menu-block-inner { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } #site-navigation li > a:focus-visible ~ .sub-menu-block .sub-menu-block-inner, #site-navigation li > span:focus-visible ~ .sub-menu-block .sub-menu-block-inner, #site-navigation li:focus-within > .sub-menu-block .sub-menu-block-inner { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #site-navigation li:hover > .sub-menu-block .sub-menu-block-inner, #site-navigation li > a:hover ~ .sub-menu-block .sub-menu-block-inner, #site-navigation li > span:hover ~ .sub-menu-block .sub-menu-block-inner { pointer-events: all; } #site-navigation ul.sub-menu { max-width: 450px; position: relative; } #site-navigation ul.sub-menu > li > a, #site-navigation ul.sub-menu > li > span { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; text-transform: uppercase; pointer-events: all; color: #FFFFFF; font-size: 17px; font-size: 1.0625rem; line-height: 1; font-weight: 500; text-decoration: none; height: 100%; position: relative; padding: 16px 18px 14px 18px; text-align: left; -webkit-transition: color .2s ease-in-out; -o-transition: color .2s ease-in-out; transition: color .2s ease-in-out; overflow: hidden; } #site-navigation ul.sub-menu > li:first-child > a, #site-navigation ul.sub-menu > li:first-child > span { padding-top: 20px; } #site-navigation ul.sub-menu > li:last-child > a, #site-navigation ul.sub-menu > li:last-child > span { padding-bottom: 18px; }