body {

    margin: 0;
    padding: 0;
    display: flex;
    
    height: 100vh;
}

header {
    margin: 0;
    padding: 0;
}

/***********************************************************************************************************************************
Style-PAGE-ACCUEIL
************************************************************************************************************************************/


/* .text-container {
  position: absolute;
  top: 90%; 
  margin-left: 50px;
  text-align: left;
  color: white; 
}


.text-nawak {
  font-family: 'Climate Crisis', sans-serif; 
  font-size: 150px;
  margin: 0; 
  text-transform: uppercase;
  color: white;
}


.text-fripe {
  font-family: 'Climate Crisis', sans-serif;
  font-size: 60px; 
  font-weight: 400;
  margin: 0; 
  text-transform: none; 
  color: white;
}

.T1 {
  font-family: 'Climate Crisis', sans-serif;
  padding: 0;
  text-align: right;
  font-size:120px;
  color: black;
  margin-top: 5px;
  margin-right: 30px;
}

.T2 {
  font-family: 'Climate Crisis', sans-serif;
  padding: 0;
  text-align: right;
  font-size : 100px;
  color: black;
  margin-top: 2px;
  margin-bottom: 20px;
  margin-right: 30px;
}

.trait {
  font-weight: bold;
  font-family: 'Climate Crisis', sans-serif;
}
.trait2 {
  font-weight: bold;
  font-family: 'Climate Crisis', sans-serif;
  text-align: right;
}

.accueiltext1 {
    font-family: 'Commissioner', sans-serif;
    text-align: justify;
    text-align: center;
    font-size: 20px;
    color: black;
    margin-left: 50px;
    margin-right: 50px;
}

.accti1 {
  font-family: Climate Crisis;
  text-align: center;
  font-size: 45px;
  color: black;
  margin-top: 50px;
  margin-bottom: 50px;
}  */
  
/************************************************************************************************************************************
Style-PAGE-Article1
*************************************************************************************************************************************/

/* 
.container-fluid {
  background-color: transparent;
}
nav {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  padding: 10px 20px; 
  background-color: rgba(84, 66, 9, 0);
  border: none; 
  box-shadow: none; 
  position: relative;
  z-index: 1000;
}
nav img {
  max-height: 40px;
}
.navi {
  display: flex;
  gap: 20px; 
  flex-wrap: nowrap;
}
.nav-link {
  font-family: 'Commissioner', sans-serif;
  font-size: 16px;
  color: #3f2802; 
  transition: color 0.3s;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover {
  color: #a97f3b;
}


img {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0;
    padding: 0;
}

.text-overlay {
    position: absolute;
    font-family: 'Climate Crisis', sans-serif;
    top: 110%;
    margin-left: 499px;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 135px;
    
}

.text-overlay2 {
    position: absolute;
    font-family: 'Climate Crisis', sans-serif;
    top: 121%;
    margin-left: 499px;
    transform: translate(-50%, -50%);
    color: black;
    font-size: 135px;
    
}

h3 {
    font-family: Climate Crisis;
    text-align: center;
    font-size: 50px;
    color: black;
    margin-top: 200px;
    margin-bottom: 50px;
}

p {
    font-family: 'Commissioner', sans-serif;
    text-align: center;
    font-size: 16px;
    color: black;
    margin-left: 50px;
    margin-right: 50px;
    justify-content: baseline;
}

.art1footer {
  background-color: black;
  width: 100%;
  color: white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adressef {
  font-size: 20px;
  font-family: 'Commissioner', sans-serif;
  margin-left: 30px;
}


.nawak-section {
  text-align: center;
  margin-right: 30px;
}

.nawak-title {
  font-family: 'Climate Crisis', sans-serif;
  font-size: 50px;
  margin-bottom: 10px;
}

.logos {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.logos img {
  width: auto;
  height: 50px;
}

 */

  
/************************************************************************************************************************************
Style-connexion reussi
*************************************************************************************************************************************/

.text1hconn {
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 0%; /* Positionne en haut */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.785);
  font-size: 160px;
}

.imglogoconn {
    width:  30%;
    height: auto;
    margin: auto;
    top: 40%;
    margin-left: 450px;
    margin-bottom: 80px;
}

.illusvalid {
  top: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-left: 550px;
}

.illusvalid1 {
  width: 97%;
  height: auto;
}

