@font-face {
	font-family: 'DeliusSwash';
	src: url('MEDIAS/Polices/DeliusSwashCaps-Regular.ttf') format('truetype')
}
@font-face {
	font-family: 'DeliusReg';
	src: url('MEDIAS/Polices/Delius-Regular.ttf') format('truetype')
}
@font-face {
	font-family: 'FlottFlott';
	src: url('MEDIAS/Polices/Flottflott.ttf') format('truetype')
}
@font-face {
	font-family: 'ActionJ';
	src: url('MEDIAS/Polices/actionj.ttf') format('truetype')
}
@font-face {
	font-family: 'Harlow';
	src: url('MEDIAS/Polices/HARLOWSI.TTF') format('truetype')
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
	background-color: #e3f3f8;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
header {
	background-image:url('MEDIAS/Bandeau_1920.png');
	background-position: center; /* Centre l'image */
	background-repeat: no-repeat; /* Pas de répétition */
	background-color: #3c5f81;
    color: white;
    padding: 1rem 0;
    text-align: center;
}

footer {
    background-color: #3c5f81;
    color: white;
    text-align: center;
    padding: 1rem 0;
    bottom: 0;
    width: 100%;
	margin-top: auto;
}

.header-container {
		display: flex;
		align-items: center;       /* Centre verticalement */
		justify-content: center;   /* Centre horizontalement */
		gap: 20px;                 /* Espacement entre le texte et le logo */
		flex-wrap: wrap;           /* Permet le retour à la ligne si nécessaire */
		padding: 0px;
		text-align: center;        /* Centre le texte si le logo passe en dessous */
	}
	
	.title-text {
		display: flex;
		flex-direction: column;   /* Affiche les lignes de texte en colonne */
		gap: 0px;                  /* Espacement entre les lignes de texte */
		max-width: 300px;          /* Limite la largeur du texte pour éviter qu'il ne devienne trop large */
	}
	
	.logo {
		height: 150px;             /* Ajuste la hauteur du logo selon tes besoins */
		width: auto;               /* Garde les proportions du logo */
	}
	
	/* Optionnel : pour les petits écrans, le logo passe sous le texte */
		@media (max-width: 600px) {
		.header-container {
			flex-direction: column;
		}
		.logo {
			margin-top: 0px;
		}
	}

h1 {
	font-size: 35pt;
	line-height: 0.8;
	text-shadow: 3px 3px 2px black;
}

p{
	font-size: 14pt;
}

nav {
    background-color: #3c5f81;
    padding: 0.5rem;
    text-align: center;
}
nav a {
    color: white;
    margin: 0 1rem;
    text-decoration: none;
}
main {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
}
.form-group input, .form-group textarea {
    width: 100%;
    padding: 0.5rem;
}
.form-group button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}