a {
    text-decoration: none; /* Remove underline */
    color: darkgrey;
}

.card {
  position: relative;
  padding: 12px;
  border-radius: 14px;
  z-index: 1111;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f0f0f0; /* Light background to make the text more visible */
}

.bg {
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  z-index: 2;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(24px);
  border-radius: 10px;
  overflow: hidden;
  outline: px solid white;
  transition: all 0.3s ease-in-out;

}

.card:hover .bg {
  opacity: 0;
}


.blob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #66A2D9;
  opacity: 1;
  filter: blur(12px);
  animation: blob-bounce 5s infinite ease;
}

p.home-link {
  position: relative;
  z-index: 2;
  color: darkgray; /* Darker color for the text */
  font-size: 28px; /* Slightly larger text */
  text-align: center;
  margin: 0;
}

@keyframes blob-bounce {
  0% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }
  25% {
    transform: translate(-100%, -100%) translate3d(100%, 0, 0);
  }
  50% {
    transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
  }
  75% {
    transform: translate(-100%, -100%) translate3d(0, 100%, 0);
  }
  100% {
    transform: translate(-100%, -100%) translate3d(0, 0, 0);
  }
}

/*END Coool new about link*/

.navbar {
    display: flex; /* Utilisation de Flexbox pour le menu entier */
    justify-content: center; /* Centre le menu horizontalement */
    align-items: center; /* Centre verticalement */
    padding: 20px; /* Espacement autour du menu */
    position: relative; /* Pour le positionnement de l'élément enfant */
    margin-top: 3%;
    font-family: Futura;
    font-size: 25px;
}

.nav-left, .nav-right {
    display: flex; /* Utilisation de Flexbox pour aligner les éléments sur une même ligne */
    position: absolute; /* Pour positionner les liens correctement */
}

.nav-left {
    left: 2%; /* Positionnement à gauche */
}

.title {
    position: absolute;
    left: 15%;
}

.nav-right {
    right: 2%; /* Positionnement à droite */
}

/* Galerie de photos */
.photo-gallery {
    display: flex; /* Utilisation de flex pour les colonnes */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante */
    width: 70%; /* Largeur de la galerie */
    margin: 20px auto; /* Centre la galerie */
	margin-top: 40px;
	margin-bottom: 70px
}

.column {
    flex: 1 1 calc(50% - 20px); /* Chaque colonne prend 50% de la largeur moins les marges */
    margin-right: 10px; /* Espace entre les colonnes */
}

/* Retirer le margin-right du dernier colonne */
.column:last-child {
    margin-right: 0;
}

/* Les photos */
.photo-item {
    margin-bottom: 10px; /* Espace ajustable entre les photos verticalement */
    break-inside: avoid; /* Empêche les photos de se casser en deux si elles dépassent dans une colonne */
}

.photo-item img {
    width: 100%; /* Garde les images à 100% de la largeur de leur conteneur */
    height: auto; /* Garde les proportions de l'image */
    display: block; /* S'assure qu'il n'y a pas d'espace en bas des images */
    cursor:zoom-in; /* Change to pointer on hover */
	
	/*smooth apparition*/
	opacity: 0;
    transform: scale(0.9); /* L'image commence légèrement plus petite */
    transition: opacity 0.5s ease, transform 0.5s ease;
	/* END smooth apparition*/
}

.photo-item.show img {
    opacity: 1;
    transform: scale(1); /* L'image reprend sa taille normale */
}

.lazy {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.lazy.loaded {
    opacity: 1;
}

.span-two-columns {
    flex: 1 1 100%; /* Span across both columns */
    margin-bottom: 10px; /* Same margin as other images */
}

.span-two-columns img {
    width: calc(100% + 10px); /* Stretch across the width of two columns including the space between columns */
    height: auto;
    display: block;
}

/* Pour le texte entre deux photos */
.caption {
    font-size: 18px;
    color: black;
    margin-top: 10px; /* Un léger espace au-dessus du texte */
    font-family: Futura;
}

/* Logos d'icônes */
.mail-logo, .insta-logo {
    width: 45px;
    height: 45px;
    margin-left: 10px; /* Espacement entre les icônes */
}

.mail-logo {
    margin-left: 0;
}

footer {
    font-family: Futura;
    text-align: center;
}

/* Styles pour la modale */
.modal {
    display: none; /* Masquer par défaut */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95); /* Fond sombre légèrement transparent */
    backdrop-filter: blur(10px); /* Ajoute un flou subtil pour un effet agréable */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
	cursor:zoom-out;
	
}

.modal.fadeIn {
    animation: fadeIn 0.5s ease forwards; /* Animation de fondu en entrée */
}

