.event-add-button {
	background: linear-gradient(90deg, #4A90E2 60%, #357ABD 100%); /* Dégradé bleu */
	color: #fff; /* Texte blanc */
	font-weight: 600; /* Texte en gras */
	border: none; /* Pas de bordure */
	border-radius: 8px; /* Bords arrondis */
	padding: 12px 32px; /* Espacement interne */
	min-width: 120px; /* Largeur minimale du bouton */
	font-size: 17px; /* Taille du texte */
	box-shadow: 0 2px 8px rgba(74,144,226,0.08); /* Ombre légère */
	cursor: pointer; /* Curseur main au survol */
	transition: background 0.2s, box-shadow 0.2s; /* Animation sur hover */
	text-decoration: none; /* Pas de soulignement */
	display: inline-block; /* Affiche le bouton en ligne */
	margin-top: 1em; /* Marge au-dessus du bouton */
}
.event-add-button:hover {
	background: linear-gradient(90deg, #357ABD 60%, #2381ec 100%); /* Dégradé bleu foncé */
	box-shadow: 0 4px 16px rgba(74,144,226,0.12); /* Ombre plus prononcée */
}
.event-section {
	width: 100vw; /* Prend toute la largeur de la fenêtre */
	max-width: 100vw; /* Largeur maximale */
	margin-left: calc(-50vw + 50%); /* Décale la section pour occuper toute la largeur */
	margin-right: calc(-50vw + 50%); /* Idem à droite */
	padding: 2em 0; /* Espacement vertical */
	background: #608cfb; /* Fond bleu clair */
	color: #EFEFEF;
	border-radius: 10px; /* Bords arrondis */
	box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
	border: 2px solid #dbe3ef; /* Bordure bleue très claire */
}
.event-section h2,
.event-section .event-container,
.event-section .event-empty,
.event-section .event-add-button {
    margin-left: 40px;
    margin-right: 40px;
}
.event-section h2 {
    margin-left: 40px;
    margin-right: 40px;
    padding-left: 16px;
    padding-right: 16px;
}
/* Bouton supprimer un événement */
.event-delete-button {
	background: linear-gradient(90deg, #d0021b 60%, #a80000 100%); /* Dégradé rouge */
	color: #fff; /* Texte blanc */
	font-weight: 600; /* Texte en gras */
	border: none; /* Pas de bordure */
	border-radius: 8px; /* Bords arrondis */
	padding: 6px 16px; /* Espacement interne */
	min-width: 60px; /* Largeur minimale du bouton */
	font-size: 13px; /* Taille du texte */
	box-shadow: 0 2px 8px rgba(208,2,27,0.08); /* Ombre légère */
	cursor: pointer; /* Curseur main au survol */
	transition: background 0.2s, box-shadow 0.2s; /* Animation sur hover */
	text-decoration: none; /* Pas de soulignement */
	display: inline-block; /* Affiche le bouton en ligne */
	margin-left: 8px; /* Espace à gauche du bouton */
}
.event-delete-button:hover {
	background: linear-gradient(90deg, #a80000 60%, #d0021b 100%);
	box-shadow: 0 4px 16px rgba(208,2,27,0.12);
}
.event-edit-button {
	background: linear-gradient(90deg, #4A90E2 60%, #357ABD 100%);
	color: #fff;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	padding: 6px 16px;
	min-width: 60px;
	font-size: 13px;
	box-shadow: 0 2px 8px rgba(74,144,226,0.08);
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s;
	text-decoration: none;
	display: inline-block;
}
.event-edit-button:hover {
	background: linear-gradient(90deg, #357ABD 60%, #4A90E2 100%);
	box-shadow: 0 4px 16px rgba(74,144,226,0.12);
}
.img-joelle-accueil {
	max-width: 320px;
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(74,74,124,0.04);
}

.button-container {
	display: flex;
	justify-content: flex-end;
	gap: 1em;
	margin: 2em 0;
}
/* Le style de .rdv-button est défini dans menu.css (chargé avec le menu
   sur toutes les pages) pour éviter la duplication. */


body {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}
	/* Ajout Flexbox pour alignement des événements */
	.event-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin: 0 auto 24px auto;
		gap: 0;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.event-title {
		flex: 2 1 0;
		margin-right: 32px;
		font-size: inherit;
		max-width: 700px;
		white-space: normal;
		overflow-wrap: break-word;
		word-break: break-word;
		text-align: left;
	}

	.event-description {
		flex: 1 1 0;
		text-align: center;
	}

	.event-dates {
		flex: 1 1 0;
		text-align: right;
		white-space: nowrap;
		margin-right: 5%;
	}

.event-edit-button, .event-delete-button {
	flex-shrink: 0;
	margin-right: 50px;
}

.parallax-content {
	position: relative;
	z-index: 1;
	background: white;
	padding: 2em;
	max-width: 900px;
	margin-top: 3em;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.parallax-content h1,
.parallax-content h2,
.parallax-content p {
	margin-left: 0;
	width: 100%;
	box-sizing: border-box;
}

/* ===== Vue téléphone ===== */
@media (max-width: 700px) {
	.parallax-content {
		padding: 1.2em 1em;
		/* garde un espace suffisant sous le menu fixe (~54px) */
		margin-top: 4em;
	}

	/* Les événements passent en colonne pour rester lisibles */
	.event-container {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.event-title,
	.event-description,
	.event-dates {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		text-align: left;
		white-space: normal;
	}

	/* Réduit les grosses marges latérales de la section événements */
	.event-section h2,
	.event-section .event-container,
	.event-section .event-empty,
	.event-section .event-add-button {
		margin-left: 16px;
		margin-right: 16px;
	}
	.event-section h2 {
		margin-left: 16px;
		margin-right: 16px;
		padding-left: 0;
		padding-right: 0;
	}

	.event-edit-button,
	.event-delete-button {
		margin-right: 0;
		margin-top: 6px;
	}
}