.rechercher{
  display: flex;
  justify-content: end;
  align-items: center;
  margin-right: 15px;
}

/* debut inscription */

form{
  margin: 50px;
  background-color: #3c3c3cab;
  border: solid;
  padding: 40px 60px;
  border-radius: 10px;
  min-width: 300px;
}
form h1{
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: rgb(70, 33, 2);
  color: rgb(231, 73, 73);
  text-align:center;
}
form .social-media{
  margin-top: -10px;
  display: flex;
  flex-wrap:wrap;
  justify-content:center;
}

form .inputs {
  display: flex;
  flex-direction: column;
}
form .inputs input[type='email'], input[type='password']{
  padding: 15px;
  border:none;
  border-radius: 5px;
  background-color:#f2f2f2;
  outline:none;
  margin-bottom: 15px;
}
form p.inscription{
  font-size: 14px;
  margin-bottom: 20px;
  color: black;
  /* -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: rgb(70, 33, 2); */
}

form p.inscription span{
  color: #eb7371;
  font-size: 1.5em;
}
form button{
  padding: 15px 25px;
  border-radius: 5px;
  border:none;
  font-size: 15px;
  color: #fff;
  background-color: #3e8e41;
  outline:none;
  cursor:pointer;
}
/* fin inscription */

/* #bloc_page{
  max-width: 1920px;
  margin: auto;
} */

body {
  font-family: "comic sans ms";
  /* background-color:rgb(32, 65, 109); */
  display: flex;
  flex-direction: column;
  margin: 0;
}

header{
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(231, 73, 73);
  width: 100%;
  justify-content: space-between;
  z-index: 2;
}

/* .logo{
  height: 50px;
} */

.menu{
  display: flex;
  justify-content: center;
  width: 100%;
}

.dropbtn {
    margin-top: 5px;
    background-color: rgb(231, 73, 73);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }  
  
  .dropdown:hover {
    display: block;
  }
  .dropdown:hover .dropbtn {
    padding: 10px;
    background-color: #3e8e41;
    border-radius: 10px;
  }

  .submit{
    border-radius: 10px;
  }

  input {
    padding: 4px 10px;
    border: 0;
    font-size: 16px;
  }
  .search {
    display: flex;
    justify-content: end;
    width: 70%;
    border-radius: 10px;
    margin-right: 10px;
  }
  .submit {
    width: 100px;
    background-color: #1c87c9;
    color: #ffffff;
  }
  
  header a{
  text-decoration: none;
  color: black;
  /* text-decoration: underline; */
}

a{
  text-decoration: none;
  color: #e9b937;
}
.event a{
  color: black;
}
.texte_premier_article{
  color: #e9b937;
  margin: 0 10px 0 10px;
  text-align: justify;
}

.premier_article_lien{
  display: flex;
  justify-content: space-between;
}
.premier_article_lien:hover{
  font-style: italic;
}


.premier_article{
  display: flex;
  margin: 10px;
  margin-bottom: 30px;
  justify-content: space-between;
}

a:hover{
  /* background-color: rgba(128, 248, 124, 0.575); */
  transition: 0.5s;
  color: white;
  border-radius: 10px;
}

.lien_event{
  font-style: italic;
  color: black;
}

main{
  background-image: url(dragon.jpg);
  background-repeat: no-repeat;
  background-size: auto;
  background-attachment: fixed;
  min-height: 45vh;
  width: 100%;
  display: flex;
  justify-content: center;  
  padding-bottom: 100px;
  /* flex-direction: column; */
}

