@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');@noir:#000000;@blanc: #ffffff;@darkRed: #8b0000;@darkGray: #111111;@borderImg : #f0f0f0;.titreTop(@fontSize){font-size: @fontSize;font-weight: 500;line-height: 1em;letter-spacing: 0.05em;text-transform: uppercase;text-shadow: 0px 0px 33px @noir;}.titreH2(@fontSize){font-size: @fontSize;font-weight: 150;line-height: 1.25em;letter-spacing: 0.1em;text-transform: uppercase;.bigFont{font-size: 1.25em;font-weight: 500;}}.titrePage(){text-align: center;font-size: 4rem;font-weight: 150;line-height: 1.25em;letter-spacing: 0.1em;text-transform: uppercase;padding: 20px 0;.bigFont{font-weight: 500;}}.bouton{display: inline-block;width: auto;height: auto;cursor: pointer;margin: 0px 1.5em 1em;min-width: 250px;transition: all 200ms ease-in-out;text-align: center;box-shadow:0 0 10px rgba(0,0,0,.3);span {display: inline-block;font-size: 0.90rem;font-weight: bold;letter-spacing: 2px;text-transform: uppercase;width: 100%;padding: 15px 20px;color: @blanc;}}.boutonPrimaire{border: 3px solid @darkRed;background-color: @darkRed;&:hover{background-color:#470000;border: 3px solid #470000;}}.boutonSecondaire{background-color: @darkGray;border: 3px solid @darkRed;&:hover{background-color:#470000;border: 3px solid #470000;}}*{box-sizing: border-box;}body{font-family: Roboto,Verdana,sans-serif;font-size: 16px;line-height: 1.5em;color: @noir;}h1,h2,h3,h4,h5,h6{line-height: 2.5em;}h1{font-size: 3em;}h2{.titreH2(5em);z-index: 1;}h3{font-size: 1.5em;}h4{font-size: 1.25em;}h5{font-size: 1.15em;}h6{font-size: 1.1em;}a{text-decoration: none;color: @noir;&:hover{color: @noir;}&:active{color: @noir;}}ul{list-style-type: disc;list-style-position: outside;margin-left: 30px;}li>ul{list-style-type: circle;}li>ul>li>ul{list-style-type: square;}ol{list-style-type: upper-roman;list-style-position: outside;margin-left: 30px;}li>ol{list-style-type:decimal;}li>ol>li>ol{list-style-type: lower-alpha;}body{&::-webkit-scrollbar {width: 10px;}&::-webkit-scrollbar-track {background: @darkGray;}&::-webkit-scrollbar-thumb {background-color: @darkRed;border-radius: 50px;}}#header{position: fixed;width: 100%;height: 50px;background: rgba(0, 0, 0, 0.8);z-index: 9999;#logo{position: fixed;top: -5px;left: 15%;a>img{height: 50px;}}.container {position: absolute;width: 100%;height: 100%;text-align: center;top: 40%;left: 0;margin: 0 auto;font-family: 'Roboto', sans-serif;text-transform: uppercase;a {display: flex;position: relative;text-align: center;color: @blanc;text-decoration: none;font-size: 40px;line-height: 1.2em;overflow: hidden;top: 5px;&:after {content: '';position: absolute;background: @noir;height: 2px;width: 0%;transform: translateX(-50%);left: 50%;bottom: 0;transition: .35s ease;}&:hover:after, &:focus:after, &:active:after {width: 100%;}}}.button_container {position: fixed;top: 11px;right: 15%;height: 27px;width: 35px;cursor: pointer;z-index: 100;transition: opacity .25s ease;&:hover {opacity: .7;}&.active {.top {transform: translateY(11px) translateX(0) rotate(45deg);background: @blanc;}.middle {opacity: 0;background: @blanc;}.bottom {transform: translateY(-11px) translateX(0) rotate(-45deg);background: @blanc;}}span {background: @blanc;border: none;height: 5px;width: 100%;position: absolute;transition: all .35s ease;cursor: pointer;&:nth-of-type(2) {top: 11px;}&:nth-of-type(3) {top: 22px;}}}.overlay {position: fixed;background: @noir;top: 0;left: 0;width: 100%;height: 0%;opacity: 0;visibility: hidden;transition: opacity .35s, visibility .35s, height .35s;overflow: hidden;&.open {opacity: 1;visibility: visible;height: 100%;li {animation: fadeInRight .5s ease forwards;animation-delay: .35s;&:nth-of-type(2) {animation-delay: .4s;}&:nth-of-type(3) {animation-delay: .45s;}&:nth-of-type(4) {animation-delay: .50s;}&:nth-of-type(5) {animation-delay: .55s;}}}nav {position: relative;height: 70%;top: 50%;transform: translateY(-50%);font-size: 50px;font-family: 'Roboto', serif;text-align: center;}ul {list-style: none;padding: 0;margin: 0 auto;display: inline-block;position: relative;height: 100%;li {display: block;height: 22%;min-height: 50px;position: relative;opacity: 0;a {display: block;position: relative;font-weight: 700;color: transparent;-webkit-text-stroke: 1px @blanc;text-decoration: none;overflow: hidden;.active{color: @blanc;transition: .35s;};&:after {content: '';position: absolute;bottom: 0;left: 50%;width: 0%;transform: translateX(-50%);height: 1px;background: @blanc;transition: .35s;}&:hover, &:focus, &:active {width: 100%;}}}}}@keyframes fadeInRight {0% {opacity: 0;left: 20%;}100% {opacity: 1;left: 0;}}}.progress-wrap.active-progress {opacity: 1;visibility: visible;transform: translateY(0);}.progress-wrap {position: fixed;right: 25px;bottom: 25px;height: 46px;width: 46px;cursor: pointer;display: block;border-radius: 50px;z-index: 9999;opacity: 0;visibility: hidden;transform: translateY(15px);transition: all 200ms linear;-webkit-transition: all 200ms linear;&::after {position: absolute;content: '🡱';text-align: center;line-height: 46px;font-size: 18px;color: @blanc;background-color: rgba(0, 0, 0, 0.4);border-radius: 50px;margin-top: 2px;backdrop-filter: 100%;left: 0;top: -2px;height: 46px;width: 46px;cursor: pointer;display: block;z-index: 1;-webkit-transition: all 200ms linear;transition: all 200ms linear;}&:hover::after {color: @darkRed;}svg path {fill: none;}svg.progress-circle path {stroke: @darkRed;stroke-width: 4;box-sizing:border-box;-webkit-transition: all 200ms linear;transition: all 200ms linear;}}#footer{background-color: @darkGray;border-top: 1px solid @blanc;padding-top: 100px;line-height: 3em;span{height: 1px;width: 80%;background-color: @blanc;}a{color: @blanc;}nav{text-transform: uppercase;a{&:hover{color: @darkRed;}}}}@media screen and (max-width:768px){#header{#logo{top: -5px;left: 2%;}.button_container {top: 12px;right: 10%;}}}@media screen and (max-width:768px) and (orientation:portrait){}