body{
  margin:0;
  font-family: Arial, sans-serif;
  background:black;
}

#menu{
  background:#000;
  padding:20px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:nowrap;
}

#logo{
  flex:0 0 auto;
}

#logo img{
  height:110px;
}

#btnMenu{
  display:none;
  color:#fff;
  font-size:44px;
  text-decoration:none;
  cursor:pointer;
}

#menu-bleu{
  flex:1 1 auto;
  min-width:0;
  margin-left:auto;
  background:#0059ff;
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:14px 20px;
  border-radius:20px;
  gap:24px;
  white-space:nowrap;
}

#menu-bleu a{
  color:#fff;
  text-decoration:none;
  font-size:34px;
  font-weight:bold;
}

#nav{
  display:none;
  background:#000;
  padding:10px 16px;
}

#nav a{
  display:block;
  color:#fff;
  text-decoration:none;
  font-size:26px;
  font-weight:800;
  padding:10px 0;
}

#image{
  position:relative;
}

#image::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.40);
  pointer-events:none;
}

#image img{
  width:100%;
  height:800px;
  object-fit:cover;
  filter: brightness(90%);
}

#texte{
  position:absolute;
  top:70px;
  left:35px;
  color:white;
  font-style:italic;
  z-index:2;
}

#texte h1{
  font-size:84px;
  margin:0;
  font-weight:900;
}

#texte h2{
  font-size:72px;
  margin:10px 0 0 0;
  font-weight:900;
}

#texte p{
  font-size:40px;
  margin-top:22px;
}

@media screen and (max-width:1200px){
  #menu-bleu a{ font-size:28px; }
}

@media screen and (max-width:1024px){

  #menu{
    justify-content:space-between;
    padding:18px 16px;
  }

  #btnMenu{
    display:block;
  }

  #logo{
    margin-left:auto;
  }

  #logo img{
    height:85px;
  }

  #menu-bleu{
    display:none;
  }

  #nav{
    display:none;
  }

  #nav.open{
    display:block;
  }

  #image img{
    height:650px;
  }

  #texte{
    top:55px;
    left:25px;
  }

  #texte h1{ font-size:64px; }
  #texte h2{ font-size:54px; }
  #texte p{ font-size:30px; }
}

@media screen and (max-width:700px){

  #logo img{
    height:64px;
  }

  #image{
    height:calc(100vh - 92px);
  }

  #image img{
    height:100%;
  }

  #texte{
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
    width:90%;
  }

  #texte h1{ font-size:52px; }
  #texte h2{ font-size:44px; }
  #texte p{ font-size:24px; }
}