.textco {
  font-family: 'Gasoek One', sans-serif;
  color: white;
  font-size: 80px;
  white-space: nowrap; 
  margin-left: 200px;
}

.text1bconn {
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 130%;
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);  
  text-align: center;
  color: rgba(255, 255, 255, 0.785);
  font-size: 160px;
}

.message {
  font-size: 1.5rem;
  margin: 20px 0;
}

/************************************************************************************************************************************
Style-Inscription reussi
*************************************************************************************************************************************/


.text1hinscr {
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 0%; /* Positionne en haut */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.785);
  font-size: 160px;
}


.imglogoinscr {
    width:  30%;
    height: auto;
    margin: auto;
    top: 40%;
    margin-left: 450px;
    margin-bottom: 80px;
}

.illusinscrvalid {
  top: 50%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-left: 550px;
}

.illusinscrvalid1 {
width: 97%;
height: auto;
}

.textinscr {
  font-family: 'Gasoek One', sans-serif;
  color: white;
  font-size: 80px;
  white-space: nowrap; 
  margin-left: 200px;
}



.text1binscr {
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 130%;
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);  
  text-align: center;
  color: rgba(255, 255, 255, 0.785);
  font-size: 160px;
}


/************************************************************************************************************************************
Style-paiement reussi
*************************************************************************************************************************************/


.text1hpay {
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 0%; /* Positionne en haut */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.785);
  font-size: 160px;
}

.imglogopay {
    width:  30%;
    height: auto;
    margin: auto;
    top: 40%;
    margin-left: 450px;
    margin-bottom: 80px;
}

.illuspayvalid {
  top: 48%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-left: 550px;
}

.illuspayvalid1 {
width: 97%;
height: auto;
}

.textpay {
  font-family: 'Gasoek One', sans-serif;
  color: white;
  font-size: 80px;
  white-space: nowrap; 
  margin-left: 250px;
}

.text1bpay {
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 130%;
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);  
  text-align: center;
  color: rgba(255, 255, 255, 0.785);
  font-size: 160px;
}

  
/************************************************************************************************************************************
Style-formulaire connexion
*************************************************************************************************************************************/


.textformhconn {
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 0%; /* Positionne en haut */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.785);
  font-size: 160px;
}

.textformco1 {
  font-family: 'Gasoek One', sans-serif;
  color: white;
  font-size: 100px;
  margin-top: 150px;
  position: relative; 
  left: 90px;
}

.textformco2 {
  font-family: 'Gasoek One', sans-serif;
  color: #FEFFC1;
  font-size: 100px;
  position: absolute;
  top: 36%; /* Positionnement relatif à la hauteur de la fenêtre */
  left: 105px; /* Ajuste cette valeur pour déplacer le texte horizontalement */
}

.inputformco-container {
  display: flex;
  flex-direction: column; /* Aligne les éléments verticalement */
  justify-content: center; /* Centre les éléments verticalement */
  align-items: center; /* Centre les éléments horizontalement */
  margin-top: 50px;
  margin-left: 430px;
}

.input-inputformco-group {
  width: 300px; /* Taille des champs d'entrée */
  margin-bottom: 20px; /* Espacement entre les champs */
}

input {
  background: transparent;
  border: none;
  border-bottom: 2px solid white;
  color: white;
  font-size: 16px;
  width: 100%; /* Occupe tout l'espace du conteneur */
  padding: 5px 0;
  outline: none;
  text-align: center;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.inputformco2-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-left: 430px;
}

.inputformco {
  color: rgba(255, 255, 255, 0.6);
  font-size: 8px;
  text-align: center;
  margin: 0 10px; 
  text-decoration: underline;
}

.inputformco1 { 
  color: rgba(255, 255, 255, 0.6);
  font-size: 8px;
  text-align: center;
  margin: 0 10px; /* Optionnel, ajoute un peu d'espace entre les éléments */
  text-decoration: none;
}

.btn1formco {
  font-family: 'Gasoek One', sans-serif;
  display: flex;
  justify-content: center; /* Centre les éléments horizontalement */
  align-items: center; /* Centre les éléments verticalement */
  margin-top: 30px;
  margin-left: 550px;
  font-size: 15px;
  border-radius: 7px;
  padding: 15px;
}

