/**** Variables ****/
html{
	--bg-body-color: #ECECEC;		/* Gris clair */
	--bg-header-color: #DAA520;		/* Jaune/orange */
	--bg1-nav-color: #333;			/* Gris foncé */
	--bg2-nav-color: #555;			/* Gris clair */
	--font-color: #000000;			/* Noir */
	--white-color: #ffffff;			/* Blanc */
	--color1: #0d0b52;				/* Bleu nuit */
	--color2: #3458b9;				/* Bleu clair */
	--color3: #849494;				/* Gris bleuté */
}
body {
    margin:0;	/* marge ext */
    padding:0;	/* marge int */
    min-height:100vh; /* Assure une hauteur minimale égale à la hauteur de la fenêtre d'affichage */
    background-color:var(--bg-body-color);
    color:var(--font-color);
    font-family:'Arial', sans-serif; /* Exemple de déclaration de police, ajuste selon tes préférences */
	overflow:hidden;	/* Le contenu ne peut pas dépasser la taille du body */
}
header {
    position:fixed;
    top:0;
    left:200px;	/* Décalage à gauche de la largeur de la barre de navigation */	
	
	width:calc(100vw - 200px);	/* On retire la largeur de la barre de navigation */
    height:40px;
	padding:5px;
	
	box-sizing:border-box; /* Inclure les bordures et le rembourrage dans la largeur totale */
	background-color:var(--bg-header-color);
    color:var(--font-color);
    text-align:center;
}
nav {
    position:fixed;		/* Position fixe en haut à gauche */
    top:0;
    left:0;	
	
	min-height:100vh; /* Prend toute la hauteur de la fenêtre */
	width:200px; /* Largeur de la barre de navigation */
	padding:10px;
	
	box-sizing:border-box; /* Inclure les bordures et le rembourrage dans la largeur totale */
	background-color:var(--bg1-nav-color);
    color:var(--white-color);   
}
main {
    position:fixed;		/* Position fixe */
    top:50px;
    left:210px;
	display:flex;
	flex-direction:column; /* Les éléments enfants sont empilés verticalement */
	align-items:center; /* Pour centrer horizontalement les articles */
	overflow-y:auto; /* Ajoute une barre de défilement verticale si le contenu dépasse la hauteur spécifiée */
	overflow-x:auto;	/* Aucune dépassement autorisé en largeur */
    
	max-height:calc(100vh - 60px);
	min-height:calc(100vh - 60px);
	max-width:calc(100vw - 210px);
	min-width:calc(100vw - 210px);
	
	box-sizing:border-box;
	text-align:center;
}
article {
    position: relative;
	min-width:800px;
	width:95%; /* Les contenus occupent la largeur totale du conteneur */
	padding-bottom:20px; /* Espacement entre les contenus */
	margin-bottom:10px; /* Espacement entre les contenus */
	
	text-align:center;
	background-color:var(--white-color);
    border-radius:8px;
    box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);
}
footer {
	padding:5px;
	color:var(--font-color);
}

#adherent_connecte {
    display:inline-block;
	height:100%;
	position:absolute;
    top:0px;
	right:0px;
	
	padding:8px;
	padding-left:100px;
	font-size:18px;
	font-weight:bold;
	box-sizing:border-box; /* Inclure les bordures et le rembourrage dans la largeur totale */
    background-color:var(--bg1-nav-color);
    color:var(--white-color);
}
header #adherent_connecte::before {
    content:'';
    position:absolute;
    top:-40px;
    left:-40px; /* Décalage vers la gauche pour créer l'inclinaison */
    width:0;
    height:40px;
    border-left:40px solid transparent; /* Bordure inclinée */
    border-bottom:40px solid var(--bg1-nav-color); /* Couleur de la bordure */
}

nav .button1 {
    display:block;
	position:relative;
	padding:10px;
	font-size:18px;
	text-decoration:none;
    color:var(--white-color);
}
nav .button2 {
    display:block;
	padding:8px;
	padding-left:25px;
	font-size:16px;
	text-decoration:none;
    color:var(--white-color);
}
nav .button1:hover, nav .button2:hover{
	color:var(--bg-header-color);
}
nav .masque {
	position:absolute;
	right:20px;
	font-size:18px;
}
nav .active {
    background-color:var(--bg2-nav-color);
}

article h1 {
	color:var(--color1);
}

.bouton_type1 {
    background-color:var(--color1); /* Couleur de fond du bouton */
    color:var(--white-color); /* Couleur du texte */
    border:none; /* Supprime la bordure */
    padding:10px 20px; /* Ajuste le rembourrage du bouton */
	margin-left:20px;
	cursor:pointer; /* Curseur de type pointeur au survol */
    border-radius:5px; /* Ajoute un arrondi aux coins */
    transition:background-color 0.3s ease; /* Animation de transition */
}
.bouton_type1:hover {
    background-color: var(--color2); /* Changement de couleur de fond au survol */
}

form .obligatoire{
	color:red;
}
form .message {
    margin-top:10px;
    color:var(--color3);
}

.form_type1 fieldset{   
	margin:20px;
	text-align:left;
}
.form_type1 label {
    display:inline-block;
    width:200px;
	margin-right:10px;
	text-align:right;
}
.form_type1 label.radio-label {
	display:inline;
	width:inherit;
	margin-left:50px;
}
.form_type1 input {
    width:500px;
	padding:4px; /* Ajuste l'espacement interne des inputs */
    margin-bottom:5px; /* Ajuste l'espace entre les éléments */
}
.form_type1 input[type=radio] {
	width:15px;
	margin:7px;
}
.form_type1 input[type=date] {
    width:120px;
}
.form_type1 select {
    width:300px;
	padding:4px;
    margin-bottom:5px;
	margin-right:200px;
}

.form_type2 label {
    display:inline-block;
	margin-right:10px;
	text-align:right;
}
.form_type2 input {
    display:inline-block;
    width:180px;
	padding:8px; /* Ajuste l'espacement interne des inputs */
    margin-bottom:15px; /* Ajuste l'espace entre les éléments */
	margin-right:15px; /* Ajuste l'espace entre les éléments */
}
.form_type2 select {
    display:inline-block;
    width:200px;
	padding:8px; /* Ajuste l'espacement interne des inputs */
    margin-bottom:15px; /* Ajuste l'espace entre les éléments */
	margin-right:15px; /* Ajuste l'espace entre les éléments */
}

.table_type1 {
    width:90%;
    border-collapse:collapse;
    margin:30px auto;
}
.table_type1 th, .table_type1 td {
    padding:15px;
    text-align:left;
    border-bottom:1px solid #ddd;
}
.table_type1 th {
    border-bottom:3px solid #ddd;
}

.resultats_liste_deroulante {
	margin-bottom:10px;
}
.resultats_liste_deroulante ul {
    list-style:none;
    padding:0;
    margin:auto;
    border:1px solid #ccc;
    max-height:200px;
	width:500px;
    overflow-y:auto;
}
.resultats_liste_deroulante li {
    padding:10px;
    cursor:pointer;
	text-align:left;
    transition:background-color 0.3s;
}
.resultats_liste_deroulante li:hover {
    background-color:#f0f0f0;
}

/* Mise en page des numéros de pages */
.nbPages_1{
	display:inline-block;
	position:absolute;
	top:30px;
	right:50px;
	color:var(--color3);
}
.nbPages_2{
	display:inline-block;
	color:var(--color3);
}

.b_prec_suiv:hover{
	cursor:pointer;
	color:var(--color1);
}