@font-face {
    font-family: "Pupilice";
    src: url("fonts/CalSans-Regular.ttf") format("truetype");
}

/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: Pupilice;
    color:white;
    font-size:25px;
}

ul {
    list-style:none;
}

nav {
    margin-bottom:20px;
    width:100%;
    position:sticky;
    left:0;
    top:10px;
    z-index:1;
    font-size: clamp(10px, 3vw, 25px);
}

nav ul {
    width:100%;
    display: flex;
    justify-content: space-evenly;
}

nav ul li a {
color: black;
text-decoration: none;}

.menu-deroulant ul {
    display:none;
    font-size:20px;
}

.menu-deroulant:hover {
        background-color: rgb(180 180 180);
}

.menu-deroulant:hover ul {
    display:block;
    z-index:1;
    position:absolute;
    background-color: rgb(200 200 200);
    width:auto;
}

.menu-deroulant:hover ul li:hover {
    background-color: rgb(0 0 0 /50%);
}


/* =========================
   SECTION VIDEO
========================= */

.video-section{
    position:relative;
    height:100vh;
    overflow:hidden;
}

/* VIDEO */
.bg-video{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    /* z-index:-1; */
}

/* OVERLAY */
.overlay{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.4);

    z-index:-1;
}

/* =========================
   SECTION IMAGE
========================= */

.image-section{
    height:100vh;

    background-image:url("images/img1.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* CONTENU */
.content{
    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
}

/* .nav-icon {
  width: 5cm;
  height: 30px;
  object-fit: contain;
  cursor: pointer;
} */

/* Liens de navigation de la page d'accueil */
/* .top-nav {
  display: flex;
  justify-content: space-evenly; /* ou space-around / space-evenly */
  width: 100%;
  margin: 0;
  padding: 10px 20px;
  list-style: none;

  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0);
  z-index: 9999;
} */

/* .top-nav li a {
  color: white;
  text-decoration: none;
 
}

.onglets {
    font-size:3vh
}

.logo {
    font-size:4vh
}

.top-nav li a:hover {
  text-decoration: underline;
} */