.textformbconn {
  margin-top: 120px;
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 130%;
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);  
  text-align: center;
  color: rgba(255, 255, 255, 0.785);
  font-size: 160px;
}


  
/************************************************************************************************************************************
Style-formulaire inscription
*************************************************************************************************************************************/


.textforminscr1 {
  font-family: 'Gasoek One', sans-serif;
  color: white;
  font-size: 100px;
  margin-top: 150px;
  position: relative; 
  margin-left: 150px;

}

.textforminscr2 {
  font-family: 'Gasoek One', sans-serif;
  color: #FEFFC1;
  font-size: 100px;
  position: absolute;
  top: 36%; /* Positionnement relatif à la hauteur de la fenêtre */
  margin-left: 170px;
}

.form-container-inscr {
  display: flex;
  justify-content: space-between; /* Espacement entre les deux sections */
  align-items: flex-start; /* Aligne les sections en haut */
  gap: 50px; /* Espacement horizontal entre les sections */
  max-width: 900px; /* Limite la largeur du formulaire */
  background: transparent;
  margin-left: 190px;
  margin-top: 50px;
}

.sec1forminscr {
  flex: 1; /* Occupe une colonne à gauche */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Espace vertical entre les champs */
  margin-top: 50px;
}

.sec2forminscr {
  flex: 1; /* Occupe une colonne à droite */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Espace vertical entre les champs */
  margin-top: 50px;
}

.input-inscr-group {
  width: 100%; /* Les champs prennent la largeur disponible */
  max-width: 300px; /* Limite la largeur des champs */
  margin-bottom: 20px;
}

.group-flex {
  display: flex;
  justify-content: space-between; /* Espacement horizontal entre les champs */
  gap: 20px; /* Espace entre les champs */
  width: 100%; /* Utilise toute la largeur disponible */
}

input {
  background: transparent;
  border: none;
  border-bottom: 2px solid white;
  color: white;
  font-size: 16px;
  width: 100%;
  padding: 5px 0;
  outline: none;
  text-align: left; /* Aligne le texte à gauche */
  padding-left: 5px; /* Ajoute un léger espace entre le texte et le bord */
}

input::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-align: left; /* Assure également que le placeholder est aligné à gauche */
}

.btn1forminscr {
  font-family: 'Gasoek One', sans-serif;
  display: flex;
  justify-content: center; /* Centre les éléments horizontalement */
  align-items: center; /* Centre les éléments verticalement */
  margin-top: 30px;
  margin-left: 585px;
  font-size: 15px;
  border-radius: 7px;
  padding: 15px;
}
.textformbinscr {
  margin-top: 120px;
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 170%;
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);  
  text-align: center;
  color: rgba(255, 255, 255, 0.785);
  font-size: 160px;
}

.group-flex {
  display: flex; /* Active le mode flexbox */
  gap: 10px; /* Ajoute un petit espace entre les deux champs */
  width: 100%; /* Utilise toute la largeur disponible */
}

.input-inscr-group {
  flex: 1; /* Chaque champ prend une part égale de l'espace disponible */
  max-width: 750px; /* Limite la largeur des champs si nécessaire */
}

.form-check {
  display: flex; /* Aligne la case à cocher et le texte en ligne */
  align-items: center; /* Aligne verticalement la case à cocher et le texte */
  gap: 10px; /* Ajoute un espacement entre la case et le texte */
  margin-top: 10px; /* Espace au-dessus du bloc */
  color: white; /* Couleur du texte */
  font-family: 'Commissioner', sans-serif; /* Police pour le texte */
  font-size: 13px; /* Taille du texte */
  margin-left: 210px;
}

.form-check-input {
  width: 15px; /* Largeur de la case */
  height: 15px; /* Hauteur de la case */
  cursor: pointer; /* Change le curseur au survol */
  border-color: #FEFFC1;
}

.form-check-label {
  cursor: pointer; /* Permet de cliquer sur le texte pour cocher/décocher */
}



  
/************************************************************************************************************************************
Style-formulaire inscription
*************************************************************************************************************************************/
.text1hpayform {
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 0%; /* Positionne en haut */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgb(0, 0, 0);
  font-size: 160px;
}

.payformlogo {
    width:  40%;
    height: auto;
    margin: auto;
    margin-top: 100px;
    margin-left: 80px;
    margin-bottom: 30px;
}

