* {
	margin: 0; /* Supprime les marges par défaut de tous les éléments (y compris les éléments de la page comme les paragraphes, les listes, etc.) pour éviter tout espacement non voulu. */
    padding: 0; /* Supprime les espacements internes par défaut des éléments (comme le padding des liens, des images, etc.) pour un contrôle total sur l'espacement. */
    font-family: 'Josefin sans', Arial, sans-serif; /* Définit la police par défaut à 'Josefin Sans' (si disponible), sinon à 'Arial' et en dernier recours à une police sans-serif générique. */
    color: black; /* Définit la couleur du texte par défaut en noir, assurant une lisibilité claire sur la page. */
    box-sizing: border-box; /* Définit que la largeur et la hauteur des éléments incluent le padding et la bordure, ce qui simplifie le calcul de la taille totale des éléments. */
}

/* Le body occupe toute la hauteur de la fenêtre */
html {
  height: 100%;
}

/* Le conteneur principal prend toute la hauteur restante sauf celle du footer */
.content {
  min-height: 100%;
  padding-bottom: 30px; /* Hauteur du footer */
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 10%;
}
 
.logo img {
	position: absolute;
	margin-top: 15px;
	margin-left: 10px;
 }
 
#listnav {
	 display: none;
 }
 
.nav {
	display: flex;
	align-items: center;
	background-color: white;
}
	
.nav li {
	list-style-type: none;
}
.nav li a {
	transition: all 0.3s ease 0s;
}
.nav a {
	display: inline-block;
	padding: 15px;
	background-color: white;
	text-decoration: none;
	font-weight: bold;
}

.nav a:hover {
	color:#A5A5A5;
}

.nav a.actif {
	color:#A5A5A5;
}

.nav a:hover.actif{
	color:#A5A5A5;
}

.banniere {
    position: relative; /* Positionne l'élément relativement pour que .welcomenav puisse se positionner par rapport à lui */
    width: 100%; /* L'élément occupe toute la largeur de l'écran */
    left: 0px;
    top: 15%; /* Place la bannière à 15% sous l'élément du dessus */
}

.banniere img {
	opacity: 0.6; /* Définit l'opacité de l'image à 0.6, ce qui la rend légèrement translucide. */
    width: 100%; /* Fait en sorte que l'image occupe toute la largeur de son conteneur parent, ajustant sa taille en conséquence. */
    object-fit: cover; /* L'image s'adapte à la taille de son conteneur tout en maintenant son rapport d'aspect. Si nécessaire, elle sera recadrée pour couvrir entièrement le conteneur sans déformation. */
}

.welcomenav {
	position: absolute; /* Positionne .welcomenav par-dessus la bannière */
    top: 50%; /* Place .welcomenav à 50% de la hauteur de la bannière */
    left: 50%; /* Place .welcomenav à 50% de la largeur de la bannière */
    transform: translate(-50%, -50%); /* Centrage exact de l'élément */
    display: flex; /* Utilisation de flexbox pour centrer les liens à l'intérieur de .welcomenav */
    align-items: center; /* Centrage vertical */
    justify-content: center; /* Centrage horizontal */
    gap: 20px; /* Espacement entre les éléments enfants */
    z-index: 1; /* S'assure que .welcomenav est au-dessus de la bannière (z-index plus élevé que celui de la bannière) */
}

.welcomenav li{
	list-style-type: none; /* Supprime les puces par défaut des éléments de liste (<li>) dans cet élément. */
}

