body {
	font-family: 'Source Sans Pro', sans-serif;
	color: #333;
}

h1, h2, h3 {
	font-family: 'Raleway', serif;
	color: #2C3E50;
}

h4, h5, h6 {
	font-family: 'Raleway', sans-serif;
	color: #555;
}

blockquote, strong {
	font-family: 'Raleway', sans-serif;
	color: #f35f15;
}

p, li {
	font-family: 'Source Sans Pro', sans-serif;
	color: #333;
}

/* Justifier le texte */
p {
	text-align: justify;
	word-break: keep-all;
/* Empêche les coupures de mots */
	overflow-wrap: normal;
/* Évite les retours à  la ligne intempestifs */
	line-height: 1.3;
/* Ajoute de l'espace entre les lignes pour améliorer la lisibilité */
	margin-bottom: 1.2em;
/* Assure un espace suffisant entre les paragraphes */
}

/* Empêche les paragraphes de se diviser */
p {
	page-break-inside: avoid;
	widows: 2;
/* Garde au moins 2 lignes en haut d'une page */
	orphans: 2;
/* Garde au moins 2 lignes en bas d'une page */
}



@media (max-width: 768px) {
    h1 { /* remplacez h1 par la classe ou l'élément spécifique de votre titre si nécessaire */
        font-size: 1.8rem; /* Ajustez la taille en fonction du rendu */
        line-height: 1.2; /* Réduisez l'interligne si nécessaire */
    }
}






/* PAGE DECOUVREZ LSM 5 
Création de la première vague avec ::before */
.page-id-5::before {
	content: '';
	position: absolute;
	top: -80%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(3, 88, 173, 0.3) 50%, transparent 80%);
	opacity: .2;
	animation: wave-motion 15s infinite ease-in-out;
	transform: rotate(0deg);
	z-index: -1;
/* Assure que la vague soit en arrière-plan */
}

/* Création de la deuxième vague avec ::after */
.page-id-5::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(3, 88, 173, 0.3) 20%, transparent 80%);
	opacity: .1;
	animation: wave-motion 15s infinite ease-in-out;
	animation-delay: 3s;
	transform: rotate(120deg);
	z-index: -1;
/* Assure que la vague soit en arrière-plan */
}

/* Assure que le contenu de la page soit au-dessus des vagues */
.page-id-5 {
	position: relative;
	z-index: 1;
/* Place le contenu au-dessus des vagues */
}

/* Animation des vagues */
@keyframes wave-motion {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	
	50% {
		transform: translate(50%, 50%) rotate(180deg);
	}
	
	100% {
		transform: translate(0, 0) rotate(360deg);
	}
}

/* PAGE DANSE 301
Création de la première vague avec ::before */
.page-id-301::before {
	content: '';
	position: absolute;
	top: -80%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(243, 95, 21, 0.3) 20%, transparent 80%);
	opacity: .2;
	animation: wave-motion 15s infinite ease-in-out;
	transform: rotate(0deg);
}

/* Création de la deuxième vague avec ::after */
.page-id-301::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(243, 95, 21, 0.3) 20%, transparent 80%);
	opacity: .5;
	animation: wave-motion 15s infinite ease-in-out;
	animation-delay: 3s;
/* Décalage de la deuxième vague */
	transform: rotate(120deg);
}

/* Animation des vagues */
@keyframes wave-motion {
	0% {
		transform: translate(0, 0) rotate(0deg);
	}
	
	50% {
		transform: translate(50%, 50%) rotate(180deg);
	}
	
	100% {
		transform: translate(0, 0) rotate(360deg);
	}
}

/* PAGE ARTS VISUELS 307
Arrière-plan fixe avec opacité pour la page avec l'ID 307 */
.page-id-307 {
	background-image: url('https://lakousanblematnik.com/wp-content/uploads/2023/11/pexels-photo-4965825.jpeg');
	background-size: cover;
/* Recouvre toute la page */
	background-position: center;
/* Centre l'image */
	background-attachment: fixed;
/* L'arrière-plan reste fixe lors du défilement */
	background-repeat: no-repeat;
/* Empêche la répétition de l'image */
	padding-top: 60px;
/* Ajuste la marge supérieure pour ne pas couvrir le menu (ajuste selon la hauteur de ton menu) */
	position: relative;
/* Nécessaire pour le pseudo-élément */
	color: #fff;
/* Couleur du texte */
}

.page-id-307::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
/* Couleur noire avec 50% de transparence */
	z-index: 1;
/* Assure que la couche de couleur est au-dessus de l'image */
}

.page-id-307 > * {
	position: relative;
/* Assure que le contenu est au-dessus de la couche de couleur */
	z-index: 2;
/* Permet au texte d'être visible */
}

/* Image à gauche, texte à droite pour les lignes impaires */
.page-id-307 .wp-block-column:nth-child(odd) .wp-block-image {
	order: 1;
}

.page-id-307 .wp-block-column:nth-child(odd) .wp-block-audio,
									    .page-id-307 .wp-block-column:nth-child(odd) h2 {
	order: 2;
	margin-left: 20px;
/* Espacement entre image et texte */
}

