/* Réinitialisation des styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Ajout de la police Quicksand avec une règle @font-face */
@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-light.ttf') format('truetype'); /* Chemin vers le fichier .ttf de la police Quicksand */
    font-weight: normal;
    font-style: normal;
}

/* Styles de base */
body {
    font-family: 'Quicksand', Arial, sans-serif; /* Utilisation de Quicksand avec des polices de secours */
    background-color: #fff;
    color: #333;
    line-height: 1.6;
}

header {
    background-color: #fff;
    color: #333;
	margin-top: 1vw; /* Ajoute un peu d'espace en haut du header */
	margin-bottom: 1vw; /* Ajoute une marge inférieure au header */
	height: 10vh; /* Limite la hauteur du header à 10% de la hauteur de la fenêtre */
}


header h1 {
    margin: 0 auto;
    text-align: center;
}

.moc {
    font-weight: LIGHTER;
    font-size:  12vmin; /* Ajustez la taille de la police de h1 selon vos besoins */ 
}

.architecture {
    font-size:  6vmin;
    font-weight: normal;
}







/* Styles pour le reste de la page */
section {
    padding: 1rem;
    text-align: center;
}


#projets {
    position: absolute; /* Position absolue pour pouvoir utiliser top */
    top: 50%; /* Déplace la section à 50% de la hauteur de la fenêtre */
    transform: translateY(-50%); /* Translate négatif de 50% de la hauteur de la section */
    width: 100%; /* Assure que la section prend toute la largeur */
    text-align: center; /* Centre le contenu horizontalement */
}


.project-section {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
	margin-left: 12vmax;
	margin-right: 12vmax; 
}


.project-gallery {
	display: flex;
    position: relative;
	overflow: hidden;
}

.gallery-slider{
	display: flex;
    position: relative;
}

.project-gallery .gallery-slider a {
    flex: 0 0 calc(33.33%);
	text-align: center; /* Centre le texte sous chaque projet */
    text-decoration: none; /* Supprime le soulignement */
    color: inherit; /* Hérite de la couleur du texte du parent */
}

.project-gallery .gallery-slider a:last-child {
    margin-right: 0; /* Supprime la marge à droite de la dernière photo */
}

.project-gallery .gallery-slider a img {
    max-width: 75%;
    height: auto;
	display: block; /* Assure que les images sont des blocs pour que le texte s'affiche en dessous */
}
.project-gallery .gallery-slider a .project-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les éléments à l'intérieur du conteneur */
}
.project-gallery .gallery-slider a .project-title {
    font-size: 1.5vmax;
	margin-top: 1vw;
    font-style: italic; 
	font-weight: 300;
	max-width: 75%;
}

.project-gallery .gallery-slider a .project-name {
    font-size: 0.9vmax;
	font-weight: 100;
	max-width: 75%;
}
.project-gallery .gallery-slider a .project-phase {
    font-size: 0.9vmax;
	font-weight: 100;
	max-width: 75%;
	font-style: italic; 
}










button {
    background: none;
    border: none;
    cursor: pointer;
}

#prev, #next {
    transform: scale(1);
}

#prev {
    z-index: 1; /* La flèche Précédent a un z-index supérieur pour être au-dessus des images */
}

#prev img,
#next img {
    max-width: 100%; /* Définir la largeur maximale sur 100% de la largeur du conteneur */
    height: auto; /* Laisser la hauteur s'ajuster automatiquement pour conserver les proportions de l'image */
}


footer {
    position: fixed;
    bottom: 2vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-details {
	text-align: center;
    margin-bottom: 3vh; /* Ajoute une marge inférieure pour espacer les éléments */
}

.contact-details a {
	display: block;
	color: #333;
	text-decoration: none;
	font-size: 1vw;	
	margin-bottom: -0.6vh;
}

.contact-details a:hover {
	text-decoration: underline;
}
.contact-details .phone {
    /* Ajoutez ici des styles spécifiques pour le téléphone si nécessaire */
}

.contact-details .email {
    font-weight: bold;
}

.contact-details .instagram {
    font-style: italic;
}

.copyright-details {
    text-align: center;
	margin-top: 2vh; /* Ajoute une marge supérieure pour espacer les éléments */
    font-size: 1vw;
}

.copyright-details p {
    display: inline;
    margin: 0;
}

.copyright-details .moc {
    font-weight: LIGHTER;
    font-size: 1vw;
}

.copyright-details .architecture {
    font-size: 0.75vw;
    font-weight: normal;
}
/* .copyright { */
	/* text-align: center; */
	/* width: 100%; */
	/* font-size: 1vw; */
	/* margin-top: 2vh; /* Ajoute une marge supérieure pour espacer les éléments */ 
/* } */






@media (max-width: 768px) {
	header {
		margin-top: 9vh; /* Ajoute un peu d'espace en haut du header */
	}
	.moc {
        font-size:  15vw; /* Ajustez la taille de la police de h1 selon vos besoins */ 
    }
    
    .architecture {
        font-size:  8vw;
    }
	#prev, #next {
    transform: scale(3);
	}
	.project-gallery {
		display: block;
	}
	.project-section {
		margin-left: 10vmin;
		margin-right: 10vmin; 
	}
	.project-gallery .gallery-slider a {
        flex: 0 0 100%; /* Un projet par ligne */
    }
	.project-gallery .gallery-slider a .project-content {
	}
	.contact-details {
		margin-bottom: 0vh; /* Ajoute une marge inférieure pour espacer les éléments */
	}
	.copyright {
		font-size: 2vw;
	}
	.copyright-details .moc {
		font-size: 2vw;
	}

	.copyright-details .architecture {
		font-size: 1.5vw;
	}
	.contact-details a {
		font-size: 2vw;	
	}
	.project-gallery .gallery-slider a img {
		margin-top: 6vh;
	}
	.project-gallery .gallery-slider a .project-title {
		font-size:  5vmin; 
	}

	.project-gallery .gallery-slider a .project-name {
		font-size:  4vmin; 
	}
	.project-gallery .gallery-slider a .project-phase {
		font-size: 3vmin;
	}
}

@media (min-width: 769px) and (max-height: 777px) {
    /* Styles pour les smartphones en mode paysage */
    /* Ajoutez vos styles ici pour les smartphones en mode paysage */
	header {
		margin-top: 0vh; /* Ajoute un peu d'espace en haut du header */
		margin-bottom: 1vh; /* Ajoute une marge inférieure au header */
		height: 10vh; /* Limite la hauteur du header à 10% de la hauteur de la fenêtre */
	}
	.moc {
		font-size:  8vh; /* Ajustez la taille de la police de h1 selon vos besoins */ 
	}

	.architecture {
		font-size:  4vh;
	}

    .button-container img {
        width: 25vh;
    }

	.copyright {
		font-size: 2vh;
	}
	.copyright-details .moc {
		font-size: 2vh;
	}

	.copyright-details .architecture {
		font-size: 1.5vh;
	}
	.contact-details a {
		font-size: 2vh;	
	}
	.project-gallery .gallery-slider a .project-title {
		font-size: 3vh;
	}

	.project-gallery .gallery-slider a .project-name {
		font-size: 2vh;
	}
	.project-gallery .gallery-slider a img {
		max-width: 40%;
	}
}