.welcomenav a {
	display: inline-block; /* Permet à l'élément <a> de se comporter comme un bloc mais sans prendre toute la largeur disponible. */
    padding: 20px; /* Ajoute un espacement interne de 20px autour du contenu du lien. */
    width: 200px; /* Définit une largeur fixe de 200px pour chaque élément <a>. */
    background-color: #282d32; /* Applique une couleur de fond sombre (#282d32) aux liens. */
    text-decoration: none; /* Supprime le soulignement par défaut des liens. */
    text-align: center; /* Centre le texte à l'intérieur de l'élément <a>. */
    color: white; /* Définit la couleur du texte en blanc. */
    font-size: 20px; /* Définit la taille de police à 20px. */
    margin: 0 5px; /* Ajoute un espace de 5px à gauche et à droite de chaque lien pour les séparer légèrement. */
    box-sizing: border-box; /* Assure que le padding et les bordures sont inclus dans la largeur totale de l'élément, évitant ainsi des dépassements inattendus. */
    border-radius: 10px; /* Arrondit les coins du lien avec un rayon de 10px. */
}


main {
    height: 100%; /* Définit la hauteur de l'élément <main> à 100% de la hauteur de son conteneur parent (généralement la fenêtre du navigateur si le parent est `<body>`). */
}


footer {
	background-color: #282d32;
	text-align: center;
	padding: 30px 5%;
	width: 100%;
}

footer p {
	color: #FFFFFF;
	text-align: center;
	opacity: 0.6;
	font-size: 13px;
}

.social li {
	display: inline-block;
	list-style-type: none;
}

.social img {
	height:30px;
	margin: 10px;
	margin-top:0;
}

Article {
	padding: 25px;
}

.AboutMe {
	max-width: 1500px; /*Limite la largeur du conteneur à 1500px.*/
	margin: 0 auto; /* Centre le conteneur horizontalement dans son parent.*/
}

.AboutMe p {
	line-height: 2em;
	text-align: justify;
}

.drapeau img{
	height: 25px;
}


.titre {
	background-color: #282d32 ;
	color: #FFFFFF;
	padding: 5px;
	padding-left: 20%;
}

.Container {
	max-width: 1500px; /*Limite la largeur du conteneur à 1500px.*/
	margin: 0 auto; /* Centre le conteneur horizontalement dans son parent.*/
	display: flex;  /*Utilise Flexbox pour organiser les éléments enfants.*/
	flex-wrap: wrap; /*Permet aux éléments de s'enrouler sur plusieurs lignes si nécessaire.*/
	gap: 1vmin; /*Crée un espacement uniforme entre les éléments enfants, relatif à la taille de la fenêtre.*/
	padding: 25px 10px; /* Ajoute un espacement interne de 25px en haut et en bas, 10px à gauche et à droite du conteneur.*/
}
.Container::after {
	content: ""; /*Crée un pseudo-élément vide à la fin de l'élément .Container.*/
	display: block; /*Rend le pseudo-élément un élément de bloc, qui occupe toute la largeur disponible.*/
	flex-grow: 10;  /*Permet au pseudo-élément de croître et d'occuper 10 fois plus d'espace que les autres éléments flexibles dans le conteneur.*/
}

.Container li {
    list-style-type: none;  /* Supprime les puces ou les numéros de liste par défaut pour les éléments <li>. */
    height: 300px;  /* Définit une hauteur fixe de 300px pour chaque élément de la liste. */
    flex-grow: 1;  /* Permet à l'élément <li> de croître et d'occuper l'espace disponible dans un conteneur flexible (si utilisé avec Flexbox). */
    background-size: cover;  /* Ajuste l'image de fond de l'élément <li> pour qu'elle couvre entièrement l'élément sans déformation. */
    overflow: hidden;  /* Masque toute partie de l'élément enfant qui dépasse de l'élément <li>. */
    transition: .1s ease-in;  /* Applique une transition de 0.1 seconde pour toute propriété modifiée, avec un effet d'accélération au début. */
}

.Container>* {
  flex:1 1 1 170px;
}

.Container li img {
	cursor: pointer;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.Container li:hover img{
	cursor: pointer;
	transform: scale(1.1);
}

.popup {
	display: none; /* Par défaut, le modal est caché */
    position: fixed;
    z-index: 9999;
    padding-top: 50px; /* Positionnement vertical */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.95); /* Fond noir semi-transparent */
}

