/* = = = = = = = = = = = = = = = =
    MAIN
= = = = = = = = = = = = = = = = */
:root{
  --c-primary:          red;
  --c-primary-light:    #fff;
  --c-primary-dark:     black;

  --c-secondary:       rgb(25, 0, 255);

  --submenu-color:      lime; /* DANS LE JS */
}

*{
  margin: 0;
  padding: 0;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--c-primary-light);
}

body{
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;

  background-color: var(--c-primary-dark);

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  header{
    width: 100%;
    
    #nav{
      z-index: 100;
      display: flex;
      flex-direction: row;
      position: sticky;
      width: 100%;

      ul.nav-list{
        align-items: center;
        display: flex;
        flex: 4;
        justify-content: space-between;


        a, button{
          all: unset;
          display: flex;
          min-width: 100%;
          flex-direction: column;
          justify-content: center;
          min-height: 2.5em;

          cursor: pointer;
          background-color: var(--c-primary);
          color: var(--c-primary-light);
          font-weight: 500;
        }

        li.nav-item, li.dropdown-item{
          display: flex;
          flex: 1;
          position: relative;
          text-align: center;
          width: 100%;
        }

        li.dropdown-item{
          flex-direction: column;

          ul.dropdown-list {
            z-index: 1;
            position: absolute;
            display: flex;
            flex-direction: column;
            width: 100%;
                    
            pointer-events: none;
            opacity: 0;
            transition: transform 1s ease-in, opacity 1s ease-out;
            
            > li > a {
              background-color: color-mix(in srgb, var(--submenu-color) 25%, transparent);
            }
          }
        }

        .dir-down {
          top: 100%;
          left: 0;
          transform: translate(0, -100%);
        }
        .dir-right {
          top: 0;
          left: 100%;
          transform: translate(-100%, 0);
        }
        .dir-left {
          top: 0;
          right: 100%;
          transform: translate(100%, 0);
        }

        li.nav-item::before, li.dropdown-item::before {
          content: "";
          position: absolute;
          inset: 0;
          pointer-events: none;
          border: 0px solid transparent;
          transition: all 0.25s;

          background-color: var(--c-secondary);

          z-index: -1;
        }

        li.dropdown-item:hover:has(> ul.dropdown-list.dir-down)::before{
          border-bottom: 4px solid var(--c-primary-light);
        }
        li.dropdown-item:hover:has(> ul.dropdown-list.dir-right)::before{
          border-right: 4px solid var(--c-primary-light);
        }
        li.dropdown-item:hover:has(> ul.dropdown-list.dir-left)::before{
          border-left: 4px solid var(--c-primary-light);
        }

        li.dropdown-item:hover {

          > ul.dropdown-list{
            pointer-events: auto;
            transform: translate(0, 0);
            opacity: 1;
            transition: transform 0.25s ease-out, opacity 0.25s ease-in;
          }
        }

        li.nav-item:hover > a, li.dropdown-item > ul.dropdown-list > li:hover > a, li.dropdown-item:hover > a {
          font-weight: 700;
          background-color: transparent; /* CHECKER LE ::BEFORE*/
        }
      }

      #menu-droite{
        flex: 1;
      }
    }
  }

  main{
    flex: 1;
    width: 100%;
    background-color: rgb(0, 0, 0);

    *{
      width: max-content;
    }
    
    p.scare{
      position: absolute;
      top: 500px;
      left: 500px;
      width: 16px;
      height: 16px;
    }

    audio{
      width: 15em;
      height: 5em;
      background-color: white;
    }
  }

  footer{
    width: 100%;
  }
}

/* button toggle play audio */
#audioplayer{
  z-index: 5;
  position: absolute;

  display: flex;
  flex-direction: column;
  width: 30em;

  input[type="range"]{
    color: white;
  }
  
  button{
    background-color: rgb(0, 0, 0);
  }
}





textarea{
  background-color: black;
}