/* ---------------------------
   Vars & Helper Functions
   --------------------------- */
   @font-face {
    font-family: "Bodoni MT";
    src: local("fonts/Bodoni.ttf") format(ttf); 
    }
    
    :root {
      --screen-width: 320px;
      --screen-height: 560px;
      --splash-bg-color: #E37611;
    }
    
    /* calculate a circle's circumference based on radius */
    @function circumference($r) {
      $pi: 3.141592653;
      @return 2 * $pi * $r;
    }
    
    /* ---------------------------
        Main Navigation Menu
        --------------------------- */
    
    .nav .nav__toggle {
      display: inline-block;
      position: fixed;
      z-index: 102;
      padding: 0;
      border: 0;
      background: transparent;
      outline: 0;
      right: 15px;
      top: 15px;
      cursor: pointer;
      border-radius: 50%;
      transition: background-color 0.15s linear;
    
    }
    
    .nav__menu {
      height: 0px!important;
    }
    
    .nav .nav__menu {
      flex-direction: column;
      justify-content: center;
      height: var(--screen-height);
      position: relative;
      z-index: 101;
    }
    
    .nav__item {
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.000, 0.995, 0.990, 1.000) 0.3s;
    }
    
    @for $i from 1 through 5 {
      .nav .nav__item:nth-child(#{$i}) {
        transform: translateY(-40px * $i);
      }
    }
    
    .nav .nav__link {
      color: white !important;
      display: block;
      width: 100%;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 5px;
      font-size: 1.25rem;
      text-decoration: none;
      padding: 1rem;
    
      &:hover,
      &:focus {
        outline: 0;
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
    
    /* ---------------------------
        SVG Menu Icon
        --------------------------- */
    
    .menuicon {
      display: block;
      cursor: pointer;
      color: #E37611;
    
      transform: rotate(0deg);
      transition: 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);
    }
    
    .menuicon__bar,
    .menuicon__circle {
      fill: none;
      stroke: currentColor;
      stroke-width: 3;
      stroke-linecap: round;
    }
    
    .menuicon__bar {
      transform: rotate(0deg);
      transform-origin: 50% 50%;
      transition: transform 0.25s ease-in-out;
    }
    
    .menuicon__circle {
      transition: stroke-dashoffset 0.3s linear 0.1s;
      stroke-dashoffset: circumference(23); /* 23 is the <circle>'s radius */
      stroke-dasharray: circumference(23);
    }
    
    /* ---------------------------
        Circular Splash Background
        --------------------------- */
    
    .splash {
      position: absolute;
      top: 40px;
      right: 40px;
      z-index: 100;
      width: 1px;
      height: 1px;
    }
    
    .splash::after {
        content: "";
        display: block;
        position: absolute;
        border-radius: 50%;
        background-color: var(--splash-bg-color);
        
        width: 284vmax;
        height: 214vmax;
        top: -142vmax;
        left: -112vmax;

        transform: scale(0);
        transform-origin: 50% 50%;
        transition: transform 0.5s cubic-bezier(0.755, 0.050, 0.855, 0.060);
        will-change: transform;
    }
    
    /* ---------------------------
        Active State
        --------------------------- */
    
    .nav:target,
    .nav--open {
      > .splash::after {
        transform: scale(1);
      }

      position: fixed;
      z-index: 100;
    
      .menuicon {
        color: white;
        transform: rotate(180deg);
      }
    
      .menuicon__circle {
        stroke-dashoffset: 0;
      }
    
      .menuicon__bar:nth-child(1),
      .menuicon__bar:nth-child(4) {
        opacity: 0;
      }
    
      .menuicon__bar:nth-child(2) {
        transform: rotate(45deg);
      }
    
      .menuicon__bar:nth-child(3) {
        transform: rotate(-45deg);
      }
    
      .nav__menu {
        visibility: visible;
        list-style: none;
        padding: 0;
        margin: 100px 0 0 0;
      }
    
      .nav__item {
        opacity: 1;
        text-decoration: none;
        font-family: "Bodoni MT";
        transform: translateY(0);
      }
    
      .nav__item > a {
        font-size: large;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      }
    }
    
    /* CSS des elements login language  */
    @media only screen and (max-width: 500px) {
      #boxLangue-responsive {
        position: absolute;
        z-index: 99;
        left: 330px;
      }
    }
    
    @media only screen and (min-width: 800px) {
      #nav {
        display: none !important;
      }
    }