body, html {
    height: 100%;
    margin: 0;
	
}

body {
    background: url('/images/background-split-02.jpg') no-repeat center center fixed;
    background-size: cover;
}

.help-btn {
    background-color: #007bff; /* Couleur bleue */
    border: none;
    color: white;
    padding: 0.4rem; /* Ajustez la taille du padding pour qu'il soit égal de tous les côtés */
    font-size: 1.5rem; /* Taille du texte "?" */
    line-height: 1; /* Alignement du "?" */
    border-radius: 50%; /* Rend le bouton parfaitement rond */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    position: absolute;
    width: 3rem; /* Largeur du bouton */
    height: 3rem; /* Hauteur du bouton, doit être égale à la largeur pour être rond */
    display: flex; /* Utilisez flexbox pour centrer le contenu */
    justify-content: center; /* Centre horizontalement le contenu (le "?") */
    align-items: center; /* Centre verticalement le contenu (le "?") */
    left: 20px;
    top: 5px;
    z-index: 1000;
    cursor: pointer; /* Change le curseur en main quand on survole le bouton */
}


#logo {
    max-width: 150px; /* ou la taille que vous souhaitez */
    height: auto; /* pour maintenir le ratio */
    display: block; /* nécessaire pour appliquer margin auto */
    margin: 0 auto 20px; /* pour centrer horizontalement et ajouter de l'espace en dessous */
}

.form-container {
    background: rgba(255, 255, 255, 0.4); /* Fond blanc avec transparence */
    border-radius: 0.30rem; /* Coins arrondis */
    padding: 20px; /* Espace intérieur */
    margin-top: 100px; /* Espace au-dessus du formulaire */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
    width: 100%; /* Largeur du formulaire */
    max-width: 1000px; /* Largeur maximale du formulaire */
    margin: 55px auto; /* Augmenter l'espace au-dessus du formulaire et centrer horizontalement */
    
}

.upload-area {
   height: 200px;
    width: calc(100% - 80px); /* Ajustez la largeur en fonction du padding du conteneur */
    border: 3px dashed #007BFF; /* Rendre les bordures plus épaisses et donc plus lisibles */
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto; /* Centrer dans le formulaire */
    transition: background-color 0.3s, border-color 0.3s; /* Transition en douceur pour les changements de couleur de fond et de bordure */
}
.upload-area.highlight {
    border-color: #666;
    background: rgba(255, 255, 0, 0.1); /* Slightly yellow background on highlight */
}

.upload-area ul {
    list-style: none;
    text-align: left;
    padding: 0;
}

.upload-area li {
    margin: 5px 0;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: left;
    padding: 10px 20px;
}


/* Bootstrap overrides */
.btn-primary {
    background-color: #5cb85c;
}

.btn-primary:hover {
    background-color: #4cae4c;
}
.btn-info {
    background-color: #17a2b8;
}

.btn-info:hover {
    background-color: #138496;
}


.form-control {
    border-radius: 0.25rem;
}

/* Style pour la modale */
.modal-content {
    background: rgba(255, 255, 255, 0.95); /* Fond blanc avec une légère transparence */
    border-radius: 5px; /* Coins arrondis pour la modale */
    border: 1px solid #ddd; /* Bordure légère pour la modale */
}
.modal-dialog {
    max-width: 800px; /* ou toute autre largeur que vous préférez */
    margin: 30px auto; /* pour centrer la modale */
}

.modal-header, .modal-footer {
    border-bottom: none; /* Supprimer la bordure par défaut du header et du footer de la modale */
    background: rgba(240, 240, 240, 0.9); /* Fond légèrement différent pour le header et le footer */
}

.modal-title {
    color: #333; /* Couleur du titre de la modale */
}

.close {
    color: #666; /* Couleur du bouton fermer */
    opacity: 1; /* Rendre le bouton fermer plus visible */
}

/* Bouton fermer lors du survol */
.close:hover {
    color: #a00; /* Changement de couleur lors du survol */
    opacity: 1; /* Garder l'opacité au survol */
}

.modal-body {
    padding: 20px; /* Espace intérieur pour le corps de la modale */
    color: #555; /* Couleur du texte du corps de la modale */
}

/* Boutons dans le footer de la modale */
.modal-footer .btn {
    border-radius: 3px; /* Coins arrondis pour les boutons */
}

/* Bouton fermer dans le footer de la modale */
.modal-footer .btn-secondary {
    background-color: #6c757d; /* Couleur de fond pour le bouton fermer */
    color: white; /* Couleur du texte pour le bouton fermer */
}

/* Bouton fermer lors du survol */
.modal-footer .btn-secondary:hover {
    background-color: #565e64; /* Changement de couleur de fond lors du survol */
}

/* Add any additional styles you need here */
#drop_zone {
            border: 0px dashed #0087F7;
            border-radius: 5px;
            /*background: #F3F4F6;*/
			background: rgba(255, 255, 255, 0.3);
            padding: 10px;
            text-align: center;			font-size: 1.5rem;
            color: #5B5B5B;			height: 150px;			
        }
		
.image-slider {
    width: 100%;
    height: 400px; /* Ajustez selon vos besoins */
    background-size: cover;
    background-position: center;
    border: 0px solid #ddd; /* Pour la visibilité */
	border-radius: 0.25rem; /* Coins arrondis */
    padding: 20px; /* Espace intérieur */
    margin-top: 100px; /* Espace au-dessus du formulaire */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
    width: 100%; /* Largeur du formulaire */
    max-width: 1000px; /* Largeur maximale du formulaire */
    margin: 200px auto; /* Augmenter l'espace au-dessus du formulaire et centrer horizontalement */
    overflow: hidden;
}
#slideshow img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 3s ease-in-out; /* Transition douce pour l'opacité */
}

#slideshow img.active {
    opacity: 0.8;
}
.modal-dialog {
    transition: width 0.5s ease; /* Transition douce pour l'agrandissement */
}