/* Texte à gauche, image à droite pour les lignes paires */
.page-id-307 .wp-block-column:nth-child(even) .wp-block-image {
	order: 2;
}

.page-id-307 .wp-block-column:nth-child(even) .wp-block-audio,
									    .page-id-307 .wp-block-column:nth-child(even) h2 {
	order: 1;
	margin-right: 20px;
/* Espacement entre texte et image */
}

/* Ajustement des tailles */
.page-id-307 .wp-block-image img {
	max-width: 400px;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.page-id-307 .wp-block-audio {
	width: 100%;
	margin-top: 10px;
}	
}

/* Style pour mobile */
@media (max-width: 767px) {
	.page-id-307 .wp-block-column {
		display: block;
		text-align: center;
		margin-bottom: 40px;
	}
	
	.page-id-307 .wp-block-image {
		margin-bottom: 20px;
	}
	
	.page-id-307 .wp-block-image img {
		max-width: 100%;
		height: auto;
	}
	
	.page-id-307 h2 {
		margin-bottom: 10px;
	}
	
	.page-id-307 .wp-block-audio {
		width: 100%;
	}
}

/* PAGE INSTRUMENTS ET CHANTS 740 Style global pour la page spécifique */
.page-id-740 .wp-block-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 40px;
}

/* Style des cartes contenant chaque image, titre et audio */
.page-id-740 .instrument-card {
	background-color: #f7f7f7;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	max-width: 320px;
	text-align: center;
	transition: transform .3s ease, box-shadow .3s ease;
	margin-bottom: 40px;
}