.banniere{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-image: url("team_dbz.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 300px;
}

.actu{
  border: solid;
  margin-right: 10%;  
  width: 80%;
}

.actu2{
  border: solid;
  width: 80%;
  margin-right: 0;
}

/* .contenu_actu{
  display: flex;
  justify-content: center;
  margin: 50px 10px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
} */

.contenu_actu2{
  display: flex;
  justify-content: space-around;
  margin: 50px 10px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.article{
  border: solid;
  border-radius: 5px;
  margin: 10px;
}

.contenu{
  display: flex;
  justify-content: space-around;
  margin: 50px 10px;
  width: 77%;
  margin-left: auto;
  margin-right: auto;
}

.site_salon_manga{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .image_jeu{
  width: 90em;
  display: flex;
} */

/* .episode{
  color: white;
font-size: 50px
} */

/* Les deux liens de salon ne sont pas animés de la même façon, volontairement, pour proposer plusieurs possibilités, au risque que ce ne soit pas cohérent sur ce coup-ci */
.event{
  display: flex;
  flex-direction: column;
  border: solid;
  width: 30%;
  text-align: center;
  /* margin: ; */
}

.salon{
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

 .salon_paris {
  width: auto;
  height: auto;
  margin: auto;
  margin-top: auto;
  position: relative;
}

.video{
  border-radius: 15px;
}

/* fond opaque + texte au mileu en hover */

img {
   transition: .5s ease;
   border-radius: 15px;
}

.visiter {
  transition: .5s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.text {
  background-color: #a8c738;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  padding: 5px 5px;
  opacity: 0; 
}

.salon_paris:hover img {
  opacity: 0.3;
}

.salon_paris:hover .text {
  opacity: 1;
} 
/* fin du lien en hover opaque */

.bc-grey{
  background-color: #3c3c3cab;
  border-radius: 15px;
}
.banniere h1{
  margin-bottom: 5px;
}
h1{
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: rgb(70, 33, 2);
  text-align: center;
  color: #e9b937;
}

h2{  
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: rgb(70, 33, 2);
  color: rgb(231, 73, 73);
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

h3{
  display: flex;
  margin: 0;
  justify-content: center;
}

p{
  color: #e9b937;
}

.fighter{
 max-width: 19em;
 max-height: 9em;
 height: auto;
 display: flex;
 }
 
.super_livre{
  display: flex;
  max-width: 19em;
}

/* 
#fighter2{
  display: flex;
  max-width: 32%;
} */

.basdepage{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 30%;	
	margin: auto;
}

footer{
	background-color: rgb(73, 73, 73);
}

.rubriques{
  display: flex;
  flex-direction: column;
}

i{
  color: rgb(231, 73, 73);
font-size: 100%;
}
i:hover{
  color: #1c87c9;
}

/* page evenement */
table{
  margin: 50px auto;
    border-radius: 15px;
    overflow: hidden;
    border: solid;
    display: flex;
    justify-content: center;   
  border-collapse: collapse;
}

th, td{
  border: 4px solid black;
  padding: 15px;
}
/* fin page event */

/* page real */
.contenu_realisation{
  width: 82%;
  display: flex;
}
.article_real{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  margin-bottom: 30px;
  justify-content: space-between;
}

.texte_real{
  color: #e9b937;
  margin: 20px 10px;
  text-align: justify;
}

.article_real img{
  width: 80%;
}

/* fin page real */

/* 
tr:nth-child(even) {
  background: rgb(179, 213, 247)} */

.futurs{
  background-color: #2aff316e;
}
.anciens{
  background-color: #fa25256e;
}

.lien_event:hover{
  /* font-size: 18px; */
  transition-timing-function: 1; 
  /* comment rendre le hover progressif ? */
  /* opacity: 0.5; */
  color: rgb(1, 33, 216);
}

.gras > th{
  /* text-decoration: underline; */
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: rgb(70, 33, 2);
  color: rgb(231, 73, 73);
  /* color: rgb(121, 17, 98); */
  font-family: comic sans ms;
  font-size: xx-large;
}

/* .tableau{
width: 90%;
} */
/* fin page event */

/* personnages */

.container {
  position: absolute;
  width: 320px;
  margin: 100px auto 0 auto;
  perspective: 1000px;
}

.carousel {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; 
  animation: rotate360 90s infinite forwards linear;
}
.carousel_face { 
  position: absolute;
  width: 80%;
  height: 187px;
  top: 20px;
  left: 10px;
  right: 10px;
  background-size: cover;
  display: flex;
  border-radius: 10px;
}

span {
  margin: auto auto 5px auto;
  font-size: 2rem;
  -webkit-text-stroke: 1px;
  -webkit-text-stroke-color: rgb(70, 33, 2);
  text-align: center;
  color: #e9b937;
}

.carousel_face:nth-child(1) {
  background-image: url("goku.jpg");
  transform: rotateY(  0deg) translateZ(430px); 
  opacity: 0.5;
}
.carousel_face:nth-child(2) { 
  background-image: url("vegeta.jpg");
  transform: rotateY( 36deg) translateZ(430px); 
  opacity: 0.5;
  }
.carousel_face:nth-child(3) {
  background-image: url("gohan.jpg");
  transform: rotateY( 72deg) translateZ(430px);
  opacity: 0.5; 
  }
.carousel_face:nth-child(4) {
  background-image: url("piccolo.jpg");
  transform: rotateY(108deg) translateZ(430px); 
  opacity: 0.5;
}
.carousel_face:nth-child(5) { 
  background-image: url("krillin.jpg");
 transform: rotateY(144deg) translateZ(430px);
 opacity: 0.5; 
}
.carousel_face:nth-child(6) { 
  background-image: url("tortue.jpg");
 transform: rotateY(180deg) translateZ(430px);
 opacity: 0.5; 
}
.carousel_face:nth-child(7) { 
  background-image: url("ten.jpg");
 transform: rotateY(216deg) translateZ(430px); 
 opacity: 0.5;
}
.carousel_face:nth-child(8) {
  background-image: url("boubou.jpg");
  transform: rotateY(252deg) translateZ(430px); 
  opacity: 0.5;
}
.carousel_face:nth-child(9) {
  background-image: url("c17.jpg");
  transform: rotateY(288deg) translateZ(430px);
  opacity: 0.5; 
}
.carousel_face:nth-child(10) {
  background-image: url("c18.jpg");
  transform: rotateY(324deg) translateZ(430px); 
  opacity: 0.5;
}

.carousel_face:nth-child(1):hover{
  opacity: 1;
  transition: 0.5s;
}
.carousel_face:nth-child(2):hover{
  opacity: 1;
  transition: 0.5s;
}
.carousel_face:nth-child(3):hover{
  opacity: 1;
  transition: 0.5s;
}
.carousel_face:nth-child(4):hover{
  opacity: 1;
  transition: 0.5s;
}
.carousel_face:nth-child(5):hover{
  opacity: 1;
  transition: 0.5s;
}
.carousel_face:nth-child(6):hover{
  opacity: 1;
  transition: 0.5s;
}
.carousel_face:nth-child(7):hover{
  opacity: 1;
  transition: 0.5s;
}
.carousel_face:nth-child(8):hover{
  opacity: 1;
  transition: 0.5s;
}
.carousel_face:nth-child(9):hover{
  opacity: 1;
  transition: 0.5s;
}
.carousel_face:nth-child(10):hover{
  opacity: 1;
  transition: 0.5s;
}

@keyframes rotate360 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

.perso_responsive{
  display: none;
}
/* fin personnages */


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

  .contenu{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .contenu_realisation{
    flex-direction: column;
  }
  .texte_real{
    margin: 0px 10px;
  }

  .actu{
    margin-bottom: 10px;
    width: 80%;
    margin-right: 0;
  }
  .event{
    width: 80%;
  }
  .tableau{
    margin: 0px 10px;
  }
  .logo{
    display: flex;
justify-content: center;  
}
  header{
    display: flex;
    flex-direction: column;
  }
  .menu{
    flex-direction: column;
    align-items: center;
  }
.rechercher{
  display: none;
}
.premier_article{
  display: flex;
  flex-direction: column;
  margin: 10px;
  margin-bottom: 30px;
  justify-content: space-between;
}

.texte_premier_article{
  display: flex;
  flex-direction: column;
  color: #e9b937;
  margin: 0 10px;
  text-align: justify;
}

  .premier_article_lien{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

.perso{
  display: flex;
  flex-direction: column;
}

.container{
  display: none;
}

.perso_responsive{
  display: flex;
}
.perso_responsive h3{
  align-items: center;
}
.fighter{
  margin: auto;
}


/* h3{
    justify-content: center;
  } */
}