/** * CSS for mobile menu panel * **/ /** * MENU TOGGLE **/ #masthead #masthead-menu-toggle { position: absolute; left: 0; top: 0; z-index: auto; width: 50%; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: flex-start; -ms-align-items: stretch; align-items: stretch; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #masthead #masthead-menu-toggle #masthead-menu-toggle-button { display: block; -webkit-flex: 0 1 400px; -moz-flex: 0 1 400px; -ms-flex: 0 1 400px; -o-flex: 0 1 400px; flex: 0 1 400px; -webkit-flex: 1 0 100px; -moz-flex: 1 0 100px; -ms-flex: 1 0 100px; -o-flex: 1 0 100px; flex: 1 0 100px; max-width: 400px; margin-left: 0; margin-right: auto; text-align: center; } #masthead #masthead-menu-toggle label { display: block; height: 156px; width: 69px; margin: 0 auto; background-color: #CD445B; /* Contrast color from #F25C75 */ display: block; border-bottom: 7px solid #AB3246; /* Contrast color from #D2475E */ cursor: pointer; text-transform: uppercase; color: #FFFFFF; font-weight: 700; font-size: 17px; line-height: 1; padding-top: 66px; text-align: center; position: relative; z-index: 2; } #masthead #masthead-menu-toggle label > i { display: block; height: 3px; width: 39px; margin: 0 auto 31px auto; background-color: #FFFFFF; border-radius: 999px; position: relative; display: none; } #masthead #masthead-menu-toggle label > i:before, #masthead #masthead-menu-toggle label > i:after { content: ''; display: block; width: 100%; height: 100%; background-color: inherit; border-radius: inherit; position: absolute; left: 0; } #masthead #masthead-menu-toggle label > i:before { top: -9px; } #masthead #masthead-menu-toggle label > i:after { top: 9px; } #masthead #masthead-menu-toggle:after { content: ''; pointer-events: none; opacity: 0; display: block; width: 475px; -webkit-flex: 0 1 475px; -moz-flex: 0 1 475px; -ms-flex: 0 1 475px; -o-flex: 0 1 475px; flex: 0 1 475px; height: 200px; } /** * MENU */ #site-navigation { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99998; pointer-events: none; -webkit-transition: left .7s cubic-bezier(.2,.4,.2,1); -o-transition: left .7s cubic-bezier(.2,.4,.2,1); transition: left .7s cubic-bezier(.2,.4,.2,1); } @media (prefers-reduced-motion: reduce) { #site-navigation { -webkit-transition: none; -o-transition: none; transition: none; } } #site #site-navigation:focus-within { left: 0; /*pointer-events: all;*/ } body.primary-menu-open #site #site-navigation { left: 0; /*pointer-events: all;*/ } #site-navigation #site-navigation-block { position: absolute; left: 0; top: 0; height: 100%; width: calc(100% - 50px); max-width: 350px; z-index: 3; overflow: hidden; background: #FFFFFF; background-image: url('../img/menu-mobile.jpg'), url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22180px%22%20height%3D%22180px%22%20viewBox%3D%220%200%201800%201800%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%23FAEBCF%22%20d%3D%22M507.75%2C1691.949C346.24%2C1428.501%2C331.109%2C1020.6%2C664.806%2C816.021c275.666-169.001%2C569.451-57.986%2C687.662%2C134.835c105.15%2C171.515%2C95.606%2C413.93-109.747%2C539.825c-214.287%2C131.372-372.275-13.631-425.591-100.601c-40.843-66.615-74.142-231.124%2C73.182-321.443c136.158-83.473%2C242.947%2C13.069%2C271.525%2C59.682c25.717%2C41.95%2C48.349%2C151.502-49.863%2C211.712c-90.507%2C55.488-176.298-31.979-180.694-61.799c-1.815-12.322-18.04-12.807-16.062%2C1.346c5.044%2C36.17%2C102.695%2C152.09%2C216.357%2C82.407c108.26-66.371%2C96.97-187.47%2C48.172-267.066c-48.793-79.59-176.584-147.771-326.134-56.087c-149.554%2C91.685-141.078%2C280.838-70.982%2C395.177c96.039%2C156.65%2C306.877%2C227.327%2C493.161%2C113.124c253.289-155.284%2C241.799-444.657%2C126.215-633.192c-89.348-145.739-385.225-385.405-772.497-147.981c-383.969%2C235.396-330.124%2C696.318-182.55%2C937.034c21.436%2C34.965%2C46.624%2C67.333%2C73.734%2C97.006l69.157%2C0.002C560.874%2C1768.896%2C532.972%2C1733.089%2C507.75%2C1691.949z%22%2F%3E%3Cpath%20fill%3D%22%23FAEBCF%22%20d%3D%22M1800.001%2C608.993c-0.78%2C3.744-1.683%2C7.517-2.71%2C11.318c-31.109%2C115.071-132.789%2C116.52-179.499%2C103.892c-35.776-9.672-100.822-55.547-79.434-134.664c19.77-73.121%2C88.04-74.609%2C113.071-67.842c22.524%2C6.09%2C66.009%2C36.499%2C51.75%2C89.243c-13.14%2C48.607-71.206%2C46.381-82.437%2C37.532c-4.64-3.656-10.392%2C1.458-5.096%2C5.693c13.52%2C10.833%2C84.938%2C19.007%2C101.442-42.041c15.717-58.137-27.611-96.221-70.356-107.777c-42.749-11.557-109.018%2C6.552-130.728%2C86.857c-21.714%2C80.32%2C42.807%2C142.786%2C104.212%2C159.386c65.545%2C17.72%2C138.126-5.252%2C179.782-63.574L1800.001%2C608.993z%22%2F%3E%3Cpath%20fill%3D%22%23FAEBCF%22%20d%3D%22M1800.001%2C461.976c-32.527-46.282-83.645-78.373-135.565-92.409c-78.263-21.158-258.336-7.453-314.562%2C200.529c-55.748%2C206.207%2C112.685%2C347.545%2C241.962%2C382.494c77.267%2C20.889%2C161.67%2C5.807%2C208.164-5.791V922.51c-42.28%2C14.22-111.119%2C28.022-190.806%2C6.479c-141.488-38.25-279.417-173.948-230.968-353.158c40.021-148.041%2C177.539-205.415%2C281.093-177.419c67.06%2C18.129%2C125.408%2C69.019%2C140.681%2C137.916L1800.001%2C461.976z%22%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22180px%22%20height%3D%22180px%22%20viewBox%3D%220%200%201800%201800%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%23FAEBCF%22%20d%3D%22M151.651%2C1002.104c42.759-350.332%2C315.6-725.403%2C752.611-670.409c361.017%2C45.431%2C541.532%2C353.847%2C510.235%2C610.258c-27.836%2C228.079-206.288%2C437.78-475.222%2C403.938c-280.631-35.316-317.867-277.355-303.75-393.006c10.809-88.587%2C96.926-259.228%2C289.863-234.949c178.313%2C22.44%2C204.514%2C184.729%2C196.947%2C246.714c-6.809%2C55.785-63.755%2C169.746-192.374%2C153.56c-118.53-14.913-132.627-154.142-115.575-183.905c7.047-12.298-6.883-24.288-15.072-10.239c-20.937%2C35.896-16.368%2C208.982%2C132.485%2C227.715c141.778%2C17.841%2C216.8-98.354%2C229.72-204.2c12.918-105.838-51.647-257.759-247.5-282.404c-195.856-24.648-321.096%2C150.32-339.654%2C302.366c-25.423%2C208.313%2C110.436%2C421.619%2C354.396%2C452.321c331.71%2C41.739%2C524.604-224.88%2C555.203-475.593c23.654-193.803-68.451-618.607-575.628-682.429C405.489%2C198.56%2C126.938%2C648.258%2C90.435%2C968.662C46.692%2C1352.615%2C304.385%2C1583.923%2C317.846%2C1800h234.615C257.501%2C1604.126%2C111.808%2C1328.57%2C151.651%2C1002.104z%22%2F%3E%3Cpath%20fill%3D%22%23FAEBCF%22%20d%3D%22M1235.147%2C1541.391c38.128-141.035%2C173.392-278.522%2C352.027-230.229c147.566%2C39.894%2C204.757%2C176.971%2C176.852%2C280.192c-24.822%2C91.816-111.255%2C167.25-221.188%2C137.529c-114.702-31.009-116.146-132.363-103.559-178.924c9.641-35.661%2C55.369-100.499%2C134.232-79.179c72.887%2C19.705%2C74.37%2C87.758%2C67.624%2C112.709c-6.069%2C22.452-36.382%2C65.798-88.957%2C51.584c-48.452-13.098-46.232-70.978-37.412-82.172c3.645-4.625-1.454-10.358-5.675-5.079c-10.798%2C13.476-18.946%2C84.666%2C41.906%2C101.117c57.95%2C15.666%2C95.912-27.522%2C107.432-70.132c11.52-42.611-6.531-108.668-86.578-130.309c-80.063-21.645-142.329%2C42.669-158.877%2C103.878c-22.67%2C83.858%2C21.479%2C179.271%2C121.191%2C206.228c135.6%2C36.659%2C231.328-61.224%2C258.613-162.151c21.09-78.012%2C7.43-257.508-199.887-313.554c-205.547-55.569-346.432%2C112.324-381.269%2C241.188c-21.991%2C81.346-5.153%2C167.112%2C40.05%2C275.912h27.447C1263.651%2C1760.419%2C1210.907%2C1631.059%2C1235.147%2C1541.391z%22%2F%3E%3Cpath%20fill%3D%22%23FAEBCF%22%20d%3D%22M236.276%2C1110.851c0%2C185.04%2C146.635%2C522.824%2C349.232%2C689.149h66.197C346.252%2C1605.745%2C248.911%2C1218.623%2C236.276%2C1110.851z%22%2F%3E%3Cpath%20fill%3D%22%23FAEBCF%22%20d%3D%22M671.818%2C1632.803c28.803%2C83.599%2C78.554%2C122.199%2C141.69%2C167.197h66.197C786.382%2C1756.748%2C707.604%2C1694.777%2C671.818%2C1632.803z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: 100% auto, 40% auto, 40% auto; background-position: top center, bottom right, bottom left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: transform .7s cubic-bezier(.2,.4,.2,1); -o-transition: transform .7s cubic-bezier(.2,.4,.2,1); transition: transform .7s cubic-bezier(.2,.4,.2,1); display: block; overflow: visible; } @media (prefers-reduced-motion: reduce) { #site-navigation #site-navigation-block { -webkit-transition: none; -o-transition: none; transition: none; } } /* #site-navigation #site-navigation-block:after { content: ''; display: block; width: 100%; padding-left: 29vh; height: 100%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; right: 0; top: 0; z-index: 1; background-color: #9A1B1B; opacity: .56; /* WCAG 3:1 contrast on brightest pixels * opacity: .74; /* WCAG 4.5:1 contrast on brightest pixels * -webkit-transform-origin: right center; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; -webkit-transform: skewX(-16deg); -ms-transform: skewX(-16deg); -o-transform: skewX(-16deg); transform: skewX(-16deg); }*/ #site #site-navigation:focus-within #site-navigation-block { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } body.primary-menu-open #site #site-navigation #site-navigation-block { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } #site-navigation #site-navigation-close { width: 100%; height: 100%; display: block; position: relative; cursor: pointer; z-index: 1; opacity: 0; border: none; text-indent: -9999px; padding: 0; -webkit-transition: opacity .7s cubic-bezier(.2,.4,.2,1); -o-transition: opacity .7s cubic-bezier(.2,.4,.2,1); transition: opacity .7s cubic-bezier(.2,.4,.2,1); background: #000000; } @media (prefers-reduced-motion: reduce) { #site-navigation #site-navigation-close { -webkit-transition: none; -o-transition: none; transition: none; } } #site #site-navigation:focus-within #site-navigation-close { opacity: .7; pointer-events: all; } body.primary-menu-open #site #site-navigation #site-navigation-close { opacity: .7; pointer-events: all; } #site-navigation #site-navigation-close:before, #site-navigation #site-navigation-close:after { display: none; } #site-navigation #site-navigation-block-outer { width: auto; height: 100%; overflow: hidden; position: relative; pointer-events: all; z-index: 2; } #site-navigation #site-navigation-block-wrapper { width: 100%; height: 100%; overflow: visible; } #site-navigation #site-navigation-block-inner { position: relative; width: 100%; height: 100%; max-height: 100vh; left: 0; z-index: 2; -webkit-transition: left .7s cubic-bezier(.7,0,.3,1); -o-transition: left .7s cubic-bezier(.7,0,.3,1); transition: left .7s cubic-bezier(.7,0,.3,1); } @media (prefers-reduced-motion: reduce) { #site-navigation #site-navigation-block-inner { -webkit-transition: none; -o-transition: none; transition: none; } } #site-navigation.depth-0-open #site-navigation-block-inner { left: -100%; } #site-navigation.depth-1-open #site-navigation-block-inner { left: -200%; } #site-navigation.depth-2-open #site-navigation-block-inner { left: -300%; } #site-navigation.depth-3-open #site-navigation-block-inner { left: -400%; } #site-navigation.depth-4-open #site-navigation-block-inner { left: -500%; } #site-navigation.depth-5-open #site-navigation-block-inner { left: -600%; } #site-navigation.depth-6-open #site-navigation-block-inner { left: -700%; } #site-navigation.depth-7-open #site-navigation-block-inner { left: -800%; } #site-navigation.depth-8-open #site-navigation-block-inner { left: -900%; } #site-navigation #site-navigation-menu { display: table-cell; vertical-align: middle; width: 100%; height: 100%; margin: 0; padding: 0; position: static; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow: auto; overflow-x: hidden; -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; -o-flex: 0 1 auto; flex: 0 1 auto; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: flex-start; -ms-align-items: stretch; align-items: stretch; } #site-navigation #site-navigation-menu:before { content: ''; display: block; -webkit-flex: 1 1 50%; -moz-flex: 1 1 50%; -ms-flex: 1 1 50%; -o-flex: 1 1 50%; flex: 1 1 50%; min-height: 120px; } #site-navigation #site-navigation-menu:after { content: ''; display: block; -webkit-flex: 1 1 50%; -moz-flex: 1 1 50%; -ms-flex: 1 1 50%; -o-flex: 1 1 50%; flex: 1 1 50%; min-height: 50px; } #site-navigation ul > li { list-style-type: none; display: table; width: 100%; line-height: 0; 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; justify-content: flex-start; -ms-align-items: center; align-items: center; -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; -o-flex: 0 0 auto; flex: 0 0 auto; } /* Ecrart de padding entre item : 13.763778516423px * #site-navigation ul > li:nth-child(1):nth-last-child(1) { padding-right: 73px; } #site-navigation ul > li:nth-child(1):nth-last-child(2) { padding-right: 67px; } #site-navigation ul > li:nth-child(2):nth-last-child(1) { padding-right: 81px; } #site-navigation ul > li:nth-child(1):nth-last-child(3) { padding-right: 67px; } #site-navigation ul > li:nth-child(2):nth-last-child(2) { padding-right: 81px; } #site-navigation ul > li:nth-child(3):nth-last-child(1) { padding-right: 94px; } #site-navigation ul > li:nth-child(1):nth-last-child(4) { padding-right: 58px; } #site-navigation ul > li:nth-child(2):nth-last-child(3) { padding-right: 72px; } #site-navigation ul > li:nth-child(3):nth-last-child(2) { padding-right: 85px; } #site-navigation ul > li:nth-child(4):nth-last-child(1) { padding-right: 99px; } #site-navigation ul > li:nth-child(1):nth-last-child(5) { padding-right: 53px; } #site-navigation ul > li:nth-child(2):nth-last-child(4) { padding-right: 67px; } #site-navigation ul > li:nth-child(3):nth-last-child(3) { padding-right: 80px; } #site-navigation ul > li:nth-child(4):nth-last-child(2) { padding-right: 94px; } #site-navigation ul > li:nth-child(5):nth-last-child(1) { padding-right: 108px; } #site-navigation ul > li:nth-child(1):nth-last-child(6) { padding-right: 49px; } #site-navigation ul > li:nth-child(2):nth-last-child(5) { padding-right: 63px; } #site-navigation ul > li:nth-child(3):nth-last-child(4) { padding-right: 76px; } #site-navigation ul > li:nth-child(4):nth-last-child(3) { padding-right: 90px; } #site-navigation ul > li:nth-child(5):nth-last-child(2) { padding-right: 104px; } #site-navigation ul > li:nth-child(6):nth-last-child(1) { padding-right: 118px; } #site-navigation ul > li:nth-child(1):nth-last-child(7) { padding-right: 44px; } #site-navigation ul > li:nth-child(2):nth-last-child(6) { padding-right: 58px; } #site-navigation ul > li:nth-child(3):nth-last-child(5) { padding-right: 71px; } #site-navigation ul > li:nth-child(4):nth-last-child(4) { padding-right: 85px; } #site-navigation ul > li:nth-child(5):nth-last-child(3) { padding-right: 99px; } #site-navigation ul > li:nth-child(6):nth-last-child(2) { padding-right: 113px; } #site-navigation ul > li:nth-child(7):nth-last-child(1) { padding-right: 126px; } #site-navigation ul > li:nth-child(1):nth-last-child(8) { padding-right: 39px; } #site-navigation ul > li:nth-child(2):nth-last-child(7) { padding-right: 53px; } #site-navigation ul > li:nth-child(3):nth-last-child(6) { padding-right: 66px; } #site-navigation ul > li:nth-child(4):nth-last-child(5) { padding-right: 80px; } #site-navigation ul > li:nth-child(5):nth-last-child(4) { padding-right: 94px; } #site-navigation ul > li:nth-child(6):nth-last-child(3) { padding-right: 108px; } #site-navigation ul > li:nth-child(7):nth-last-child(2) { padding-right: 121px; } #site-navigation ul > li:nth-child(8):nth-last-child(1) { padding-right: 135px; } #site-navigation ul > li:nth-child(1):nth-last-child(9) { padding-right: 35px; } #site-navigation ul > li:nth-child(2):nth-last-child(8) { padding-right: 49px; } #site-navigation ul > li:nth-child(3):nth-last-child(7) { padding-right: 62px; } #site-navigation ul > li:nth-child(4):nth-last-child(6) { padding-right: 76px; } #site-navigation ul > li:nth-child(5):nth-last-child(5) { padding-right: 90px; } #site-navigation ul > li:nth-child(6):nth-last-child(4) { padding-right: 104px; } #site-navigation ul > li:nth-child(7):nth-last-child(3) { padding-right: 117px; } #site-navigation ul > li:nth-child(8):nth-last-child(2) { padding-right: 131px; } #site-navigation ul > li:nth-child(9):nth-last-child(1) { padding-right: 145px; } #site-navigation ul > li:nth-child(1):nth-last-child(10) { padding-right: 30px; } #site-navigation ul > li:nth-child(2):nth-last-child(9) { padding-right: 44px; } #site-navigation ul > li:nth-child(3):nth-last-child(8) { padding-right: 57px; } #site-navigation ul > li:nth-child(4):nth-last-child(7) { padding-right: 71px; } #site-navigation ul > li:nth-child(5):nth-last-child(6) { padding-right: 85px; } #site-navigation ul > li:nth-child(6):nth-last-child(5) { padding-right: 99px; } #site-navigation ul > li:nth-child(7):nth-last-child(4) { padding-right: 112px; } #site-navigation ul > li:nth-child(8):nth-last-child(3) { padding-right: 126px; } #site-navigation ul > li:nth-child(9):nth-last-child(2) { padding-right: 140px; } #site-navigation ul > li:nth-child(10):nth-last-child(1) { padding-right: 154px; } #site-navigation ul > li:nth-child(1):nth-last-child(11) { padding-right: 25px; } #site-navigation ul > li:nth-child(2):nth-last-child(10) { padding-right: 39px; } #site-navigation ul > li:nth-child(3):nth-last-child(9) { padding-right: 52px; } #site-navigation ul > li:nth-child(4):nth-last-child(8) { padding-right: 67px; } #site-navigation ul > li:nth-child(5):nth-last-child(7) { padding-right: 80px; } #site-navigation ul > li:nth-child(6):nth-last-child(6) { padding-right: 94px; } #site-navigation ul > li:nth-child(7):nth-last-child(5) { padding-right: 107px; } #site-navigation ul > li:nth-child(8):nth-last-child(4) { padding-right: 121px; } #site-navigation ul > li:nth-child(9):nth-last-child(3) { padding-right: 135px; } #site-navigation ul > li:nth-child(10):nth-last-child(2) { padding-right: 149px; } #site-navigation ul > li:nth-child(11):nth-last-child(1) { padding-right: 163px; } #site-navigation ul > li:nth-child(1):nth-last-child(12) { padding-right: 20px; } #site-navigation ul > li:nth-child(2):nth-last-child(11) { padding-right: 34px; } #site-navigation ul > li:nth-child(3):nth-last-child(10) { padding-right: 47px; } #site-navigation ul > li:nth-child(4):nth-last-child(9) { padding-right: 61px; } #site-navigation ul > li:nth-child(5):nth-last-child(8) { padding-right: 75px; } #site-navigation ul > li:nth-child(6):nth-last-child(7) { padding-right: 89px; } #site-navigation ul > li:nth-child(7):nth-last-child(6) { padding-right: 102px; } #site-navigation ul > li:nth-child(8):nth-last-child(5) { padding-right: 116px; } #site-navigation ul > li:nth-child(9):nth-last-child(4) { padding-right: 130px; } #site-navigation ul > li:nth-child(10):nth-last-child(3) { padding-right: 144px; } #site-navigation ul > li:nth-child(11):nth-last-child(2) { padding-right: 158px; } #site-navigation ul > li:nth-child(12):nth-last-child(1) { padding-right: 171px; } #site-navigation ul > li:nth-child(1):nth-last-child(13) { padding-right: 15px; } #site-navigation ul > li:nth-child(2):nth-last-child(12) { padding-right: 29px; } #site-navigation ul > li:nth-child(3):nth-last-child(11) { padding-right: 42px; } #site-navigation ul > li:nth-child(4):nth-last-child(10) { padding-right: 56px; } #site-navigation ul > li:nth-child(5):nth-last-child(9) { padding-right: 70px; } #site-navigation ul > li:nth-child(6):nth-last-child(8) { padding-right: 84px; } #site-navigation ul > li:nth-child(7):nth-last-child(7) { padding-right: 97px; } #site-navigation ul > li:nth-child(8):nth-last-child(6) { padding-right: 111px; } #site-navigation ul > li:nth-child(9):nth-last-child(5) { padding-right: 125px; } #site-navigation ul > li:nth-child(10):nth-last-child(4) { padding-right: 139px; } #site-navigation ul > li:nth-child(11):nth-last-child(3) { padding-right: 153px; } #site-navigation ul > li:nth-child(12):nth-last-child(2) { padding-right: 166px; } #site-navigation ul > li:nth-child(13):nth-last-child(1) { padding-right: 180px; } #site-navigation ul > li:nth-child(1):nth-last-child(14) { padding-right: 11px; } #site-navigation ul > li:nth-child(2):nth-last-child(13) { padding-right: 25px; } #site-navigation ul > li:nth-child(3):nth-last-child(12) { padding-right: 38px; } #site-navigation ul > li:nth-child(4):nth-last-child(11) { padding-right: 52px; } #site-navigation ul > li:nth-child(5):nth-last-child(10) { padding-right: 66px; } #site-navigation ul > li:nth-child(6):nth-last-child(9) { padding-right: 80px; } #site-navigation ul > li:nth-child(7):nth-last-child(8) { padding-right: 93px; } #site-navigation ul > li:nth-child(8):nth-last-child(7) { padding-right: 107px; } #site-navigation ul > li:nth-child(9):nth-last-child(6) { padding-right: 121px; } #site-navigation ul > li:nth-child(10):nth-last-child(5) { padding-right: 135px; } #site-navigation ul > li:nth-child(11):nth-last-child(4) { padding-right: 149px; } #site-navigation ul > li:nth-child(12):nth-last-child(3) { padding-right: 162px; } #site-navigation ul > li:nth-child(13):nth-last-child(2) { padding-right: 176px; } #site-navigation ul > li:nth-child(14):nth-last-child(1) { padding-right: 190px; } #site-navigation ul > li:nth-child(1):nth-last-child(15) { padding-right: 8px; } #site-navigation ul > li:nth-child(2):nth-last-child(14) { padding-right: 22px; } #site-navigation ul > li:nth-child(3):nth-last-child(13) { padding-right: 35px; } #site-navigation ul > li:nth-child(4):nth-last-child(12) { padding-right: 49px; } #site-navigation ul > li:nth-child(5):nth-last-child(11) { padding-right: 63px; } #site-navigation ul > li:nth-child(6):nth-last-child(10) { padding-right: 77px; } #site-navigation ul > li:nth-child(7):nth-last-child(9) { padding-right: 90px; } #site-navigation ul > li:nth-child(8):nth-last-child(8) { padding-right: 104px; } #site-navigation ul > li:nth-child(9):nth-last-child(7) { padding-right: 118px; } #site-navigation ul > li:nth-child(10):nth-last-child(6) { padding-right: 132px; } #site-navigation ul > li:nth-child(11):nth-last-child(5) { padding-right: 146px; } #site-navigation ul > li:nth-child(12):nth-last-child(4) { padding-right: 159px; } #site-navigation ul > li:nth-child(13):nth-last-child(3) { padding-right: 173px; } #site-navigation ul > li:nth-child(14):nth-last-child(2) { padding-right: 187px; } #site-navigation ul > li:nth-child(15):nth-last-child(1) { padding-right: 201px; } #site-navigation ul.primary-menu > li:last-child:nth-child(n+3) { margin-top: 48px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(3) { padding-right: 64px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(2) { padding-right: 77px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(1) { padding-right: 91px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(4) { padding-right: 55px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(3) { padding-right: 68px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(2) { padding-right: 82px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(1) { padding-right: 96px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(5) { padding-right: 50px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(4) { padding-right: 63px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(3) { padding-right: 77px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(2) { padding-right: 91px; } #site-navigation ul.primary-menu > li:nth-child(5):nth-last-child(1) { padding-right: 104px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(6) { padding-right: 46px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(5) { padding-right: 59px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(4) { padding-right: 73px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(3) { padding-right: 87px; } #site-navigation ul.primary-menu > li:nth-child(5):nth-last-child(2) { padding-right: 101px; } #site-navigation ul.primary-menu > li:nth-child(6):nth-last-child(1) { padding-right: 113px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(7) { padding-right: 41px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(6) { padding-right: 54px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(5) { padding-right: 68px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(4) { padding-right: 82px; } #site-navigation ul.primary-menu > li:nth-child(5):nth-last-child(3) { padding-right: 96px; } #site-navigation ul.primary-menu > li:nth-child(6):nth-last-child(2) { padding-right: 109px; } #site-navigation ul.primary-menu > li:nth-child(7):nth-last-child(1) { padding-right: 137px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(8) { padding-right: 36px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(7) { padding-right: 49px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(6) { padding-right: 63px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(5) { padding-right: 77px; } #site-navigation ul.primary-menu > li:nth-child(5):nth-last-child(4) { padding-right: 91px; } #site-navigation ul.primary-menu > li:nth-child(6):nth-last-child(3) { padding-right: 104px; } #site-navigation ul.primary-menu > li:nth-child(7):nth-last-child(2) { padding-right: 118px; } #site-navigation ul.primary-menu > li:nth-child(8):nth-last-child(1) { padding-right: 146px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(9) { padding-right: 32px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(8) { padding-right: 45px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(7) { padding-right: 59px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(6) { padding-right: 73px; } #site-navigation ul.primary-menu > li:nth-child(5):nth-last-child(5) { padding-right: 87px; } #site-navigation ul.primary-menu > li:nth-child(6):nth-last-child(4) { padding-right: 100px; } #site-navigation ul.primary-menu > li:nth-child(7):nth-last-child(3) { padding-right: 114px; } #site-navigation ul.primary-menu > li:nth-child(8):nth-last-child(2) { padding-right: 128px; } #site-navigation ul.primary-menu > li:nth-child(9):nth-last-child(1) { padding-right: 154px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(10) { padding-right: 27px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(9) { padding-right: 40px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(8) { padding-right: 54px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(7) { padding-right: 68px; } #site-navigation ul.primary-menu > li:nth-child(5):nth-last-child(6) { padding-right: 82px; } #site-navigation ul.primary-menu > li:nth-child(6):nth-last-child(5) { padding-right: 95px; } #site-navigation ul.primary-menu > li:nth-child(7):nth-last-child(4) { padding-right: 109px; } #site-navigation ul.primary-menu > li:nth-child(8):nth-last-child(3) { padding-right: 123px; } #site-navigation ul.primary-menu > li:nth-child(9):nth-last-child(2) { padding-right: 137px; } #site-navigation ul.primary-menu > li:nth-child(10):nth-last-child(1) { padding-right: 163px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(11) { padding-right: 22px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(10) { padding-right: 35px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(9) { padding-right: 49px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(8) { padding-right: 63px; } #site-navigation ul.primary-menu > li:nth-child(5):nth-last-child(7) { padding-right: 77px; } #site-navigation ul.primary-menu > li:nth-child(6):nth-last-child(6) { padding-right: 90px; } #site-navigation ul.primary-menu > li:nth-child(7):nth-last-child(5) { padding-right: 104px; } #site-navigation ul.primary-menu > li:nth-child(8):nth-last-child(4) { padding-right: 118px; } #site-navigation ul.primary-menu > li:nth-child(9):nth-last-child(3) { padding-right: 132px; } #site-navigation ul.primary-menu > li:nth-child(10):nth-last-child(2) { padding-right: 146px; } #site-navigation ul.primary-menu > li:nth-child(11):nth-last-child(1) { padding-right: 173px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(12) { padding-right: 17px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(11) { padding-right: 30px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(10) { padding-right: 44px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(9) { padding-right: 58px; } #site-navigation ul.primary-menu > li:nth-child(5):nth-last-child(8) { padding-right: 72px; } #site-navigation ul.primary-menu > li:nth-child(6):nth-last-child(7) { padding-right: 85px; } #site-navigation ul.primary-menu > li:nth-child(7):nth-last-child(6) { padding-right: 99px; } #site-navigation ul.primary-menu > li:nth-child(8):nth-last-child(5) { padding-right: 113px; } #site-navigation ul.primary-menu > li:nth-child(9):nth-last-child(4) { padding-right: 127px; } #site-navigation ul.primary-menu > li:nth-child(10):nth-last-child(3) { padding-right: 141px; } #site-navigation ul.primary-menu > li:nth-child(11):nth-last-child(2) { padding-right: 154px; } #site-navigation ul.primary-menu > li:nth-child(12):nth-last-child(1) { padding-right: 182px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(13) { padding-right: 12px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(12) { padding-right: 25px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(11) { padding-right: 39px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(10) { padding-right: 53px; } #site-navigation ul.primary-menu > li:nth-child(5):nth-last-child(9) { padding-right: 66px; } #site-navigation ul.primary-menu > li:nth-child(6):nth-last-child(8) { padding-right: 80px; } #site-navigation ul.primary-menu > li:nth-child(7):nth-last-child(7) { padding-right: 94px; } #site-navigation ul.primary-menu > li:nth-child(8):nth-last-child(6) { padding-right: 108px; } #site-navigation ul.primary-menu > li:nth-child(9):nth-last-child(5) { padding-right: 122px; } #site-navigation ul.primary-menu > li:nth-child(10):nth-last-child(4) { padding-right: 136px; } #site-navigation ul.primary-menu > li:nth-child(11):nth-last-child(3) { padding-right: 149px; } #site-navigation ul.primary-menu > li:nth-child(12):nth-last-child(2) { padding-right: 163px; } #site-navigation ul.primary-menu > li:nth-child(13):nth-last-child(1) { padding-right: 191px; } #site-navigation ul.primary-menu > li:nth-child(1):nth-last-child(14) { padding-right: 8px; } #site-navigation ul.primary-menu > li:nth-child(2):nth-last-child(13) { padding-right: 21px; } #site-navigation ul.primary-menu > li:nth-child(3):nth-last-child(12) { padding-right: 35px; } #site-navigation ul.primary-menu > li:nth-child(4):nth-last-child(11) { padding-right: 49px; } #site-navigation ul.primary-menu > li:nth-child(5):nth-last-child(10) { padding-right: 63px; } #site-navigation ul.primary-menu > li:nth-child(6):nth-last-child(9) { padding-right: 76px; } #site-navigation ul.primary-menu > li:nth-child(7):nth-last-child(8) { padding-right: 90px; } #site-navigation ul.primary-menu > li:nth-child(8):nth-last-child(7) { padding-right: 104px; } #site-navigation ul.primary-menu > li:nth-child(9):nth-last-child(6) { padding-right: 118px; } #site-navigation ul.primary-menu > li:nth-child(10):nth-last-child(5) { padding-right: 132px; } #site-navigation ul.primary-menu > li:nth-child(11):nth-last-child(4) { padding-right: 145px; } #site-navigation ul.primary-menu > li:nth-child(12):nth-last-child(3) { padding-right: 159px; } #site-navigation ul.primary-menu > li:nth-child(13):nth-last-child(2) { padding-right: 173px; } #site-navigation ul.primary-menu > li:nth-child(14):nth-last-child(1) { padding-right: 202px; } */ html #header-navigation #site-navigation li.back-item > .site-navigation__submenu-label, html #header-navigation #site-navigation a, html #header-navigation #site-navigation li > span, html #header-navigation #site-navigation li > .site-navigation__submenu-label > span.label-aria-focus { text-decoration: none; display: block; position: relative; pointer-events: all; text-align: left; display: table-cell; z-index: 1; text-transform: uppercase; line-height: 0; font-weight: 400; font-size: 15px; font-size: 1.0714rem; letter-spacing: 0.01em; color: var(--theme-color); padding: 19px 10px 19px 30px; width: 100%; flex-basis: 100%; text-align: left; outline: 0; -webkit-flex: 1 1 100%; -moz-flex: 1 1 100%; -ms-flex: 1 1 100%; -o-flex: 1 1 100%; flex: 1 1 100%; } #site-navigation li.back-item > .site-navigation__submenu-label { aspect-ratio: auto; } #site-navigation li > .site-navigation__submenu-label > span.label-aria-focus { color: transparent; white-space: nowrap; position: absolute; } #site-navigation li.back-item > .site-navigation__submenu-label > span.label-aria-focus { padding: 0; width: 0; display: inline-block; outline: 0 !important; } #site-navigation .site-navigation__submenu-label:focus-visible > span.label-aria-focus span, #site-navigation li.back-item > .site-navigation__submenu-label:focus-visible > span.back-item-label, #site-navigation a:focus-visible span { outline: 2px dotted #FFF; outline-offset: 4px; } #site-navigation a[href="#"], #site-navigation a[href="#"] > span, #site-navigation li > span, #site-navigation li > span > span { pointer-events: none; } #site-navigation li.back-item > .site-navigation__submenu-label > span.back-item-label, #site-navigation a > span, #site-navigation li > span > span { position: relative; display: inline-block; color: inherit; } #site-navigation li.back-item > .site-navigation__submenu-label > span.back-item-label, #site-navigation a > span, #site-navigation li > span > span, #site-navigation li > .site-navigation__submenu-label > span.label-aria-focus span { line-height: 1; display: inline-block; } #site-navigation li.menu-item-has-children > span > span { padding-left: 10px; } #site-navigation li.menu-item-has-children > span > span:after { content: ''; display: inline-block; vertical-align: middle; border: 6px solid transparent; border-left-color: currentColor; border-left-width: 8px; margin-left: 12px; margin-top: -8px; margin-bottom: -4px; opacity: 0.85; } #site-navigation li.back-item > .site-navigation__submenu-label > span.back-item-label { white-space: nowrap; } /* #site-navigation li.back-item > .site-navigation__submenu-label > span.back-item-label:after, #site-navigation a > span:before, #site-navigation li > span > span:before { content: ''; display: block; position: absolute; left: -33px; top: 50%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 4px; height: 0; padding: 0; background-color: #E20028; } #site-navigation li.back-item > label:hover > span:after, #site-navigation li.back-item > label:focus > span:after, #site-navigation a:hover > span:before, #site-navigation a:focus > span:before, #site-navigation li:hover > a[href="#"] > span:before, #site-navigation li:focus > a[href="#"] > span:before { width: 100%; } #site-navigation li:focus-within > a[href="#"] > span:before { width: 100%; } */ html #header-navigation #site-navigation li.current-product_cat-ancestor > a, html #header-navigation #site-navigation li.current-menu-item > a, html #header-navigation #site-navigation li.current-menu-parent > a, html #header-navigation #site-navigation li.current-menu-ancestor > a, html #header-navigation #site-navigation li.current-page-item > a, html #header-navigation #site-navigation li.current-page-parent > a, html #header-navigation #site-navigation li.current-page-ancestor > a, html #header-navigation #site-navigation li.current-product_cat-ancestor > span, html #header-navigation #site-navigation li.current-menu-item > span, html #header-navigation #site-navigation li.current-menu-parent > span, html #header-navigation #site-navigation li.current-menu-ancestor > span, html #header-navigation #site-navigation li.current-page-item > span, html #header-navigation #site-navigation li.current-page-parent > span, html #header-navigation #site-navigation li.current-page-ancestor > span { color: var(--theme-color-light); font-weight: 700; } html #header-navigation #site-navigation li.current-product_cat-ancestor > a > span:before, html #header-navigation #site-navigation li.current-menu-item > a > span:before, html #header-navigation #site-navigation li.current-menu-parent > a > span:before, html #header-navigation #site-navigation li.current-menu-ancestor > a > span:before, html #header-navigation #site-navigation li.current-page-item > a > span:before, html #header-navigation #site-navigation li.current-page-parent > a > span:before, html #header-navigation #site-navigation li.current-page-ancestor > a > span:before, html #header-navigation #site-navigation li.current-product_cat-ancestor > span > span:before, html #header-navigation #site-navigation li.current-menu-item > span > span:before, html #header-navigation #site-navigation li.current-menu-parent > span > span:before, html #header-navigation #site-navigation li.current-menu-ancestor > span > span:before, html #header-navigation #site-navigation li.current-page-item > span > span:before, html #header-navigation #site-navigation li.current-page-parent > span > span:before, html #header-navigation #site-navigation li.current-page-ancestor > span > span:before { height: 100%; padding-top: 10px; padding-bottom: 8px; top: -10px; } #site-navigation li.back-item > .site-navigation__submenu-label > span.back-item-label:before { content: ''; display: inline-block; vertical-align: middle; border: 6px solid transparent; border-right-color: currentColor; border-right-width: 8px; margin-right: 12px; margin-top: -8px; margin-bottom: -4px; opacity: 0.85; } /* #site-navigation li.back-item > .site-navigation__submenu-label > span.back-item-label:before { content: ''; display: inline-block; width: 8px; height: 8px; border-right: 2px solid #858585; border-bottom: 2px solid #858585; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); position: relative; top: 50%; left: 0; margin-left: 2px; margin-right: 8px; margin-top: -4px; } /* #site-navigation li.back-item > .site-navigation__submenu-label > span.back-item-label:before { -webkit-transform: translateX(.04em) rotate(135deg); -ms-transform: translateX(.04em) rotate(135deg); -o-transform: translateX(.04em) rotate(135deg); transform: translateX(.04em) rotate(135deg); margin-right: 8px; margin-left: 5px; } #site-navigation li > .site-navigation__submenu-label > span.label-aria-focus span:after { border-right-color: transparent; border-bottom-color: transparent; } @media (prefers-reduced-motion: reduce) { #site-navigation li.menu-item-has-children > a[href="#"] > span:after, #site-navigation li.menu-item-has-children > span > span:after { -webkit-transition: none; -o-transition: none; transition: none; } } #site-navigation li.back-item > .site-navigation__submenu-label:hover > span.back-item-label:before, #site-navigation li.back-item:hover > .site-navigation__submenu-label > span.back-item-label:before { margin-right: 13px; margin-left: 0; } #site-navigation li.back-item > .site-navigation__submenu-label:focus-visible > span.back-item-label:before, #site-navigation li.back-item:focus-visible > .site-navigation__submenu-label > span.back-item-label:before { margin-right: 13px; margin-left: 0; } #site-navigation li.menu-item-has-children > a[href="#"]:hover > span:after, #site-navigation li.menu-item-has-children:hover > a[href="#"] > span:after, #site-navigation li.menu-item-has-children > span:hover > span:after, #site-navigation li.menu-item-has-children:hover > span > span:after { margin-left: 13px; } #site-navigation li.menu-item-has-children > a[href="#"]:focus-visible > span:after, #site-navigation li.menu-item-has-children:focus-visible > a[href="#"] > span:after, #site-navigation li.menu-item-has-children > span:focus-visible > span:after, #site-navigation li.menu-item-has-children:focus-visible > span > span:after { margin-left: 13px; } */ /** * SOUS-MENU **/ #site-navigation li > .sub-menu-block { display: block; width: 100%; height: 100%; position: absolute; left: 100%; top: 0; -webkit-transform: none!important; -ms-transform: none!important; transform: none!important; padding: 0; pointer-events: none; z-index: 1; opacity: 0; -webkit-transition: opacity 0s linear .7s; -o-transition: opacity 0s linear .7s; transition: opacity 0s linear .7s; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; justify-content: center; -ms-align-items: center; align-items: center; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } #site-navigation li > .sub-menu-block > .sub-menu-block-inner { height: 100%; width: 100%; display: table; position: relative; left: 0; top: auto; border: none; background-color: transparent; z-index: auto; -webkit-transform: none; -ms-transform: none; transform: none; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: left .7s cubic-bezier(.7,0,.3,1); -o-transition: left .7s cubic-bezier(.7,0,.3,1); transition: left .7s cubic-bezier(.7,0,.3,1); -webkit-flex: 1 1 100%; -moz-flex: 1 1 100%; -ms-flex: 1 1 100%; -o-flex: 1 1 100%; flex: 1 1 100%; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: flex-start; -ms-align-items: stretch; align-items: stretch; } #site-navigation li > .sub-menu-block > .sub-menu-block-inner:before { display: none; } #site-navigation li > .sub-menu-block:before { display: none; } /* #site-navigation li > .sub-menu-block > .sub-menu-block-inner > ul { display: table-cell; vertical-align: middle; padding: 0; position: static; height: 100%; max-height: 100vh; overflow: auto; overflow-x: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; -o-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: flex-start; -ms-align-items: stretch; align-items: stretch; } */ #site-navigation li > .sub-menu-block > .sub-menu-block-inner:before, #site-navigation li > .sub-menu-block > .sub-menu-block-inner:after { content: ''; display: block; min-height: 30px; -webkit-flex: 1 1 50%; -moz-flex: 1 1 50%; -ms-flex: 1 1 50%; -o-flex: 1 1 50%; flex: 1 1 50%; } /* Bouton Sous-menu */ #site-navigation li > .site-navigation__submenu-label { padding: 0; line-height: 0; position: relative; text-align: right; display: inline-block; display: table-cell; width: auto; cursor: pointer; pointer-events: all; z-index: 2; width: auto; height: 100%; outline: 0; aspect-ratio: 1/1; -webkit-flex: 0 0 0px; -moz-flex: 0 0 0px; -ms-flex: 0 0 0px; -o-flex: 0 0 0px; flex: 0 0 0px; -webkit-appearance: none; appearance: none; border: none; background-color: transparent; background-image: none; background: none; } #site-navigation li > .site-navigation__submenu-label .submenu-toggle { display: inline-block; width: 50px; height: auto; min-height: 100%; padding: 15px 0 15px 0; line-height: 1.12rem; color: transparent; text-indent: -9999px; /*position: absolute; left: 0; top: 0;*/ text-align: right; cursor: pointer; } @supports (aspect-ratio: 1/1) { #site-navigation li > .site-navigation__submenu-label .submenu-toggle { width: auto; aspect-ratio: 1/1; } } #site-navigation li > a[href="#"] ~ .site-navigation__submenu-label, #site-navigation li > span ~ .site-navigation__submenu-label { aspect-ratio: auto; } #site-navigation li > a[href="#"] ~ .site-navigation__submenu-label .submenu-toggle, #site-navigation li > span ~ .site-navigation__submenu-label .submenu-toggle { position: absolute; aspect-ratio: auto; right: 0; width: 80vw; top: 0; /*max-width: 85vw; width: calc(50vw - 327px); aspect-ratio: auto; max-width: calc(85vw - min(-107.52951965955px, max(-5.9738621077267vw, -13.763778516423vh))); width: calc(calc(50vw - 327px) - min(-107.52951965955px, max(-5.9738621077267vw, -13.763778516423vh)));*/ } /* #site-navigation li > .site-navigation__submenu-label .submenu-toggle:before { content: ''; display: block; width: 1px; height: 70%; position: absolute; left: 0; top: 15%; background-color: #721623; opacity: .3; } #site-navigation li > a[href="#"] ~ .site-navigation__submenu-label .submenu-toggle:before { display: none; } */ #site-navigation li > a + .site-navigation__submenu-label .submenu-toggle:after { content: ''; display: inline-block; vertical-align: middle; border: 6px solid transparent; border-left-color: #1f1f1f; border-left-width: 8px; opacity: 0.85; position: absolute; top: 50%; left: 50%; margin-left: -4px; margin-top: -6px; } /* #site-navigation li > .site-navigation__submenu-label .submenu-toggle:after { content: ''; display: block; position: absolute; border-right: 2px solid #858585; border-bottom: 2px solid #858585; width: 8px; height: 8px; top: 50%; left: 50%; margin-left: -4px; margin-top: -4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #site-navigation li > a[href="#"] ~ .site-navigation__submenu-label .submenu-toggle:after, #site-navigation li > span ~ .site-navigation__submenu-label .submenu-toggle:after { right: 25.5px; left: auto; margin-left: 0; } /* #site-navigation li > .site-navigation__submenu-label:hover .submenu-toggle:after, #site-navigation li > .site-navigation__submenu-label:focus .submenu-toggle:after { border-color: #A91427; } #site-navigation li.back-item > .site-navigation__submenu-label > span:before { content: ''; display: inline-block; vertical-align: middle; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; width: 10px; height: 10px; margin-right: 15px; margin-top: -2px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } */ /** * HOMEPAGE OPEN * @media screen and (min-width: 1770px) { body.page-template-homepage label[for="menu-mobile-open-chk"] { display: none!important; } body.page-template-homepage #header-label-menu-mobile { display: none!important; } body.page-template-homepage #menu-mobile-open-chk ~ #site #site-navigation #site-navigation-block { pointer-events: all; } #site-navigation { max-width: 85%; width: 400px; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: box-shadow .7s cubic-bezier(.2,.4,.2,1), transform .7s cubic-bezier(.2,.4,.2,1); -o-transition: box-shadow .7s cubic-bezier(.2,.4,.2,1), transform .7s cubic-bezier(.2,.4,.2,1); transition: box-shadow .7s cubic-bezier(.2,.4,.2,1), transform .7s cubic-bezier(.2,.4,.2,1); -webkit-box-shadow: 0 0 7px -7px rgba(0,0,0,.4); box-shadow: 0 0 7px -7px rgba(0,0,0,.4); background: -moz-linear-gradient(top, rgba(255,255,255,1) 15%, rgba(255,255,255,.5) 65%, rgba(255,255,255,0) 100%), -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 35%, rgba(255,255,255,1) 85%), -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), -moz-linear-gradient(left, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 15%, rgba(255,255,255,.5) 65%, rgba(255,255,255,0) 100%), -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 35%, rgba(255,255,255,1) 85%), -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), -webkit-linear-gradient(left, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 15%, rgba(255,255,255,.5) 65%, rgba(255,255,255,0) 100%), linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 35%, rgba(255,255,255,1) 85%), linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%), linear-gradient(to right, rgba(255,255,255,.5) 0%, rgba(255,255,255,.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); background-repeat: repeat-x, repeat-x, no-repeat, repeat; -webkit-background-size: auto 24%, auto 37%, 100% 100%, 100% 100%; background-size: auto 24%, auto 37%, 100% 100%, 100% 100%; background-position: top 6px center, bottom center, top 6px left, center center; } #site #site-navigation:focus-within { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-box-shadow: 7px 0 7px -7px rgba(0,0,0,.4); box-shadow: 7px 0 7px -7px rgba(0,0,0,.4); } body.page-template-homepage #menu-mobile-open-chk ~ #site #site-navigation, #menu-mobile-open-chk:checked ~ #site #site-navigation { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-box-shadow: 7px 0 7px -7px rgba(0,0,0,.4); box-shadow: 7px 0 7px -7px rgba(0,0,0,.4); } body.page-template-homepage #site-navigation { pointer-events: all; } #site #site-navigation:focus-within #site-navigation-block { -webkit-box-shadow: none; box-shadow: none; background-color: transparent; background-image: none; background: none; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; max-width: none; } #site-navigation #site-navigation-block, #menu-mobile-open-chk:checked ~ #site #site-navigation #site-navigation-block { -webkit-box-shadow: none; box-shadow: none; background-color: transparent; background-image: none; background: none; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none; max-width: none; } #site-navigation:before { right: 0px; left: auto; -webkit-transition: right .7s cubic-bezier(.2,.4,.2,1); -o-transition: right .7s cubic-bezier(.2,.4,.2,1); transition: right .7s cubic-bezier(.2,.4,.2,1); } #site #site-navigation:focus-within:before { right: -80px; } body.page-template-homepage #menu-mobile-open-chk ~ #site #site-navigation:before, #menu-mobile-open-chk:checked ~ #site #site-navigation:before { right: -80px; } } */