.popup-content {
	margin: auto;
	display: flex;
	align-items: center;
	width: auto;
	max-width: 80%; /* Limiter la largeur */
	max-height: 80%; /* Limiter la hauteur */
}

.popup-image {
	max-width: 90%; /* Limiter la largeur de l'image à 80% de la page */
	height: auto; /* Maintenir le ratio d'aspect */
	width: auto; /* Permettre au navigateur de calculer la largeur */
	max-height: 80vh; /* Limiter la hauteur à 80% de la hauteur de la vue */
	margin: 20px;
	padding: 20px;
}

.popup-title {
	font-size: 32px;
	color:white;
	margin-top: 0;
	margin: 10px;
	margin-bottom: 50px; 	
}

.popup-description{
	font-size: 26px;
	margin: 10px;
	color: white;
	line-height: 1.5em;
	text-align: justify;
}

/* Style de la fermeture (croix) */
.close {
	background-color: grey;
    color: white;
    float: right;
    font-size: 32px;
    font-weight: bold;
	position: absolute;
    top: 50px; /* Alignement au bord supérieur */
    right: 50px; /* Alignement au bord droit */
	padding: 5px 10px;
}

.close:hover,
.close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}

.prev,
.next {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px; /* Centrer verticalement */
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0,0,0,0.8);
}

.prev i,
.next i {
    margin-right: 5px;
}
	


	
@media all and (max-width: 860px){
	.titre {
	padding-left: 10%;
	}
	.Container {
		width: 500px;
	}
	footer p {
		font-size: 8px;
	}
	footer .social img {
		 transform: scale(0.8);
	}
}

@media all and (max-width: 560px){
	.titre {
	padding-left: 10%;
	}
	.Container {
		width: 100%;
	}
	footer p {
		font-size: 8px;
	}
	footer .social img {
		 transform: scale(0.8);
	}
}

