@import url('https://fonts.googleapis.com/css2?family=Acme&family=DynaPuff:wght@400..700&family=Hanalei&family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body{
  margin: 5px;
  background-color: #cae0ff;
}

.conteneur{
  background-color: #cae0ff;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows:  auto 1fr auto;
  gap: 10px;
  grid-template-areas: "header header header"
  "side main main"
  "footer footer footer";
}
.item{
  background-color:white;
  text-align: center;
  padding: 10px 0;
  font-size: 18px;
}
.header{
  grid-area: header;
  background-color:#cae0ff;
  
}
.side{
  grid-area: side;
}
.main{
  grid-area: main;
}
.footer{
  grid-area: footer;
}
.image-container{
  background-image: url("images/fourques.jpg");
  background-repeat: no-repeat;
  background-size: center;
  background-size: cover;
}
.facebook{
  position:absolute;
  top:8%;
  right: 9%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.face{
  position: absolute;
  top: 8%;
  right: 11%;
  transform: translate(-50%, -50%);
  z-index: 1;
  }
  .mail{
    position: absolute;
    top: 8%;
    right: 13%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
 .accueil{
  position: absolute;
  top: 8%;
  right: 7%;
  transform: translate(-50%, -50%);
  z-index: 1;
  }
.image-text{
  position:absolute;
  top:8%;
  left: 11%;
  transform: translate(-45%, -50%);
  z-index: 1;
  color: white;
  font-size: 53px;
  font-weight: bold;
  font-family: "Acme", 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  opacity: 0.7;
  text-shadow: 0 0 30px black;
}

nav{
  width: 100%;
  margin: 0 auto;
  background-color: white;
  position: sticky;
  align-content: center;
  
}

nav ul{
  list-style-type: none;
}

nav ul li{
  float: left;
  width: 25%;
  text-align: center;
  position: relative;
}

nav ul::after{
  content: "";
  display: table;
  clear: both;
}

nav a{
  display: block;
  text-decoration: none;
  color: black;
  border-bottom: 2px solid transparent;
  padding: 10px 0px;
}

nav a:hover{
  color: orange;
  border-bottom: 2px solid gold;
}

.sous{
  display: none;
  box-shadow: 0px 1px 2px #CCC;
  background-color: white;
  position: absolute;
  width: 100%;
  z-index: 1000;
}
nav > ul li:hover .sous{
  display: block;
}
.sous li{
  float: none;
  width: 100%;
  text-align: left;
}
.sous a{
  padding: 10px;
  border-bottom: none;
}
.sous a:hover{
  border-bottom: none;
  background-color: RGBa(200,200,200,0.1);
}
.deroulant > a::after{
  content:" ";
  font-size: 12px;
}
#noaa{
  height: 200px;
  width: 500px;
}
.slider-container {
  width: 1350px;
  position: relative;
  margin-top: 105px;
  margin-left: 10px;
  padding: 20px;
  height: 500px;
  overflow: hidden;
}
.menu {
  position: absolute;
  left: 0;
  z-index: 11;
  width: 100%;
  bottom: 0;
  text-align: center;
}
.menu label {
  cursor: pointer;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50px;
  margin: 0 0.2em 1em;
}
.menu label:hover,.menu label:focus {
  background: #1c87c9;
}
.slide-input{
  opacity: 0;
}
.slide-img {
  width: 100%;
  height: 450px;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  transition: left 0s 0.75s;
}
[id^="slide"]:checked + .slide-img {
  left: 0;
  z-index: 100;
  transition: left 0.65s ease-out;
}
@media all and (max-width: 1500px) {
  body{
    width: 1000px;
  }
}