.modal.fadeOut {
    animation: fadeOut 0.5s ease forwards; /* Animation de fondu en sortie */
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.modal-content {
    max-width: 95%;
    max-height: 95%;
    overflow: hidden; /* Évite les débordements */
    transition: opacity 0.5s ease; /* Transition douce */
	
}

.modal-content img {
    width: 100%; /* S'assure que l'image est responsive */
    height: auto; /* Maintient les proportions */
    display: block;
}


.close {
    font-size: 30px;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
    color: cornflowerblue; /* Couleur blanche pour être visible sur le fond sombre */
}


.exit-message {
    position: absolute;
    left: 0px; /* Distance par rapport au bord gauche */
    top: 50%; /* Centre verticalement */
    transform: translateY(-50%) rotate(-90deg); /* Rotation pour rendre le texte vertical */
    font-family: Futura, sans-serif;
    font-size: 16px;
    color: cornflowerblue; /* Choisissez une couleur contrastante */
    opacity: 1; /* Affiché par défaut */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    z-index: 1001; /* Assure que l'élément est au-dessus des autres */
    transition: opacity 0.5s ease; /* Ajoute une transition douce pour l'apparition */
}

.hidden-photo {
    visibility: hidden; /* Masquer l'image sans la retirer de la mise en page */
}

.bottom-right-image {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px; /* Adjust the spacing above the footer */
    max-width: 150px; /* Adjust the size if needed */
}

@media (max-width: 720px) {
	body {
		margin:0px;
	}
	
	.title {
		position: relative;
		margin-left: 35px;
		text-align: center;
	}
	
	.navbar {
		margin-bottom:30px;
		flex-wrap: nowrap; /* Empêche l'empilement */
		justify-content: space-between; /* Espace entre les éléments */


	}
	
    .nav-left, .nav-right {
        display: flex;
        font-family: Futura;
        position: absolute;
    }
	
	.nav-left, .title {
        font-size: clamp(13px, 6vw, 24px);
	}
	
	.card{
		margin-right: 15px;
		padding: 10px;
	}
	
	
	
	p.home-link {
		font-size: clamp(20px, 6.2vw, 35px);
	}

    .contact-link, .about-link {
        margin-right: 10px; /* Reduce spacing between links */
    }

    .nav-left {
        left: 2%;
    }

    .nav-right {
        right: 2%;
    }

    .mail-logo, .insta-logo {
        width: 30px;
        height: auto;
        margin-left: 10px;
    }

    .logo {
        width: 50%;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    .vertical-text {
        bottom: 7px;
        left: 0;
        font-size: 13px;
        line-height: 0.2;
    }

    .caption {
        text-align:justify-all;
        font-size: clamp(11px, 4.5vw, 24px);
        color: black;
        font-family: Futura;
		margin-left: 2px;
		margin-right: 2px;
    }

    .photo-gallery {
        width: 100%;
        margin: 20px auto;
    }
    
    .vertical-text {
        position: fixed;
        transition: opacity 0.5s ease;
        opacity: 1;
        color: yellow;
    }
	
	
	.column {
		flex: 1 1 calc(50% - 20px); /* Chaque colonne prend 50% de la largeur moins les marges */
		margin-right: 2px; /* Espace entre les colonnes */
	}
	
	.photo-item {
		margin-bottom: 2px; /* Espace ajustable entre les photos verticalement */
	}
	
	.modal-content {
        max-width: 95%; /* Plus large sur mobile */
        max-height: 95%; /* Ajuster la hauteur */
        margin: 10px 0; /* Moins de marge en haut et en bas */
    }

    .close {
        font-size: 25px; /* Plus petite icône de fermeture sur mobile */
        top: 10px;
        right: 10px;
    }
	
	.exit-message {
		writing-mode: horizontal-tb; /* Change text direction to normal */
		position: absolute;
		top: 10px; /* Moves it to the top */
		left: 50%; /* Centers it horizontally */
		transform: translateX(-50%); /* Ensures perfect centering */
		font-size: 14px; /* Slightly smaller font size for mobile */
		color: cornflowerblue;
		opacity: 1; /* Ensures it's visible */
	}
	
	.bottom-right-image {
		width:30%;
		margin-top: 15%;
	}
	
	.nav-right {
		top:20px;
        right: 20px;
		flex-direction: column; /* Empile les éléments verticalement */
        align-items: center;
    }

    .mail-logo, .insta-logo {
        width: 34px;
        height: auto;
        margin-left: 0px;
		margin: 0px 0;
    }
	
	.bg {
		display: None;
	}
}