@media all and (max-width: 450px){
	main {
		display: flex;
		flex-direction: column;
		height: 100%; /* Remplit toute la hauteur de la fenêtre */
		width: 95%; /* Définir la largeur de l'élément principal à 95% de l'écran */
	}
	.titre {
		width: 100%; /* Définir la largeur de l'élément principal à 95% de l'écran */
		margin-left:0px; /* Ajouter une marge de 10px autour de l'élément principal */
	}

	/*Header*/
	.header {
		display: flex; /* Utiliser le modèle de mise en page flexbox pour le header */
		justify-content: space-between; /* Espacer les éléments du header de manière égale, avec de l'espace entre */
		padding-bottom:0 ; /* Enlever le padding en bas du header */
	}
	header .logo {
		width: 100px; /* Définir la largeur du logo à 100px */
	}
	
	/* Footer */
	footer {
		bottom: 0px;
	}
	
	footer p {
		font-size: 8px;
	}
	footer .social img {
		 transform: scale(0.8);
	}
	
	/*Menu déroulant*/
	.nav {display: none} /* Masquer le menu de navigation */
	#listnav {
		display: block; /* Afficher le menu de navigation */
		float: right; /* Positionner le menu à droite de son conteneur */
	}
	#listnav li {
		display: inline-block; /* Afficher les éléments de la liste en ligne */
		list-style-type: none; /* Enlever les puces des éléments de la liste */
		border: 1px solid #A5A5A5; /* Ajouter une bordure grise autour de chaque élément */
		position: relative; /* Définir une position relative pour l'élément, nécessaire pour certaines mises en page */
		background: white; /* Définir un fond blanc pour les éléments de la liste */
	}
	#listnav ul li {
		display: inherit /* Laisser l'affichage des éléments de liste comme celui du parent */
	}
	#listnav a {
		display: block; /* Faire en sorte que les liens prennent tout l'espace de l'élément de la liste */
		text-decoration: none; /* Enlever la décoration de texte (soulignement) des liens */
		padding: 10px 10px; /* Ajouter un padding de 5px à gauche et à droite, 5px en haut et en bas */
		font-size: 12px; /* Définir la taille de police des liens à 12px */
	}
	#listnav ul {
		position: absolute; /* Positionner le sous-menu de manière absolue par rapport à son conteneur parent */
		left: -999em; /* Placer le sous-menu très loin à gauche pour qu'il soit hors de la vue de l'utilisateur (initialement caché) */
		text-align: left; /* Aligner le texte à gauche dans le sous-menu */
		z-index: 1000; /* Placer le sous-menu au-dessus des autres éléments de la page (valeur élevée pour le superposer) */
		overflow: hidden; /* Cacher tout contenu qui dépasse du sous-menu */
	-moz-transition: .8s all .3s; /* Définir une transition pour les navigateurs Firefox (8s de durée, 0.3s de délai) */
	-webkit-transition: .8s all .3s; /* Définir une transition pour les navigateurs basés sur Webkit (Chrome, Safari, etc.) */
	transition: .8s all .3s; /* Définir une transition générique (durée 0.8s, avec délai de 0.3s) pour tous les navigateurs modernes */
	}
	#listnav li:hover ul {
		left: auto; /* Lorsque l'élément de la liste est survolé, remettre le sous-menu à sa position d'origine, le rendant visible */
	}
	
	/*Index*/
	
	.banniere {
		margin-bottom: 10px;
	}
	.welcomenav {
		gap: 2px;
	}
	.welcomenav a {
        transform: scale(0.5); /* Réduit la taille de l'élément à 80% de sa taille originale (20% plus petit). */
    }

	/* Paintings */
	.titre {
	padding-left: 10%;
	}

	.Container {
		width: 95%; /* Définir la largeur du conteneur à 95% de l'écran */
	}
	.Container li {
		width: 49%; /* Définir une largeur fixe de 120px pour chaque élément de la liste */
		height: auto; /* Laisser la hauteur de chaque élément de la liste s'ajuster automatiquement */
		flex-grow: 0; /* Laisser les éléments se développer avec une flexibilité de 1.5, les rendant plus larges proportionnellement */
	}
	.Container::after {
		content: ""; /* Créer un pseudo-élément après le conteneur */
		display: block; /* Faire en sorte que ce pseudo-élément soit un bloc */
		flex-grow: 0; /* Ne pas permettre au pseudo-élément de se développer */
	}
	
	/*About*/
	.drapeau img {
		height: 15px; /* Définir la hauteur des images à 15px, probablement pour des icônes ou des drapeaux */
		} 

	.AboutMe p {
		line-height: 1.5em; /* Définir l'interligne à 1.5 fois la hauteur de la ligne, facilitant la lecture */
		font-size: 12px; /* Définir la taille de la police des paragraphes à 12px */
	}
	h1 {
		font-size: 15px; /* Définir la taille de la police des titres <h1> à 15px */
		margin: 10px; /* Ajouter une marge de 10px autour des titres <h1> */
	}
	.popup {
		padding-top: 20px; /* Ajouter un espacement de 20px en haut du popup (espacement vertical) */
		width: 100%; /* Définir la largeur du popup à 100% de son conteneur */
		height: 99%; /* Définir la hauteur du popup à 99% de son conteneur, laissant un léger espace */
	}
	.close {
		font-size: 18px; /* Définir la taille de la police du bouton de fermeture à 18px */
		top: 5px; /* Positionner le bouton de fermeture à 5px du bord supérieur */
		right: 5px; /* Positionner le bouton de fermeture à 5px du bord droit */
		padding: 5px 10px; /* Ajouter un padding de 5px en haut et en bas, et de 10px à gauche et à droite */
		margin: 0; /* Supprimer la marge autour du bouton de fermeture */
	}
	.popup-content {
		flex-direction: column; /* Disposer les éléments dans le popup en colonne */
		align-items: center; /* Centrer les éléments du popup horizontalement */
		text-align: center; /* Centrer le texte dans le popup */
	}
	.popup-image {
		max-width: 90%; /* Limiter la largeur de l'image à 90% de son conteneur */
		margin-bottom: 5px; /* Ajouter un espacement de 5px en bas de l'image */
		margin: 0; /* Enlever toute marge par défaut autour de l'image */
		padding: 0; /* Enlever tout padding autour de l'image */
	}
	.popup-title {
		font-size: 24px; /* Définir la taille de la police du titre dans le popup à 24px */
		margin-bottom: 10px; /* Ajouter une marge de 10px en bas du titre */
	}
	.popup-description {
		font-size: 12px; /* Définir la taille de la police de la description dans le popup à 12px */
		margin: 5px; /* Ajouter une marge de 5px autour de la description */
		line-height: 1.2em; /* Définir l'interligne à 1.2 fois la hauteur de la ligne pour une meilleure lisibilité */
	}
}


