header{position:fixed;top:0;left:0;width:100%;padding:var(--spacing-32) var(--spacing-96);z-index:1000;display:flex;justify-content:space-between;align-items:center;transition:0.5s}header.sticky{background:var(--light-bg);padding:var(--spacing-24) var(--spacing-96);box-shadow:0 5px 25px rgb(0 0 0 / .5)}.logo{color:var(--black);font-size:24px;text-transform:uppercase;text-decoration:none;font-weight:var(--fw-Bold);letter-spacing:2px;opacity:0;animation:slideLeft 0.5s ease-in-out forwards}.logo span{color:var(--main-color)}header ul{position:relative;display:flex}header ul li{position:relative;opacity:0;animation:slideRight 0.5s ease-in-out forwards;animation-delay:calc(0.2s * var(--i))}header ul li a{position:relative;display:inline-block;margin:0 var(--spacing-16);color:var(--black)}header ul li a::after{content:"";display:block;position:absolute;bottom:-3px;width:100%;height:2px;transform:scaleX(0);transform-origin:left;background:#333;transition:transform 0.3s ease-out}header ul li a:hover::after{transform:scaleX(1)}.btnHeader{position:relative;cursor:pointer;width:35px;height:40px;opacity:0;animation:slideRight 0.5s ease-in-out forwards;animation-delay:0.5s;display:none}.ligne{width:100%;height:3px;border-radius:15px;background:var(--black);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all 0ms 300ms}.ligne::before{content:"";position:absolute;bottom:10px;background:var(--black);width:100%;height:3px;border-radius:5px;transition:bottom 300ms 300ms ease,transform 300ms ease}.ligne::after{content:"";position:absolute;top:10px;background:var(--black);width:100%;height:3px;border-radius:5px;transition:top 300ms 300ms ease,transform 300ms ease}.btnHeader.active .ligne{background:#fff0}.btnHeader.active .ligne::after{top:0;transform:rotate(45deg);transition:top 300ms ease,transform 300ms 300ms ease}.btnHeader.active .ligne::before{bottom:0;transform:rotate(-45deg);transition:bottom 300ms ease,transform 300ms 300ms ease}.dark-mode-box{animation:slideTop 2s ease-in-out forwards}.dark-mode-box .dark-mode{opacity:0;visibility:hidden;display:none;position:absolute}.dark-mode-box .label{height:26px;width:50px;background:#111;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-8);border-radius:50px;position:relative;cursor:pointer}.dark-mode-box .ball{position:absolute;border-radius:50%;width:22px;height:22px;background:#fff;top:2px;left:2px;transition:transform 0.2s linear}.dark-mode-box .dark-mode:checked+.label .ball{transform:translateX(24px)}.dark-mode-box .fa-moon{color:#f1c40f!important}.dark-mode-box .fa-sun{color:#f39c12!important}body.dark header.sticky{background:var(--dark-bg);box-shadow:0 5px 25px rgb(255 255 255 / .5)}body.dark header .allLinks{color:var(--white)}body.dark header .btnHeader{filter:invert(1)}body.dark .logo{color:var(--white)}body.dark header ul li a::after{background:var(--white)}@media (max-width:1024px){header{padding:var(--spacing-24) var(--spacing-48);z-index:1000}header.sticky{padding:var(--spacing-16) var(--spacing-48);z-index:1000}header.active{background:var(--light-bg)}body:has(header.active){overflow:hidden}.btnHeader{display:block}.menu{position:fixed;top:75px;left:-100%;display:block;padding:var(--spacing-96) var(--spacing-56);text-align:center;width:100%;height:100vh;background:var(--light-bg);transition:0.5s;z-index:999;border-top:1px solid rgb(0 0 0 / .2);overflow:hidden}.menu.active{left:0;overflow:hidden}.menu.active .label{margin:auto!important;order:1}header ul li a{color:var(--black);font-size:24px;margin:var(--spacing-16)}body.dark header.active{background:var(--dark-bg)}body.dark .menu{background:var(--dark-bg);border-top:1px solid rgb(255 255 255 / .2)}body.dark header ul li a{color:var(--white)}}@media (max-width:768px){header{padding:var(--spacing-16) var(--spacing-24)}header.sticky{padding:var(--spacing-16) var(--spacing-24)}}@media (max-width:480px){header{padding:var(--spacing-16) var(--spacing-24)}header.sticky{padding:var(--spacing-16) var(--spacing-24)}}