body{
    height: auto; 
    
}
/* header */
.baniere{
    background-image: url(../images/wall.png);
    height: 300px;
    padding-top: 57px;
    color: aliceblue;
}
.titre{
  display: grid;
  justify-items: center;
}
.display-1{
  margin: auto;
  font-size: 90px;
  color: red;
  font-family: 'Limelight', cursive;
  border: 3px solid red;
}
.texte-baniere{
  font-size: 320%;
  font-weight: 800;
  font-family: system-ui;

}
.display-2{
  color: red;
  font-family: 'Limelight', cursive;
  border: 1px solid red;
}
nav{
  border-radius: 0; 
}
.container-fluid{
  display: flex;
}
/* page index */
main{
  background-color: #000000;
}
.welcome{
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  height: 20%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #000000;
}
.texte-welcome{
  margin: auto ;
  width: 50%;
  color: white;
  font-size: 220%;
  font-weight: 900;

}
.image-welcome{
  margin: auto;
  width: 20%;
  height:auto;
  box-shadow: none;
  

}
.clic-welcome{
  color: red;
}
.clic-welcome:hover{
text-decoration: none;
background-color: white;
color: #000000;
}
.texte-realisateur{
  width: 50%;
  color: white;
  font-size: 220%;
  font-weight: 900;
}
.realisateurs{
  
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  background-color: #000000;

}
.image-index{
box-shadow: none;
}
.realisateurs::-webkit-scrollbar {
    display: none;
}
h6{
  color: black;
  font-family: system-ui;
  display: grid;
  justify-items: center;
}
.photo-real{
  display: flex;
  flex-direction: column;
  margin: 1%;
  transition: all .4s ease-in-out;
  filter:grayscale(50%);

}
.photo-real:hover{
  background-color: white;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    z-index:1;
    filter: grayscale(0%);
}
.films{
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;

padding: 5px;
}
.photo-film{
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
margin-bottom: 5%;

}
.photo-film2{
  box-shadow: none;
  border: 3px solid gray;
  width: 30%;
  height: auto;
}
.photo-film1{
  box-shadow: none;
  border: 3px solid gray;
  margin: auto;
  width: 21%;
  height: auto;
}
.photo-film3{
  box-shadow: none;
  border: 3px solid gray;
  margin: auto;
  width: 21%;
  height: auto;
}
.liens-film{
  display: flex;
  margin: auto;
  flex-wrap: wrap;
}
.lien-catalogue{
  font-size: 20px;
  padding: 10px;
  margin: auto;
  color: white;
  width: 30%;
  border-radius: 6px;

  background-color: rgba(128, 128, 128, 0.467);

}


img{
  margin-top: 5px;
  margin-right: auto;
  margin-left: auto;
    padding: 4px;
    width: 150px;
    height: 200px;
}
.all{
  width: 80%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.donnee{
  margin: 5px;
  text-align: center;
}
.blockfilm{
  height: 580px;
  margin: auto;
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  color: rgb(0, 0, 0);
  background-color: rgb(194, 194, 194);
  border: 2px solid rgb(0, 0, 0);
  margin-bottom: 15px;
}
.blockfilm:hover {
background-color: #000000;
color: white;

}

/*admin*/
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
  
}

th, td {
  text-align: left;
  padding: 8px;
}


.en-tete{
    display:flex;
    justify-content: space-between;
    align-items:center;
  }
  input, textarea{
    height: 30px;
  
  }
  label, input{
    display: block;
    margin: 10px 0px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.26) ;
  }
  input[type="text"], textarea {
    width: 100%;
    box-sizing: border-box;
  }
  input[type="submit"]{
    margin-top:10px;
    width:100%;
    border-radius:8px;
    border:0px;
    background:gray;
  }
  .blockfilm2{
    height: auto;
    margin: auto;
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    color: rgb(0, 0, 0);
    background-color: rgb(194, 194, 194);
    border: 2px solid rgb(0, 0, 0);
    margin-bottom: 15px;
  }
  .donnee2{
    display: grid;
    justify-items: center;
    margin: auto;
  }
/* page recherche */
.recherche1{
  width: 100%;
  height: 100%;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.form-recherche{
  width: 30%;
  height: auto;
  margin: auto;
  margin-bottom: 5%;

}
.titre-recherche{
font-size: 400%;
font-family: system-ui;
font-weight: 800;
margin: auto;
margin-bottom: 10%;
margin-top: 5%;
}
.retour-recherche{
text-align: center;
display: block;
text-decoration: none;
margin: auto;
padding: auto;
color: white;
margin-top:10px;
width:100%;
height: 30px;
border-radius:8px;
border:0px;
background:gray;
}
.retour-recherche2{
  text-align: center;
  display: block;
  text-decoration: none;
  margin: auto;
  padding: auto;
  color: white;
  margin-top:10px;
  margin-bottom: 5px;
  width:30%;
  height: 30px;
  border-radius:8px;
  border:0px;
  background:gray;
  }
/*footer*/
footer{
    margin:auto;
    background-color: rgba(0, 0, 0, 0.986);
    border: 2px solid gray;
    width: 100%;
    text-align:center;
    color:gray;
    font-family:lucida sans , serif;
    float: bottom;

    
}