@media all and (max-width: 400px){ /* Applique les styles uniquement pour les écrans dont la largeur est inférieure ou égale à 400px */
	main {
		display: flex;
		flex-direction: column;
		height: 100%; /* Remplit toute la hauteur de la fenêtre */
		width: 95%; /* Définir la largeur de l'élément principal à 95% de l'écran */
		margin: 10px; /* Ajouter une marge de 10px autour de l'élément principal */
	}
	
	.titre {
		width: 100%; /* Définir la largeur de l'élément principal à 95% de l'écran */
		margin-left:0px; /* Ajouter une marge de 10px autour de l'élément principal */
	}
	
	/*Header*/
	.header {
		display: flex; /* Utiliser le modèle de mise en page flexbox pour le header */
		justify-content: space-between; /* Espacer les éléments du header de manière égale, avec de l'espace entre */
		padding-bottom:0 ; /* Enlever le padding en bas du header */
	}
	header .logo {
		width: 100px; /* Définir la largeur du logo à 100px */
	} 
	
	/* Footer */
	footer {
		bottom: 0px;
	}
	
	footer p {
		font-size: 8px;
	}
	footer .social img {
		transform: scale(0.8);
	}
	
	/*Menu déroulant*/
	.nav {display: none} /* Masquer le menu de navigation */
	#listnav {
		display: block; /* Afficher le menu de navigation */
		float: right; /* Positionner le menu à droite de son conteneur */
	}
	#listnav li {
		display: inline-block; /* Afficher les éléments de la liste en ligne */
		list-style-type: none; /* Enlever les puces des éléments de la liste */
		border: 1px solid #A5A5A5; /* Ajouter une bordure grise autour de chaque élément */
		position: relative; /* Définir une position relative pour l'élément, nécessaire pour certaines mises en page */
		background: white; /* Définir un fond blanc pour les éléments de la liste */
	}
	#listnav ul li {
		display: inherit /* Laisser l'affichage des éléments de liste comme celui du parent */
	}
	#listnav a {
		display: block; /* Faire en sorte que les liens prennent tout l'espace de l'élément de la liste */
		text-decoration: none; /* Enlever la décoration de texte (soulignement) des liens */
		padding: 10px 10px; /* Ajouter un padding de 5px à gauche et à droite, 5px en haut et en bas */
		font-size: 12px; /* Définir la taille de police des liens à 12px */
	}
	#listnav ul {
		position: absolute; /* Positionner le sous-menu de manière absolue par rapport à son conteneur parent */
		left: -999em; /* Placer le sous-menu très loin à gauche pour qu'il soit hors de la vue de l'utilisateur (initialement caché) */
		text-align: left; /* Aligner le texte à gauche dans le sous-menu */
		z-index: 1000; /* Placer le sous-menu au-dessus des autres éléments de la page (valeur élevée pour le superposer) */
		overflow: hidden; /* Cacher tout contenu qui dépasse du sous-menu */
	-moz-transition: .8s all .3s; /* Définir une transition pour les navigateurs Firefox (8s de durée, 0.3s de délai) */
	-webkit-transition: .8s all .3s; /* Définir une transition pour les navigateurs basés sur Webkit (Chrome, Safari, etc.) */
	transition: .8s all .3s; /* Définir une transition générique (durée 0.8s, avec délai de 0.3s) pour tous les navigateurs modernes */
	}
	#listnav li:hover ul {
		left: auto; /* Lorsque l'élément de la liste est survolé, remettre le sous-menu à sa position d'origine, le rendant visible */
	}
	
	/*Index*/
	.banniere {
		margin-bottom: 10px;
	}
	
	.welcomenav {
		gap: 2px;
	}
	.welcomenav a {
        transform: scale(0.5); /* Réduit la taille de l'élément à 80% de sa taille originale (20% plus petit). */
    }

	/* Paintings */
	.titre {
	padding-left: 10%;
	}
	.Container {
		width: 95%; /* Définir la largeur du conteneur à 95% de l'écran */
	}
	.Container li {
		width: 49%; /* Définir une largeur fixe de 120px pour chaque élément de la liste */
		height: auto; /* Laisser la hauteur de chaque élément de la liste s'ajuster automatiquement */
		flex-grow: 0; /* Laisser les éléments se développer avec une flexibilité de 1.5, les rendant plus larges proportionnellement */
	}
	.Container::after {
		content: ""; /* Créer un pseudo-élément après le conteneur */
		display: block; /* Faire en sorte que ce pseudo-élément soit un bloc */
		flex-grow: 0; /* Ne pas permettre au pseudo-élément de se développer */
	}
	
	.drapeau img {
		height: 15px; /* Définir la hauteur des images à 15px, probablement pour des icônes ou des drapeaux */
	} 
	
	/*About*/
	.AboutMe p {
		line-height: 1.5em; /* Définir l'interligne à 1.5 fois la hauteur de la ligne, facilitant la lecture */
		font-size: 12px; /* Définir la taille de la police des paragraphes à 12px */
	}
	h1 {
		font-size: 15px; /* Définir la taille de la police des titres <h1> à 15px */
		margin: 10px; /* Ajouter une marge de 10px autour des titres <h1> */
	}
	.popup {
		padding-top: 20px; /* Ajouter un espacement de 20px en haut du popup (espacement vertical) */
		width: 100%; /* Définir la largeur du popup à 100% de son conteneur */
		height: 99%; /* Définir la hauteur du popup à 99% de son conteneur, laissant un léger espace */
	}
	.close {
		font-size: 18px; /* Définir la taille de la police du bouton de fermeture à 18px */
		top: 5px; /* Positionner le bouton de fermeture à 5px du bord supérieur */
		right: 5px; /* Positionner le bouton de fermeture à 5px du bord droit */
		padding: 5px 10px; /* Ajouter un padding de 5px en haut et en bas, et de 10px à gauche et à droite */
		margin: 0; /* Supprimer la marge autour du bouton de fermeture */
	}
	.popup-content {
		flex-direction: column; /* Disposer les éléments dans le popup en colonne */
		align-items: center; /* Centrer les éléments du popup horizontalement */
		text-align: center; /* Centrer le texte dans le popup */
	}
	.popup-image {
		max-width: 90%; /* Limiter la largeur de l'image à 90% de son conteneur */
		margin-bottom: 5px; /* Ajouter un espacement de 5px en bas de l'image */
		margin: 0; /* Enlever toute marge par défaut autour de l'image */
		padding: 0; /* Enlever tout padding autour de l'image */
	}
	.popup-title {
		font-size: 24px; /* Définir la taille de la police du titre dans le popup à 24px */
		margin-bottom: 10px; /* Ajouter une marge de 10px en bas du titre */
	}
	.popup-description {
		font-size: 12px; /* Définir la taille de la police de la description dans le popup à 12px */
		margin: 5px; /* Ajouter une marge de 5px autour de la description */
		line-height: 1.2em; /* Définir l'interligne à 1.2 fois la hauteur de la ligne pour une meilleure lisibilité */
	}
}