/* Styles de base */
body {
    font-family: Arial, sans-serif;
    color: #333;
    background-color: white;
}

/* Header */
header {
    background-color: #ffffff;
    /* border-bottom: 2px solid #ddd; */
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

}

/* Logo, Titre et Sous-titre */
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.logo img {
    height: 150px; /* Taille doublée */
    width: auto;   /* Conserve les proportions */
}

.title-container {
    text-align: center; /* Centre le titre et le sous-titre */
    margin: 10px 0; /* Ajuste l'espacement autour */
}

.title {
    text-align: left;
/*    font-size: 1.5em; */
font-size: 3.2vw;
    margin: 0;
    color: #333;
}

.subtitle {
    text-align: center;
/*    font-size: 1em; */
	font-size: 1.3vw;
    margin: 0;
    color: #666;
}


.container {
    width: 90%;
    /* max-width: 1000px;*/
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	text-align: justify;
	line-height: 1.6;
}

.yellow-container {
    width: 90%;
    /* max-width: 1000px;*/
    margin: 20px auto;
    padding: 20px;
    background-color: rgba(255, 215, 0, 0.5); 
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	text-align: justify;
	line-height: 1.6;
}

.red-container {
    width: 90%;
    /* max-width: 1000px;*/
    margin: 20px auto;
    padding: 20px;
    background-color: rgba(179, 40, 40, 0.5);
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	text-align: justify;
	line-height: 1.6;
}

.form-containerOLD {
   display: flex;
      width: 90%;
    /* max-width: 1000px;*/
    margin: 20px auto;
    padding: 20px;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 250vh;           Full viewport height for vertical centering */
    background-color: rgba(255, 215, 0, 0.5); 
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 1.6;
}


.form-container {
	display: flex;
    flex-direction: column; /* Permet à l'intérieur du conteneur de s'adapter */
    align-items: center;
    width: 100%;
    max-width: 800px; /* Ajustez cette valeur en fonction de votre mise en page */
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh; /* Utilise toute la hauteur disponible */
    height: auto; /* Permet au conteneur de s'étendre avec le contenu */

	}
	
	.statuts-container {
	display: flex;
    flex-direction: column; /* Permet à l'intérieur du conteneur de s'adapter */
    align-items: justify;
    width: 100%;
    max-width: 800px; /* Ajustez cette valeur en fonction de votre mise en page */
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh; /* Utilise toute la hauteur disponible */
    height: auto; /* Permet au conteneur de s'étendre avec le contenu */

	}
	.statuts-container h3 {
	text-align: center;
	}
	
	.statuts-container p ul ol {
	text-align: justify;
	}
	


.flex-container {
    display: flex;
    justify-content: center;
}



/* Menu pour les écrans larges */
/* Centrage du conteneur du menu de bureau */
.menu-container {
    display: flex;
    justify-content: center;
   width: 90%;
    /* max-width: 1000px; */
	background-color: #FFD700;
	padding : 15pt 15pt 15pt 15pt;
}

nav.desktop-menu {
    display: flex;
    gap: 15px;
	justify-content: center;
	background-color: #FFD700;
}

.desktop-menu a {
    color: #333;
    text-decoration: none;
	font-size: 1.2vw;
}

.desktop-menu a:hover {
    color: var(--main-red);
}

/* Menu hamburger pour mobile (masqué sur ordinateur) */
.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
}

/* Menu déroulant mobile (masqué par défaut) */
.mobile-menu {
    display: none;
    flex-direction: column;
    align-items: center;
    background-color: #FFD700;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 20px;
    border-top: 1px solid #ddd;
}

.mobile-menu a {
    padding: 10px 0;
    color: #333;
    text-decoration: none;
    display: block;
}

/* Couleurs issues du logo */
:root {
    --main-red: #e63946;
    --main-blue: #457b9d;
    --main-yellow: #f4a261;
}

/* Footer */
.footer-info {
	display: flex;
    justify-content: center;
    width: 100%;
	background-color: #002147;
	color: #FFFFFF;
	padding : 15pt 15pt 15pt 15pt;
	}

.footer-info a {
	color: #FFFFFF;
	}
	


/* Responsive Design */
@media (max-width: 768px) {
    .desktop-menu {
        display: none !important; /* Masquer le menu classique sur mobile */
    }
	
	.menu-container {
	display: none !important; /* Masquer le menu classique sur mobile */
	}

    .hamburger {
        display: block; /* Afficher le bouton hamburger */
    }

    header {
        flex-direction: column;
    }

    .logo {
        order: -1;
    }
	
	.logo img {
        height: 75px; /* Taille doublée */
        width: auto;
    }


    .title, .subtitle {
        text-align: center;
        margin: 5px 0;
    }

    .mobile-menu.active {
        display: flex; /* Afficher le menu mobile lorsqu'il est actif */
    }
	
	.title {
	/*    font-size: 1.5em; */
	font-size: 5.2vw;
   
    }

	.subtitle {
	/*    font-size: 1.5em; */
	font-size: 3vw;
   
    }
	
	.modal {
		display: block; /* Assurez-vous que le div est visible sur mobile */ */
        width: 100%; /* Ajustez la largeur si nécessaire */
    }
}





h2 {
    text-align: center;
    color: #333;
}

form {
	margin-top:1vw;
	background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}


label {
    display: block;
    margin: 15px 0 5px;
    color: #333;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

select {
    width: 100%;
	height:2vw;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    width: 100%;
	height:10vw;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="checkbox"] {
    margin-right: 5px;
	
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
    width: 100%;
}

button:hover {
    background-color: #45a049;
}

input.error {
    border: 2px solid red;
}

input[type="search"] {
	
	@font-face {
  font-family: 'password';
  font-style: normal;

  src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}

}

/* Style pour la fenêtre modale */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
	width: 90%; 
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 90%;
    max-width: 400px;
    text-align: center;
}

.close-button {
    float: right;
    font-size: 24px;
    cursor: pointer;
}

 .modal-content form {
    width: 100%; /* S'adapte à la largeur de la modale */
    max-width: 90%; /* Garde le formulaire proportionné dans la modale */
    margin: 0 auto; /* Centre le formulaire */
}