/* Animation au survol pour un effet sympa */
.page-id-740 .instrument-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Style des images d'instruments */
.page-id-740 .wp-block-image img {
	border-radius: 10px;
	max-width: 100%;
	height: auto;
	margin-bottom: 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Style des titres d'instruments */
.page-id-740 h2 {
	font-size: 1em;
	font-weight: bold;
	color: #333;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom: 2px solid #f35f15;
	display: inline-block;
	padding-bottom: 5px;
}

/* Style pour l'audio */
.page-id-740 .wp-block-audio {
	margin-top: 15px;
	width: 100%;
}

/* Bouton audio personnalisé */
.page-id-740 audio::-webkit-media-controls-play-button {
	background-color: #f35f15;
	border-radius: 50%;
	width: 30px;
	height: 30px;
}

/* Media query pour un design responsive sur mobile */
@media (max-width: 768px) {
	.page-id-740 .wp-block-column {
		margin-bottom: 30px;
	}
	
	.page-id-740 h2 {
		font-size: 1.4em;
	}
	
	.page-id-740 .instrument-card {
		max-width: 100%;
	}
}

page-id-740 .wp-block-audio audio {
	width: 100%;
/* Ajuste à la taille du conteneur */
	max-width: 300px;
/* Taille maximale souhaitée */
	height: 50px;
/* Hauteur uniforme pour tous les blocs audio */
	border-radius: 10px;
/* Pour un style arrondi */
	background-color: #f5f5f5;
/* Optionnel: couleur de fond */
	margin: 10px 0;
}

/* Ajustement sur mobile pour s'assurer que le bloc audio reste bien visible */
@media (max-width: 768px) {
	.page-id-740 .wp-block-audio audio {
		width: 100%;
	/* S'assure que l'audio prend toute la largeur du conteneur sur mobile */
		max-width: 100%;
	/* S'assure qu'il ne dépasse pas */
		height: 50px;
	/* Hauteur constante */
	/* Style global pour la page spécifique */
		flex-direction: column;
		align-items: center;
		margin-bottom: 40px;
	}
	
	/* Style des cartes contenant chaque image, titre et audio */
	.page-id-740 .instrument-card {
		background-color: #f7f7f7;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
		max-width: 320px;
		text-align: center;
		transition: transform .3s ease, box-shadow .3s ease;
		margin-bottom: 40px;
	}
	
	/* Animation au survol pour un effet sympa */
	.page-id-740 .instrument-card:hover {
		transform: translateY(-10px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	}
	
	/* Style des images d'instruments */
	.page-id-740 .wp-block-image img {
		border-radius: 10px;
		max-width: 100%;
		height: auto;
		margin-bottom: 20px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	}
	
	/* Style des titres d'instruments */
	.page-id-740 h2 {
		font-size: 1.6em;
		font-weight: bold;
		color: #333;
		margin-bottom: 10px;
		text-transform: uppercase;
		letter-spacing: 1px;
		border-bottom: 2px solid #f35f15;
		display: inline-block;
		padding-bottom: 5px;
	}
	
	/* Style pour l'audio */
	.page-id-740 .wp-block-audio {
		margin-top: 15px;
		width: 100%;
	}
	
	/* Bouton audio personnalisé */
	.page-id-740 audio::-webkit-media-controls-play-button {
		background-color: #f35f15;
		border-radius: 50%;
		width: 30px;
		height: 30px;
	}
	
	/* Media query pour un design responsive sur mobile */
	@media (max-width: 768px) {
	.page-id-740 .wp-block-column {
		margin-bottom: 30px;
	}
	
	.page-id-740 h2 {
		font-size: 1.4em;
	}
	
	.page-id-740 .instrument-card {
		max-width: 100%;
	}
}

page-id-740 .wp-block-audio audio {
	width: 100%;
/* Ajuste à la taille du conteneur */
	max-width: 300px;
/* Taille maximale souhaitée */
	height: 50px;
/* Hauteur uniforme pour tous les blocs audio */
	border-radius: 10px;
/* Pour un style arrondi */
	background-color: #f5f5f5;
/* Optionnel: couleur de fond */
	margin: 10px 0;
}

/* Ajustement sur mobile pour s'assurer que le bloc audio reste bien visible */
@media (max-width: 768px) {
	.page-id-740 .wp-block-audio audio {
		width: 100%;
	/* S'assure que l'audio prend toute la largeur du conteneur sur mobile */
		max-width: 100%;
	/* S'assure qu'il ne dépasse pas */
		height: 50px;
	/* Hauteur constante */
	/* Cible la page avec l'ID 67 uniquement */
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	/* Responsive grid layout */
		gap: 20px;
		padding: 20px;
	}
	
	/* Style des cartes d'enseignant */
	.page-id-67 .professor-item {
		background-color: #f4f4f4;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		transition: transform .3s ease, box-shadow .3s ease;
		padding-bottom: 15px;
	}
	
	.page-id-67 .professor-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
	}
	
	/* Images responsive */
	.page-id-67 .professor-item img {
		width: 100%;
		height: auto;
	/* Auto height to maintain aspect ratio */
		object-fit: cover;
	}
	
	/* Nom de l'enseignant */
	.page-id-67 .professor-item h3 {
		margin: 15px 10px 5px;
		font-size: 1.2em;
	/* Slightly smaller font for mobile */
		color: #333333;
		text-align: center;
	}
	
	/* Badge de catégorie (discipline) */
	.page-id-67 .professor-item .category {
		display: inline-block;
		background-color: #ff6600;
		color: #ffffff;
		padding: 5px 10px;
		font-size: .9em;
		border-radius: 20px;
		margin: 0 auto;
		display: block;
		text-align: center;
		font-weight: bold;
	}
	
	/* Description facultative */
	.page-id-67 .professor-item .description {
		font-size: .9em;
		color: #666666;
		margin: 10px 15px 20px;
		text-align: center;
	}
	
	/* Pour assurer que le contenu ne soit pas confusant sur mobile */
	@media (max-width: 768px) {
	/* Réduire à une seule colonne sur les petits écrans */
	.page-id-67 .professor-grid {
		grid-template-columns: 1fr;
	/* Full width column on small screens */
	}
	
	/* Plus d'espace autour des cartes pour respirer */
	.page-id-67 .professor-item {
		margin-bottom: 20px;
		padding: 10px;
	}
	
	/* Augmenter la taille du texte pour mobile */
	.page-id-67 .professor-item h3 {
		font-size: 1.4em;
	/* Larger font for better readability */
	}
	
	/* Augmenter la taille du badge pour une meilleure lisibilité */
	.page-id-67 .professor-item .category {
		font-size: 1em;
	/* Slightly larger font for mobile */
	}
	
	/* Ajuster l'espace des descriptions */
	.page-id-67 .professor-item .description {
		margin: 15px 10px;
		font-size: 1em;
	}
}

/* Scroll smooth behavior to improve user experience on mobile */
html {
	scroll-behavior: smooth;
}

/* Style général pour les lecteurs audio */
.wp-block-audio audio {
	width: 100%;
	max-width: 250px;
/* Limite la taille du lecteur audio */
	margin: 10px 0;
}

/* Ajustement des marges pour un meilleur alignement des titres */
.page-id-740 h2 {
	margin-top: 15px;
/* Ajuster la marge si besoin */
}

/* Uniformisation de la taille des images */
.wp-block-image img {
	width: 100%;
	max-width: 250px;
/* Limite la largeur des images */
	height: auto;
/* Garde les proportions */
	border-radius: 10px;
/* Pour un effet arrondi (optionnel) */
}

/* Réactivité pour les appareils mobiles */
@media (max-width: 768px) {
	.wp-block-column {
		flex-direction: column;
		align-items: center;
	/* Centre les éléments sur mobile */
	}
	
	.wp-block-column h2, 
				    .wp-block-column .wp-block-image, 
				    .wp-block-column .wp-block-audio {
		width: 100%;
		text-align: center;
	/* Centre les textes et les éléments */
	}
	
	
	/*Masquer auteur et date dans le blog*/
	.post-meta . author,
	.post-meta . date,
	.entry-meta . author,
	.entry-meta . date, {
		display:none;
	}
	
	
	
	/* Réduire l'espace entre les éléments pour une meilleure lisibilité sur mobile */
	.wp-block-audio audio {
		margin-bottom: 20px;
	}
}