/*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;
}

.easter-body .easter a
{
  color: black;
}

#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;
}


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


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

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

#personnages img 
{
  width: 300px;
  height: 300px;
  object-fit: cover;
}

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

#liste_personnages *
{
  flex-direction:row;
}

.btn_modifier,
.btn_supprimer
{
  background: black;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
}

.btn_modifier
{
  background: green;
}

.btn_supprimer
{
  background: red;
}

.carte_personnage *
{
  flex-direction:column;
}

#formulaire_creation_personnage input
{
  color:black;
}
#formulaire_creation_personnage select,
#formulaire_creation_personnage option
{
  color: white;
  background: 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) 
{
    #conteneurCartes 
  {
    flex-direction: column;
    align-items: center;
    gap: 1vh;
  }
  .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: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items:center;
    padding-left:2vw;
    padding-right:2vw;
    padding-top: 1vh;
    padding-bottom: 1vh;
    position:sticky;
    top:0px;
    z-index:1000;
  }

  #navDroite
  {
    justify-content:center;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
  }
  #navGauche
  {
    justify-content:center;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
  }

  #nav_fonctionnalites ul
  {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  #fonctionnalitesDroite
  {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  #fonctionnalitesDroite ul
  {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  li
  {
    font-size: 2vh;
  }
  ul
  {
    gap: 3vw;
    row-gap: 1vh;
  }
  
  #titres h1 
  {
    font-size:5vh;
  }

  #installation
  {
    font-size: 2vh;
  }


  .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;
}

#resultats {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#liste-newsletters {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.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;
}

/* 
gestion de la modification newsletter css */

.double-page {
  width: 50%;
  display: flex;
  justify-content: space-between;
  gap: 4vh;
}

.newsletter-gauche
{
  justify-content: left;
  align-self: left;
  width: 48%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.newsletter-droite
{
  justify-content: right;
  align-self: right;
  width: 48%;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* CSS du merch */

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

.merch_title, .merch_p
{
  color: white;
}

.merch_img img
{
  max-width: 150px;
  max-height: 150px;
  border: none;
  border-radius: 25px 5px 25px 5px;
}

.merch_bouton button
{
  background-color: #2C4321;
  border: none;
  border-radius: 50px 50px 50px 50px ;
  padding: 1vh;
  padding-left: 5vh;
  padding-right: 5vh;
  font-size: 2vh;
  display: flex;
  justify-content: flex-end;
}

.merch_prix
{
  font-size: 5vh;
}


.casino-menu
{
  width: 100%;
  min-height: 30vh;
  background-image: url("/projet_annuel_dev/image_site/casino-bg.jpg");
  background-size:contain ;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 5px 5px 5px 5px ;
  margin: 1vh;
  padding: 1vh;
  padding-left: 3vh;
  display: flex;
  flex-direction: column;
}

.casino-selection
{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 20%;
}

.casino-selection a
{
  text-decoration: none;
  background-color: #2C4321;
  border: none;
  border-radius: 5px 5px 5px 5px ;
  padding: 1%;
  margin: 5%;
}

/* Roulette */
.roulette-background
{
  background-image: url("/projet_annuel_dev/image_site/casino-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  min-height: 100vh;
  position: relative;
}

.jeu-roulette
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;       /* ajuste selon ton jeu */
  max-width: 800px;
}

@media (max-width: 768px) 
{
.roulette-background
  {
    background-image: url("/projet_annuel_dev/image_site/casino-bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    min-height: 100vh;
    position: relative;
  }
}

.boutonConnection
{
  background-color: #6DCC43;
  color: white;
  border: none;
  border-radius: 5px 5px 5px 5px ;
  padding: 1%;
  font-size: 2vh;
}

.installer-btn button
{
  background-color: #6DCC43;
  color: white;
  border: none;
  border-radius: 5px 5px 5px 5px ;
  padding: 1%;
  font-size: 2vh;
}

.contacte-footer ul
{
  flex-wrap: wrap;
  justify-content: center;
}

.footer-img
{
  max-width: 100%;
  height: auto;
}

@media (max-width: 550px)
{
  #header
  {
    height: 50vh;
  }
}

/* forum carte  */

.forum-card
{
  background-color: #DDEDDA;
  border-radius: 5px 5px 5px 5px ;
  padding: 1%;
  margin: 1%;
}

.forum-card h1
{
  color: black;
}

.forum-card p
{
  color: black;
}