.form-container-pay {
  display: flex;
  justify-content: space-between; /* Espacement entre les deux sections */
  align-items: flex-start; /* Aligne les sections en haut */
  gap: 180px; /* Espacement horizontal entre les sections */
  max-width: 80%; /* Limite la largeur du formulaire */
  background: transparent;
  margin-left: 130px;
}

.sec1formpay {
  flex: 1; /* Occupe une colonne à gauche */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Espace vertical entre les champs */
  
}

.sec2formpay {
  flex: 1; /* Occupe une colonne à droite */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Espace vertical entre les champs */
}

.input-pay-group {
  width: 100%; /* Les champs prennent la largeur disponible */
  max-width: 80%; /* Limite la largeur des champs */
  margin-bottom: 20px;
}

.group-flex-pay {
  display: flex;
  justify-content: space-between; /* Espacement horizontal entre les champs */
  gap: 300px; /* Espace entre les champs */
  width: 100%; /* Utilise toute la largeur disponible */
}

.input-paiyy {
  background: transparent;
  border: none;
  border-bottom: 2px solid rgb(0, 0, 0);
  color: rgb(0, 0, 0);
  font-size: 16px;
  width: 150%; /* Augmente la longueur du trait */
  max-width: none; /* Retire toute limite de largeur */
  padding: 5px 0;
  outline: none;
  text-align: left; /* Aligne le texte à gauche */
  padding-left: 5px; /* Ajoute un léger espace entre le texte et le bord */
}

.input-paiyy::placeholder {
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  text-align: left; /* Assure également que le placeholder est aligné à gauche */
}

.btn1formpay {
  font-family: 'Gasoek One', sans-serif;
  display: flex;
  justify-content: center; /* Centre les éléments horizontalement */
  align-items: center; /* Centre les éléments verticalement */
  margin-top: 30px;
  margin-left: 130px;
  font-size: 15px;
  border-radius: 7px;
  padding: 15px;
  color: aliceblue;
  background-color: #000000;
}
.textformbpay {
  margin-top: 120px;
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 170%;
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);  
  text-align: center;
  color: rgba(0, 0, 0, 0.785);
  font-size: 160px;
}

.group-flex-pay {
  display: flex; /* Active le mode flexbox */
  gap: 10px; /* Ajoute un petit espace entre les deux champs */
  width: 100%; /* Utilise toute la largeur disponible */
}

.input-pay-group {
  flex: 1; /* Chaque champ prend une part égale de l'espace disponible */
  max-width: 750px; /* Limite la largeur des champs si nécessaire */
}

.form-check-pay {
  display: flex; /* Aligne la case à cocher et le texte en ligne */
  align-items: center; /* Aligne verticalement la case à cocher et le texte */
  gap: 10px; /* Ajoute un espacement entre la case et le texte */
  margin-top: 10px; /* Espace au-dessus du bloc */
  color: rgb(0, 0, 0); /* Couleur du texte */
  font-family: 'Commissioner', sans-serif; /* Police pour le texte */
  font-size: 13px; /* Taille du texte */
  margin-left: 150px;
}

.form-check-input-pay {
  width: 15px; /* Largeur de la case */
  height: 15px; /* Hauteur de la case */
  cursor: pointer; /* Change le curseur au survol */
  border-color: #000000;
}

.form-check-label-pay {
  cursor: pointer; /* Permet de cliquer sur le texte pour cocher/décocher */
}

.text1bpayform {
  position: absolute;
  font-family: 'Climate Crisis', sans-serif;
  top: 170%;
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%);  
  text-align: center;
  color: rgb(0, 0, 0);
  font-size: 160px;
}

.text1formpay {
  font-family: 'IBM Plex Mono', monospace;
  display: flex;
  margin-left: 110px;
  font-size: 20px;
  color: #000000;
  top: 40%;
}

.logospayform {
  margin-left: 125px;
  margin-top: 35px;
  margin-bottom: 40px;
}

.logo_paypal {
  width: 60px;
  height: auto;
  margin-right: 35px;
}

.logo_visa {
  width: 60px;
  height: auto;
  margin-right: 35px;
}

.logo_applepay {
  width: 60px;
  height: auto;
  margin-right: 35px;
}

.logo_mastercard {
  width: 60px;
  height: auto;
}