@charset "UTF-8";
/* CSS Document */

/* Exemple de CSS personnalisé pour le formulaire */

/* a:link a:visited {
    color:#FFF;
}
a:link:hover {
    color:#d7b645;
}  */

/* S'applique à tous les états de base du lien */
a, a:link, a:visited {
    color: #FFFFFF !important;
    text-decoration: none; /* Enlève le soulignement si tu n'en veux pas */
    transition: color 0.3s ease;
}

/* S'applique au survol et au clic */
a:hover, a:active, a:focus {
    color: #d7b645 !important;
    text-decoration: none;
}
body {
  background-color:#1c1c1d;
  color:#fff;
  font-family:Arial, sans-serif;
  overflow-y:hidden;
  margin:0;
}
.container {
  height:100vh;
}
.row {
  height:100%;
}
.col-lg-6 {
  height:100%;
}
.d-flex {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.btn-link {
  margin-left:auto;  /* Pousse "Créer un compte" à droite */
}
form {
  width:100%;  /* Prend toute la largeur possible */
  max-width:500px; /* Limite la largeur max à 500px (ajustable selon ton besoin) */
  margin:0 auto; /* Centrage du formulaire */
  background-color:transparent;
  padding:40px;
  border-radius:8px;
}
h2 {
  text-align: center;
  color:#fff;
  margin-bottom:20px;
}
/* Pour les écrans plus larges, afficher sur une seule ligne */

.btn-custom {
  white-space:nowrap;
}

/* Pour les tablettes portrait */

@media (max-width: 768px) {
.btn-custom {
   white-space:nowrap;
   width:100%; /* Prendre toute la largeur disponible */
}
}
.btn-custom {
   background-color:#d7b645 !important;
   border-color:#d7b645 !important;
   color:white !important;
}
.btn-custom:hover {
  background-color:#b89c2b !important;
  border-color:#b89c2b !important;
}
.form-footer {
  text-align:center;
  margin-top:10px;
}
.form-footer a {
  color:#fff;
  text-decoration:none;
}

.form-footer a:hover {
  text-decoration:underline;
}
/* Section formulaire de contact */

/* Réactiver le défilement uniquement pour les écrans mobiles (moins de 768px) */

@media (max-width:768px) {
body {
  overflow-y:auto;
}
}
.contact-form {
    background-color: #252728; /* Fond sombre, en harmonie avec la page */
    padding:40px 30px;
    border-radius:10px;
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);*/
    margin-top:40px;
    width:100%;
    max-width:650px;
    margin:0 auto;
}

/* Champs du formulaire */

.contact-form input,
.contact-form textarea {
    width:100%;
    padding:12px;
    margin-bottom:20px;
    background-color:#43464b; /* Fond gris foncé pour les champs */
    color:#fff;
    border:1px solid #666; /* Bordure grise douce */
    border-radius:8px;
    font-size:16px;
}

/* Placeholder */

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color:#bbb; /* Texte placeholder légèrement plus clair */
}

/* Label des champs */

.contact-form label {
    color:#fff;
    font-size:16px;
    font-weight:bold;
    margin-bottom:5px;
    display:block;
}

/* Bouton d'envoi du formulaire */

.contact-form button {
    background-color:#d7b645; /* Jaune comme les autres boutons */
    color:#000;
    font-size:18px;
    padding:15px 30px;
    font-weight:600;
    border:none;
    border-radius:8px;
    cursor:pointer;
    width:100%;
    transition:background-color 0.3s ease;
}

.contact-form button:hover {
    background-color:#c9a93c; /* Jaune plus foncé au survol */
}
creer-compte {
    color:#FFF;
}
creer-compte:hover {
    color:#d7b645;
}
    
/* Rajout de CSS chatgpt */
    
    /* Assurer un centrage vertical complet avec flexbox */

/* Centrer le conteneur */

.container-form {
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh; /* Utilise toute la hauteur de la fenêtre */
}

/* Applique un flexbox sur le formulaire avec le logo à gauche et le formulaire à droite */

.form-container {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
}

/* Ajustement du formulaire */

.form-group {
    margin-left:15px; /* Ajuste si nécessaire */
}
@media (max-width:768px) {

/* Sur mobile, ajuster les éléments */
    
/* Pour étroitiser les marges du formulaire sur mobile */

card-body {
    margin-left:20px;
    margin-right:20px;
}
.form-container {
  flex-direction:column;
}
.form-group {
  margin-left:0; /* Pas de marge sur mobile */
  margin-top:20px; /* Ajuste l'espacement entre les éléments */
}
}
@media (max-width: 1024px) and (min-width: 768px) {
    
/* Style pour tablette portrait et paysage */
    
.container-form {
  padding:10px;
  flex-direction:column;
}
}
/* pour l'affichage du mot de passe */

.password-wrapper {
    position:relative;
}
.password-wrapperinput {
    padding-right:45px;
}
.eye-icon {
    position:absolute;
    right:15px;
    top:70%;
    transform:translateY(-50%);
    cursor:pointer;
}

/* Rajouté le 07.03.2026 à 15.40 */

@keyframes rotate {
    100% { transform: rotate(360deg); }
}
/* On s'assure que la modale Bootstrap laisse de la place */

.modal-dialog {
    margin: 10px !important; /* Marges minimales sur les côtés */
    display: flex;
    align-items: center;
    min-height: calc(100% - 20px);
}
.modal-content {
    border-radius: 15px !important;
    width: 100% !important;
}
@media (max-width: 768px) {
    /* On cible la classe spécifique de ton formulaire */
    .fenetre-inscription {
        width: 100% !important;
        padding: 10px !important;
        margin: 0 !important;
}
}