/*css reset Rayane a la main*/
.bouton
{
  border: 1px solid white;
  padding:5px;
  margin:20px;
}

.bouton button
{
  background-color:#6DCC43;
  font-size:1.5vw;
  padding:20px;
  border:none;
}

body *
{
  font-family:"changa";
  display: inline-block;
  box-sizing:border-box;
  margin: 0;
  padding: 0;
  color:white;

}

body
{
  background-color: black;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

nav *
{
  font-family: "Bebas Neue", sans-serif;
  font-size:20px;
}

nav
{
  background-color:black;
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  padding-left:2vw;
  padding-right:2vw;
  position:sticky;
  top:0px;
  z-index:1000;
}

#navGauche
{
  width:100%;
  display: flex;
  flex-direction:row;
  align-items:center;
  gap:5vw;
}

nav img
{
  width:2vw;
}

#nav_fonctionnalites ul
{
  display:flex;
  flex-direction:row;
  gap:2vw;
}

#navDroite
{
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:right;
}

#fonctionnalitesDroite 
{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:1vh;
}

#fonctionnalitesDroite ul 
{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:2vw;
}
 
#installation
{
  font-size:1vw;
}

#header 
{
  width:100%;
  height:80vh;
  background-image: url("image_site/header.png");
  background-repeat: no-repeat;
  background-size: cover;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8vh;
}

#titres
{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#titres h1 
{
  font-size:5vw;
}

#titres h2
{
  font-family:"Bebas Neue";
  font-size:1.5vw;
}

#section1 
{
  display:flex;
  flex-direction:row;
  background-color:#DDEDDA;
  width:100%;
  padding-top:10vh;
  padding-bottom:10vh;
}

  

#section1 *
{
  color:black;
}

#descriptionDroite
{
  padding-left:10%;
  display:flex;
  flex-direction:column;
  align-items:left;
  width:100%;
  align-items:left;
  gap:7vh;
}

#descriptionDroite h1
{
  font-family:"Bebas Neue";
  font-size:3.5vw;
}

#descriptionDroite p
{
  font-size:1.2vw;
}

#section1 img 
{
  width:100%;
  padding-left:10%;
  padding-right:10%;
}

#section2
{
  width:100%;
  display:flex;
  padding-top:10vh;
  padding-bottom:10vh;
  flex-direction:column;
  align-items:center;
  gap:5vh;
}

#section2 h1 
{
  font-size:3.5vw;
  font-family:"Bebas Neue";
}

#conteneurCartes
{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:3vw;
}

.carte *
{
  display:flex;
  flex-direction:column;
}

.carte 
{
 border:1px solid white;
 width: 15vw;
 height:430px;
 padding:20px;
}

.carte img 
{
  height:5vw;
}


.fontCarte 
{
  padding-top:3vh;
  padding-bottom:3vh;
  padding-left:1vw;
  padding-right:1vw;
  display:flex;
  flex-direction:column;
  background-color:#2C4321;
  height:100%;
  gap:2vh;
  justify-content:space-between;
}

.titreCartes
{
  height:50%;
  display:flex;
  flex-direction:top;
  align-items:center;
  gap:1vh;
}

.titreCartes h3
{ 
  font-size: 2vw;
}

.commentaireCarte p
{
  text-align:center;
}

.commentaireCarte 
{

  height:50%;
}

.boutonCarte 
{
  background:#6DCC43;
  border:none;
  font-family:"Bebas Neue";
  font-size:24px;
  padding:5px;
}

footer 
{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

#video 
{
  width:100%;
  background-color:#2C4321;
  display:flex;
  flex-direction:row;
  justify-content:center;
}

#video h3 
{
  font-family:"Bebas Neue";
  padding:24px;
  font-size:1.5vw;
}

footer img 
{
  width:4vw;
}

footer article 
{
  display:flex;
  flex-direction:column;
  padding:5vh;
  align-items:center;
  gap:10vh;
}

footer h2 
{
  font-size:3vw;
  font-family:"Bebas Neue";
}

ul 
{
  display:flex;
  flex-direction:row;
  gap: 3vw;
}

#histoire 
{
  padding:20vh;
  background-color:#DDEDDA;
  height:box-sizing;
  display:flex;
  flex-direction:column;
  align-items:center;
}

#histoire p 
{
  color:black;
  font-size:32px;
}

.boutonConnection 
{
  background-color:#6DCC43;
  font-size:1.3vw;
  padding:5px;
  border: 1px solid white;
  margin: 20px;
}

.titrePage 
{
  text-align:center;
  padding-top:100px;
}


#personnages 
{
  padding:100px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:30px;
}

#cartePersonnage
{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#personnages img 
{
}

#header_personnage *
{
  display: flex;
  flex-direction:column;
  align-items:center;
}

#liste_personnages *
{
  flex-direction:row;
}

.carte_personnage *
{
  flex-direction:column;
}

#formulaire_creation_personnage input
{
  color:black;
}

/*admin_acceuil par oscar*/

.admin_home
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10vh;
  background-image: url("/projet_annuel_dev/image_site/background_repeat.png");
  background-size: auto;
  min-height: 100vh;
}


.admin_home_logs
{
  padding: 1%;
  background-color: #6DCC43;
  border-radius: 50px 50px 50px 50px;
}
.admin_home_perso
{
  padding: 1%;
  background-color: #6DCC43;
  border-radius: 50px 50px 50px 50px;
}
.admin_home_account
{
  padding: 1%;
  background-color: #6DCC43;
  border-radius: 50px 50px 50px 50px;
}

.admin_home_newsletter
{
  padding: 1%;
  background-color: #6DCC43;
  border-radius: 50px 50px 50px 50px;
}

.admin_home_abonne
{
  padding: 1%;
  background-color: #6DCC43;
  border-radius: 50px 50px 50px 50px;
}

.news_gestion
{
  padding: 1%;
  background-color: #6DCC43;
  border-radius: 50px 50px 50px 50px;
}

.spacer 
{
  width: 100%;
  padding: 5vh;
}

/*pour telephones, ça passe en columns au lieu de row*/
@media (max-width: 768px) 
{
  .admin_home 
  {
    flex-direction: column;
    gap: 1vh;
  }
}


/*pareil pour la page d'accueil de base*/
@media (max-width: 1050px) 
{
  #section2 h1 
  {
    font-size: 8vw;
  }

  #conteneurCartes 
  {
    flex-direction: column;
    align-items: center;
    gap: 1vh;
  }
  .carte
  {
    width: 80vh;
  }
}

/*pareil pour la page d'accueil de base en plus petit*/
@media (max-width: 800px) 
{
  .carte
  {
    width: 60vh;
  }
}

/*pareil pour la page d'accueil de base en encore plus plus petit ( css pour téléphone en vr )*/
@media (max-width: 500px) 
{
  .carte
  {
    width: 40vh;
  }
.carte img 
{
  height: 10vh;
  max-width: 80%;
}

 .titreCartes h3
  {
    font-size: 4vh;
  }
}

/*Photo dee la section 1 de la page d'accueil responsive car maintenant en %.*/
.photoSection1_css
{
  max-width: 50%;
}

/*agrandissement du texte vidéo pour téléphones*/
@media (max-width: 500px) 
{
  #video h3
  {
    font-size: 3vh;
  }
}

/*début de responsive de la navbar oscar / section 1 après coup*/
@media (max-width: 550px) 
{
  nav *
  {
    gap: 0%;
  }
  body *
  {
    gap: 0%;
  }

  nav
  {
    background-color:black;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    padding-left:2vw;
    padding-right:2vw;
    position:sticky;
    top:0px;
    z-index:1000;
  }

  #navDroite
  {
    justify-content:center;
  }
  #navGauche
  {
    justify-content:center;
  }

  li
  {
    font-size: 2vh;
  }
  ul
  {
    gap: 2%
  }
  
  #titres h1 
  {
    font-size:5vh;
  }

  #installation
  {
    font-size: 2vh;
  }

  a .boutonConnection
  {
    border: 1px solid white;
    padding: 5px;
    margin: 20px;
    font-size: 1.5vh;
  }

  .bouton button
  {
    font-size: 3vh;
  }

  #titres h2
  {
    font-size: 2vh;
  }

  nav img 
  {
      width: 5vh;
  }
}

/*css des cartes newsletter*/

.carte_newsletter
{
  width: 80%;
  max-height: 80%;
  background-color:#2C4321;
  border: solid 1px #DDEDDA;
  margin: 1vh;
  padding: 1vh;
  padding-left: 3vh;
  display: flex;
  flex-direction: column;
}

.carte_newsletter h1 
{
  font-size: 4vh;
  text-align: left;
}

.news_p
{
  font-size: 2vh;
  padding: 0.5vh;
  padding-left: 2vh;
  padding-right: 2vh;
  text-justify: inter-word;
}

.news_modifier,
.news_supprimer,
.news_envoyer
{
  align-items: right;
  text-align: right;
  justify-content: right;
}

.news_modifier button,
.news_supprimer button,
.news_envoyer button

{
  color: black;
  background-color: #6DCC43;
  border-radius: 5vh;
  border: none;
  padding: 1%;
  margin: 1vh;
}

/*Bouton de submit pour les newsletter d'abord ou autre apres*/

.boutonstyle
{
  background-color: #2C4321;
  border: none;
  border-radius: 50px 50px 50px 50px ;
  padding: 1vh;
  padding-left: 5vh;
  padding-right: 5vh;
  font-size: 2vh;
}

/*div pour que creer une newsletter soit pas trop degueulasse*/

.newslettercreate textarea
{
color: black;
}

.newslettercreate
{
  width:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  background-image: url("/image_site/background_repeat.png");
  gap: 5vh;
}

.newslettercreate input
{
color: black;
}

/*Gestion de l'abonnement à la newsletter*/

.gestion-abo
{
  gap: 3vh;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  padding-left:2vw;
  padding-right:2vw;
}

.abonne button
{
  font-size: 3vh;
  background-color:#6DCC43;
  padding-left:2vw;
  padding-right:2vw;
  border:none;
  border-radius: 50px 50px 50px 50px ;
}

.desabonne button
{
  font-size: 3vh;
  background-color:#6DCC43;
  padding-left:2vw;
  padding-right:2vw;
  border:none;
  border-radius: 50px 50px 50px 50px ;
}

.formulaire *
{
  color:black;
}